作为一个前端开发工程师，在后端还没有给我们接口的时候，我们大多数情况都是写一些死数据来作为占位，但这样我们无法测试是否真的能调用数据，我们可以利用json-server起一个本地的服务，到时候后端给我们接口的时候，我们在把API换成后端给我们的接口。我们只需要提供一个json文件，填充一些数据就可以模拟出RESTful API的接口。
一、启动服务器
node环境安装
json-server 需要通过 npm 下载，npm 依赖在 node 中。
注意：node 版本一定要 12 以上。不然会报以下错误：
json-server requires at least version 12 of Node, please upgrade
全局安装json-server
建议全局安装，因为以后你可能会对 json-server 产生依赖。全局安装方式：
npm install -g json-server
创建数据库
新建一个 json 文件，再填入数据即可。创建的json文件中，必须要有id属性，否则后续发送请求时会报错。
启动服务
进入当前目录，打开终端输入以下命令即可
json-server --watch stu.json --port 5656
二、服务器接口的调用
2.1 查（get）
json-server 查询数据需要使用 GET 方法。刚刚我们创建了2个接口，我们可以直接在浏览器、postman或者自己写JS代码获取数据。
例如：
http://localhost:5656/stus
ID查询
http://localhost:5656/stus/{id}
条件查询
1.单一条件查询
查找 name 为 徐飞 的所有数据。
http://localhost:5656/stus?name=徐飞
2.多条件查询（且）
这次要筛选的是 name = 张飞 且 age = 12 的数据，符合条件筛选的时候，使用 & 号添加条件。
http://localhost:5656/stus?name=张飞&age=12
3.多条件查询（或）
这次要筛选的是 age = 12 和 age = 13 这两条数据出来。重复使用 age ，会把符合条件的都筛查出来。
http://localhost:5656/stus?age=12&age=13
分页查询
使用 _page 和 _limit(可选) 对数据进行分页。需要注意，_page 和 _limit 前面都要有下划线。_page：页码，_limit：每页的数据量。
需要获取第2页的数据，每页3条：
http://localhost:5656/stus?_page=2&_limit=3
2.2 增（post）
json-server 新增数据需要使用 POST 方法。
这里使用 post 方法向 /stus 接口传输数据，/stus 原本的数据结构是包含 id、name、age、class 四个字段，id 默认是自增主键，不传的话会默认增加。
需要注意的是：
json-server 默认情况下并不会限制你上传的数据格式和类型，所以需要你严格遵循自己设计的数据格式来添加和修改。
2.3 删（delete）
json-server 删除数据需要使用 DELETE 方法。
http://localhost:5656/stus/{id}
返回的data此时为一个空对象。
此时打开 db.json 就会发现刚刚删除的那条数据已经没了。
需要注意的是：删除成功 Status 会返回 200；如果删除的数据不存在会返回 404。
2.4 改（put 和 patch）
修改数据分为2个方法：
put ：覆盖
patch ：更新
http://localhost:5656/stus/{id}
当发送put请求时
例：把 id 为 01 的数据改成 { "name": "李浩","age":12, "class": "211班" }
此时打开 stu.json 就可以看到 id 为 01 的数据已经发生变化。
注意：原本的数据包含 name、age 和 class ，使用 put 时必须把这三个字段都写上，不然会删掉没传的字段。这就是 “覆盖” 的意思。
当发送patch请求时
例：使用 patch 方法把 id 为 02 的数据 age 字段的值更改成 23。
打开 stu.json 文件查看一下，会发现只改了 id 为 02 的 age 值，并没有删掉其他字段的数据。
总结
顾名思义，json-server就是个存储json数据的server。json-server主要的作用是搭建一台JSON服务器，测试一些业务逻辑，便于调试调用。前后端分离的开发模式下前端使用 json-server模拟数据接口, 这时候 后端接口还没有开发出来, 前端又需要数据进行开发。这种情况下就需要前端先行模拟数据, 等后端接口写好进行 targetUrl 进行替换。