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我也是新手。刚好有空然后自己玩玩，顺便记录下开发心得。
希望与有缘人一同交流交流。这只是开始，学习还在继续。