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我也是新手。恰好有空而后本身玩玩，顺便记录下开发心得。 但愿与有缘人一同交流交流。这只是开始，学习还在继续。