React全家桶+Koa+TS+mongoDB+Antd實現的簡單TodoList

摘要： Write a Todo and do it 技術棧 React TypeScript Koa MongoDB Webpack React-Router等 Demo前後端分離 前端目錄src 後端目錄se...

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來代理靜態檔案並設定代理地址