源码地址, 如果觉得还不错, 欢迎star让我有更多动力来继续学习和分享

预览效果

写在开头的话

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配置

启动项目

1. yarn安装项目依赖
2. mongod启动MongoDB
3. yarn run koa启动后端服务
4. yarn start启动前端服务
5. 访问localhost:3000

实现思路

数据库

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来代理静态文件并设置代理地址

目标功能

前端

• 注册
• 登录
• 添加待办
• 切换待办
• 删除待办
• loading的更优实现

后端

• model
• controller
• DbDao
• routers
• 分页查询
• 封装返回数据
• nginx代理
• docker, Jekins

技术Todo

• Redux
• Router
• Koa+Router
• 学习mongoDB索引
• 封装接口返回的参数
• 使用nginx实现静态服务，代理请求解决跨域
• 增加删除和已完成
• 增加行内编辑、单元格双击编辑和搜索
• 增加token校验
• docker,jenkins

写在最后的话

1. 首先推荐一个可以访问谷歌的插件, 不管你是否已经能科学上网了：谷歌插件搜索谷歌访问助手, 好像只能访问google.com和谷歌插件, 但是这就是我要分享的目的了
2. Write a Todo and do it
3. 如果觉得本文和demo对你有一些帮助, 欢迎star来激励我更好的学习和分享技术
4. 欢迎指正