作为一个前端开发工程师,在后端还没有给我们接口的时候,我们大多数情况都是写一些死数据来作为占位,但这样我们无法测试是否真的能调用数据,我们可以利用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 进行替换。