koa2+mongodb+react入门实战篇

964 阅读2分钟

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