对于曾经入门前端的同学，学会接口调试技能 算得上前端进阶的必经之路，然而雇一个后端来配合你学习接口调试显然有些不合理，那有没有本人一套全搞定的小工具呢？当然有，它就是 json-server，简略已学。本文就来介绍一下它。
装置
npm install -g json-server创立一个db.json蕴含一些数据的文件，你能够把它当做后端同学操作的数据库。
{ "tree": [ { "title": "前端", "key": "1", "children": [ { "title": "CSS", "key": "3", "children": [] }, { "title": "JavaScript", "key": "4", "children": [] } ] }, { "title": "后端", "key": "2", "children": [ { "title": "Node.js", "key": "5", "children": [] }, { "title": "Golang", "key": "6", "children": [] } ] } ]}启动服务
在你的蕴含db.json的目录关上终端，执行：
json-server --watch db.json呈现上面的后果：
➜ json-server --watch db.json \{^_^}/ hi! Loading db.json Done Resources http://localhost:3000/data Home http://localhost:3000 Type s + enter at any time to create a snapshot of the database Watching...这时你就能够通过接口获取数据了，如：
GET http://localhost:3000/data 就能够返回一个列表
[ { "title": "前端", "key": "1", "children": [ { "title": "CSS", "key": "3", "children": [] }, { "title": "JavaScript", "key": "4", "children": [] } ] }, { "title": "后端", "key": "2", "children": [ { "title": "Node.js", "key": "5", "children": [] }, { "title": "Golang", "key": "6", "children": [] } ] }]如果想要获取key=1的那条数据，申请上面的接口：
GET http://localhost:3000/data/1
然而返回了{}，这时问什么呢？起因是json-server默认是按id去查问的，把db.json的数据key都替换为id，下面这个接口就能够获取到数据了。
当然，json-server 提供了一个命令行参数 --id 能够让咱们本人指定数据的主键，如下：
json-server --watch --id key db.json这样启动后，也能够获取到数据。
新增一条数据
应用最简略的调用形式：
POST http://localhost:3000/data能够发现json-server在db.json中插入了一条只蕴含key的数据，如果想要让数据看起来更加残缺，能够这样调用：
POST http://localhost:3000/dataContent-Type: application/json{ "title": "全栈", "children": []}这样就新增了一条相似上面这样的数据：
{ "title": "全栈", "children": [], "key": "JATqMgd"}更新某条数据
PUT http://localhost:3000/data/JATqMgdContent-Type: application/json{ "title": "全栈开发", "children": []}发送申请之后，就会发现对应数据的title曾经产生了变动。
删除某条数据
DELETE http://localhost:3000/data/JATqMgd发送申请后，对应的数据就被从db.json中移除掉了。
到此，咱们曾经实现了 正删改查 的接口调用，取得了“CRUD” Boy 荣誉称号。
其实 json-server 还有很多性能，如：条件查问（Filter），分页查问（Paginate），排序（Sort），甚至 关联查问（Relationships）。有趣味能够去查看它的文档进行更深一步的学习。
这次的介绍到此就完结了，如果感觉不错，记得点赞激励一下❤️。