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

Seattle、發表於2018-12-15
ReactMongoDB

原始碼地址, 如果覺得還不錯, 歡迎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: 註冊時間
複製程式碼
  1. 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. 歡迎指正

相關文章