preface

React has been used for some time, and I also want to write something with React. The most popular blog is blog, so I designed a spa blog with the help of antD UI framework. The react ecosystem uses koA + Sequelize + mysql as its backend. The react ecosystem uses koA + Sequelize + mysql as its backend.

blogger

  • Separate front and background development (the project also includes the blog’s background management system). In order to record the back-end development process, the author also put the back-end in the same project folder.

  • The style of blog almost relies on antD, the excellent UI framework, and focuses on the simple style, which is designed by the author using antD’s official style for reference.

  • There are several branches for learning and viewing the development record. We believe this project will provide some lessons for those who are new to React

  • Blog – contact me you can email [email protected] message ~ 434358603 | | QQ blog about page

  • The project address

  • Preview the address

    • User name admin/admin the highest permission, ask partners do not arbitrarily delete data, arbitrarily delete data other partners will have no data to see.
    • The highest permission is given so that you can see the permissions of the blogger. Experience the full functionality of the blog.
    • Background access path /admin

Realize the function

  • Home page + list page + search page + background add, delete, change, etc
  • Blog tags, categories
  • Comment and reply function module Comment reply email notification
  • User login and registration, and permission management (JWT + localStorage)
  • Markdown code highlights
  • Anchor navigation back to the top
  • Responsive development
  • Personal account information modification

Technology stack

  • Front end (based oncreate-react-app ejectConfiguration after)
    • The react v16.8.1
    • redux redux-thunk
    • react-router4
    • axios
    • marked highlight.js
  • Backend (self-built backend project)
    • koa2 + koa-router
    • sequelize + mysql
    • jwt + bcrypt
    • nodemailer

branch

In order to facilitate the review of development records, the author has several branches

  1. client-chore: Records the build process of the front-end project
    1. Configure react + antd + less + babel-plugins-import
    2. Configure redux + Redux-thunk + Redux-Logger (development and production environments)
    3. Configuration decorator + AXIOS encapsulation + Routing configuration (Main blog routing and Admin system)
  2. server-chore: Records the build process of back-end projects
    1. Configure the KOA + KOA-Router + middleware
    2. Project structure division (MVC structure)
    3. Configure sequelize and the database design
    4. .
  3. Client-markdown: Enables markdown syntax highlighting
  4. Dev: Development branch
  5. Email-notice: indicates the email push service

The effect

The preview address is here

An overview of

Comment function with others

responsive

Background management

Table structure

Open the project

The front end

git clone https://github.com/gershonv/react-blog.git

cd react-blog

npm i --registry=https://registry.npm.taobao.org

npm start
Copy the code

The back-end

Create a blogdev mysql database and modify server/config/db.js to connect to your database. Run the server/config/blogdev. SQL file to import data

cd server
npm i --registry=https://registry.npm.taobao.org
npm start
Copy the code

conclusion

From developing a personal blog from scratch, the whole experience is that you don’t know how much you don’t know or how to use it properly until you start. A sparrow has all the organs in the body.

The point is that

  • The front end
    • How to organize the project architecture. Proper project architecture can improve development efficiency and better maintenance.
    • How to encapsulate router 4 for better expansion and maintenance? The Rekit directory structure is used in part
    • How to organize your code with react features
    • How to improve efficiency with tools, decorators, hot loading, (Redux,…)
    • Of course the permission management of JWT, the use of ANTD
  • The back-end
    • Koa various types of middleware use
    • Login registration permissions, JWT encryption, how to handle permissions
    • Use model of Sequelize to define multiple tables ~
    • Unified handling of errors, how to handle gracefully
    • How to build the project structure and so on

Source code address: github.com/alvin0216/r…

Project Structure:

The background

The project address

Module design

  • Auth = 1 has the highest permission to add, delete, modify and check articles, comments and replies (root user can only change permission in the database after registration)
  • Common user Auth = 2 has the function of commenting and replying
  • Note that the page reference articleId = -1 is used to create a self-editing library

PS: If you feel good, you can give a star ~~~ or fork it down. You can also make an issue if you have any suggestions