The source address, if you feel good, welcome star to let me have more motivation to continue learning and sharing

preview

Write at the beginning

Write a Todo and do it

Technology stack

  • React
  • TypeScript
  • Koa
  • MongoDB
  • Webpack
  • React to the Router, etc

The front and back ends of Demo are separated

  1. Front-end directory SRC
  2. Back-end directory Server
  3. Create-react-app is used to build the development environment, and react-app-rewire is used to extend the webPack configuration

Start the project

  1. yarnInstallation project dependencies
  2. mongodStart the mongo
  3. yarn run koaStart the back-end service
  4. yarn startStart the front-end service
  5. Access localhost: 3000

Implementation approach

The database

  1. The user model
Name: user name passWord: passWord registerTime: registration timeCopy the code
  1. TodoList model
UserId: indicates the userId of the to-do item. Content: indicates the to-do item. Completed: indicates whether the to-do item is completedCopy the code

The back-end

  1. Koa-router configates the route, temporarily implements user registration, and adds, deletes, changes, and checks toDO
    1. Root Route Matching/userand/todoThen call the corresponding subroute corresponding controller to add, delete, change and check the database
  2. Complete the Controller and corresponding routers according to the database model
  3. Write the public utils method
  4. This time to agree on the front and back end of the interaction of paging, and request parameter format, written in the server root directory md inside

The front end

  1. The front end temporarily registers, logs in, and Todo pages
  2. Configure the page for route rendering
  3. User registration, background to verify whether the user name exists, user login to verify the user name and password
  4. After realizing the page, reducer was designed. Temporarily, it was to add and delete todo and add actions
  5. Encapsulate some common methods
    1. Request based on Axios
    2. An information dialog box is displayed
    3. The render function of time
    4. A pagination handler
  6. Encapsulate the services and constants to be called by different modules

Start the front-end service

  1. canyarn startStart the service with webpack-dev-server and then go to localhost:3000. Set the proxy address with package.json"Proxy" : "http://127.0.0.1:3001"To solve the cross domain
  2. oryarn run buildAfter you pack the static files
  3. You can use nginx to proxy static files and set proxy addresses

The target function

The front end

  • registered
  • The login
  • Add the backlog
  • Switch to do
  • Delete the to-do
  • A better implementation of loading

The back-end

  • model
  • controller
  • DbDao
  • routers
  • Paging query
  • Encapsulate returned data
  • Nginx proxy
  • docker, Jekins

Technical Todo

  • Redux
  • Router
  • Koa+Router
  • Learning mongoDB Indexes
  • Encapsulate the parameters returned by the interface
  • Using Nginx to implement static services, proxy requests resolve across domains
  • Add delete and completed
  • Added inline editing, cell double-click editing, and search
  • Adding token Verification
  • docker,jenkins

Write the last words

  1. First of all, I recommend a plugin that can be accessed by Google, whether or not you already have scientific Internet access: Google Plugin SearchGoogle Access Assistant, seems to be accessible onlygoogle.comAnd Google plugins, but that’s what I’m sharing for
  2. Write a Todo and do it
  3. If you find this article and demo helpful, welcome star to inspire me to learn and share technology better
  4. Welcome to point out mistakes