koa2+mongodb+react入門實戰篇

源碼地址歡迎start,謝謝！

寫在前面的話

近期由於工做壓力不大，因此利用空閒時間學學koa2,都說實踐纔是檢驗真理的惟一途徑嗎。因此就擼個小項目玩玩。舒適提示，本文只適合初學者，如我通常的菜鳥。大神請你走開，謝謝~

那就先上圖吧

技術棧
複製代碼

• react
• react-redux
• koa2
• mongodb
• axios
• antd

項目結構
複製代碼

項目運行

# 克隆到本地：
git clone https://github.com/wzz5304/koaTodoList
# 安裝依賴
react:
cd koaTodoList
npm install或yarn
npm start或yarn start
koa：
cd server
npm install(安裝依賴)
npm run dev(啓動項目)

# 本地開發，開啓服務器，瀏覽器訪問http://localhost:3000,koa監聽的是8081端口http://localhost:8081，
注意：代理配置在koaTodoList/package.json文件端口不一樣自行修改

複製代碼

實現功能

• 用戶登陸
• 註銷登陸
• token驗證
• 列表頁的增刪改查
• 列表分頁

代碼實現

• 前端

  • 腳手架配置參考 antd在 create-react-app 中使用 很詳細
  • http請求封裝主要參考http文件夾，全部的請求方法我都寫在public.api.js文件內
  • rApi(全部的請求方法)注入在redux的store倉庫內

• 後端

  • 文件結構

    

  主要流程：數據模型->控制器->路由->入口文件
  複製代碼

  • 數據庫相關

  # 數據庫名
  mydb
  # 表結構
  - 用戶表user
      userName：用戶名
      passWord：密碼
  - 車輛信息表carTable
      carCode: 車牌號,
      carTypeName: 車輛類型,
      driverName: 司機名字,
      remark: 備註,
      createTime: 建立時間,
      operatorName: 操做人
      
  具體參考 models文件
  複製代碼

踩到的坑及解決方案

• 安裝完數據庫記得配置環境變量 參考
• nodejs不支持es6因此須要自行配置 參考
• 使用mongoose.Schema實例化的時候記得最好加上collection配置，由於koa默認會給你的表名加s因此這裏有點坑，我踩到了以下：

  const UserSchema = Schema(
      {
          carCode: { type: String },
          carTypeName: { type: String },
          driverName: { type: String },
          remark: { type: String },
          createTime: { type: Number },
          operatorName: { type: String }
      },
      {
          collection: 'carTable'
      }
  )
  複製代碼

• 在redux或者本身封裝的http裏面想使用react-router的history方法很麻煩，因此能夠本身導入，以下

  import createHistory from 'history/createBrowserHistory'
  export default createHistory()
  須要用的地方import就ok了，我用的是react-router4.xx版本
  複製代碼

寫在最後的話

利用空餘時間本身玩玩日常項目沒有接觸到的東西，其實也挺好的。本項目適合新手練手，koa我也是新手。恰好有空而後本身玩玩，順便記錄下開發心得。 但願與有緣人一同交流交流。這只是開始，學習還在繼續。