共计 2216 个字符，预计需要花费 6 分钟才能阅读完成。
序列文章
从项目中由浅入深的学习 vue, 微信小程序和快应用 (1)
从项目中由浅入深的学习 react (2)
从项目中由浅入深的学习 typescript (3)
前言
node.js 的出现前端已经可以用 js 一把梭, 从前端写到后台。
本文从后台利用 node 的框架 koa+mongodb 实现数据的增删改查和注册接口，前端利用 umi + dva +ant-design-pro 来实现数据渲染。实现一个小全栈 project, 就是 so-easy
1. 效果图
react-koa 全栈项目，欢迎 star
2. 技术栈
koa：node 框架
koa-bodyparser：解析 body 的中间件
koa-router：解析 router 的中间件
mongoose：基于 mongdodb 的数据库框架，操作数据
nodemon：后台服务启动热更新
3. 项目目录
├── app // 主项目目录
│ ├── controllrts // 控制器目录（数据处理）
│ │ └── … // 各个表对应的控制器
│ ├── middleware // 中间件目录
│ │ └── resFormat.js // 格式化返回值
│ ├── models // 表目录（数据模型）
│ │ ├── course.js // 课程表
│ │ └── user.js // 用户表
│ └── utils // 工具库
│ │ ├── formatDate.js // 时间格式化
│ │ └── passport.js // 用户密码加密和验证工具
├── db-template // 数据库导出的 json 文件
├── routes // 路由目录
│ └── api // 接口目录
│ │ ├── course_router.js // 课程相关接口
│ │ └── user_router.js // 用户相关接口
├── app.js // 项目入口
└── config.js // 基础配置信息
4. 项目启动步骤
1.git clone
2. 安装 mongodb:http://www.runoob.com/mongodb…
3. 安装 Robomongo 是 mongodb 可视化操作工具 (可选)
4. 启动
cd koa-template
npm run start
cd react-template
npm run start
注意:
mongodb 启动默认端口号是 27017, 启动看是否被占用
后端项目端口号是 3000, 可以在 koa-template/config.js 里面修改
5.koa 的主要 API
| API | 作用 |
|---|---|
| new koa() | 得到 koa 实例 |
| use | koa 的属性, 添加中间件 |
| context | 将 node 的 request 和 response 对象封装到单个对象中, 每个请求都将创建一个 Context, 通过 ctx 访问暴露的方法 |
| ctx 方法 | request: 请求主体; response: 响应主体; ctx.cookies.get: 获取 cookie; ctx.throw: 抛出异常 |
| request 属性 | header: 请求头; method: 方法; url: 请求 url; originalUrl 请求原始 URL; href: 完整 URL; hostname: 主机名; type: 请求头类型; |
| response 属性 | header: 响应头; status: 状态, 未设置默认为 200 或 204; body: 响应主体,string(提示信息) Buffer Stream(流) Object Array JSON- 字符串化 ull 无内容响应; get: 获取响应头字段; set: 设置响应头; append: 添加响应头; type: 响应类型; lastModified: 返回为 Date, 如果存在; etag: 设置缓存 |
6.koa-router 主要 API
| API | 作用 |
|---|---|
| get | get 方法 |
| post | post 方法 |
| patch | patch 方法 |
| delete | delete 方法 |
| prefix | 配置公共路由路径 |
| use | 将路由分层, 同一个实例 router 中可以配置成不同模块 |
| ctx.params | 获取动态路由参数 |
| fs | 分割文件 |
7.mongoose 主要 API
| API | 作用 |
|---|---|
| Schema | 数据模式, 表结构的定义；每个 schema 会映射到 mongodb 中的一个 collection，它不具备操作数据库的能力 |
| model | schema 生成的模型，可以对数据库的操作 |
model 的操作 database 方法
| API | 方法 |
|---|---|
| create/save | 创建 |
| remove | 移除 |
| delete | 删除一个 |
| deleteMany | 删除多个 |
| find | 查找 |
| findById | 通过 id 查找 |
| findOne | 找到一个 |
| count | 匹配文档数量 |
| update | 更新 |
| updateOne | 更新一个 |
| updateMany | 更新多个 |
| findOneAndUpdate | 找到一个并更新 |
| findByIdAndUpdate | 通过 id 查找并更新 |
| findOneAndRemove | 找到一个并移除 |
| replaceOne | 替换一个 |
| watch | 监听变化 |
query 查询 API
| API | 作用 |
|---|---|
| where | 指定一个 path |
| equals | 等于 |
| or | 或 |
| nor | 不是 |
| gt | 大于 |
| lt | 小于 |
| size | 大小 |
| exists | 存在 |
| within | 在什么之内 |
注:Query 是通过 Model.find()来实例化
aggregate(聚合)API
| API | 作用 |
|---|---|
| append | 追加 |
| addFields | 追加文件 |
| limit | 限制大小 |
| sort | 排序 |
注:aggregate=Model.aggregate()
更多详细 API, 请戳
8.react 项目详情
从项目中由浅入深的学习 react
9. 总结
一个 koa 项目就是从 koa-bodyparser 来解析 body,koa-router 来分发和处理接口,mongose 来操作 database。入门就是 so-easy！
