React全家桶+Koa+TS+mongoDB+Antd实现的简单TodoList

Write a Todo and do it

技术栈

• React
• TypeScript
• Koa
• MongoDB
• Webpack
• React-Router等

Demo前后端分离

1. 前端目录src
2. 后端目录server
3. 使用的create-react-app来搭建开发环境,通过react-app-rewire来扩展自己的webpack配置

启动项目

yarn
mongod
yarn run koa
yarn start

实现思路

数据库

1. 用户模型

name: 用户名
passWord: 密码
registerTime: 注册时间
复制代码

2. todoList模型

userId: 待办事项对应的用户id
content: 待办内容
completed: 是否完成
time: 添加时间
复制代码

后端

1. koa-router配置路由, 暂时是实现用户注册, todo的增删改查
   1. 根路由匹配 /user 和 /todo 再分别调用对应的子路由对应的controller来对数据库进行增删改查
2. 根据数据库模型来完成controller和对应的routers
3. 写好公用的utils方法
4. 此时要约定好前后端交互的分页、以及请求参数格式, 写在server根目录的md里面了

前端

1. 前端暂时就注册、登录、Todo页面
2. 配置路由渲染对应的页面
3. 用户注册, 后台要校验用户名是否已存在, 用户登录要校验用户名和密码等
4. 实现好页面后, 设计reducer, 暂时的话就是处理todo的增删, 添加好actions
5. 封装一些常用的方法
   1. 基于axios的request
   2. 接口返回信息提示框
   3. 时间的render函数
   4. 分页的处理函数
6. 封装好不同的模块对应要调用的service和常量

启动前端服务

1. 可以 yarn start 来通过webpack-dev-server开启服务然后访问localhost:3000即可, 这边通过package.json设置代理地址 "proxy": "http://127.0.0.1:3001" 解决跨域
2. 或者 yarn run build 打包好静态文件后
3. 可使用nginx来代理静态文件并设置代理地址