15

图片描述

序列文章

从项目中由浅入深的学习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 或Robo 3T是mongodb可视化操作工具 (可选)
4.启动
mongod (启动 mongodb)
打开Robomongo 或Robo
cd koa-template
npm i
npm run start
cd react-template
npm i
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!


火狼
9k 声望4.5k 粉丝

vue,react,小程序,ts,php,node乱炖