JsonServer——前端mock方案,只需要本地node服务便可以轻松搭建。
相比于其他前端mock方案,它的优点在于:
1.官方称——在不到30秒的时间内获得具有零编码的完整伪造的REST API
2.自定义程度高
3.搭建简单快捷,维护成本低
我们试试30秒内能不能快搭建一个
1.首先下载安装依赖
npm install -g json-server
2.在根目录下新建一个db.json文件
3.在db.json文件中构造数据如:
{
"users": [
{
"id": 1,
"name": "小芳",
"age": 18
}
]
}
4.启动一下服务
json-server --watch db.json --port 3000
搭建完成,我们使用postman或者网址形式访问测试一下
http://localhost:3000/users/1
得到数据
{
"id": 1,
"name": "小芳",
"age": 18
}
测试30秒内搭建一个简易的完全没有问题
REST API风格代码浅识
GET /users 获取users列表数据
GET /users/1 获取users列表id为1的用户详情
POST /users 向users列表中新增数据
PUT /users/1 替换users列表id为1的用户数据
PATCH /users/1 修改users列表id为1的用户数据
DELETE /users/1 删除users列表id为1的用户数据
简单认识了JsonServer之后我们系统的来搭建一个mock服务
这里我们以Vue2项目为例子来搭建
1.还是首先下载安装依赖
npm install -g json-server
2.在项目根目录下创建一个JsonServerMock文件夹并且在JsonServerMock文件夹下新建db.json文件
graph TD
JsonServerMock --> db.json
3.在package.json配置启动命令
"script":{
"json_server": "json-server JsonServerMock/db.json --watch --port 3008"
}