对于已经入门前端的同学，学会接口调试技能 算得上前端进阶的必经之路，但是雇一个后端来配合你学习接口调试显然有些不合理，那有没有自己一套全搞定的小工具呢？当然有，它就是 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/data
Content-Type: application/json
{
"title": "全栈",
"children": []
}这样就新增了一条类似下面这样的数据：
{
"title": "全栈",
"children": [],
"key": "JATqMgd"
}更新某条数据
PUT http://localhost:3000/data/JATqMgd
Content-Type: application/json
{
"title": "全栈开发",
"children": []
}发送请求之后，就会发现对应数据的title已经发生了变化。
删除某条数据
DELETE http://localhost:3000/data/JATqMgd发送请求后，对应的数据就被从db.json中移除掉了。
到此，我们已经完成了 正删改查 的接口调用，获得了“CRUD” Boy 荣誉称号。
其实 json-server 还有很多功能，如：条件查询（Filter），分页查询（Paginate），排序（Sort），甚至 关联查询（Relationships）。有兴趣可以去查看它的文档进行更深一步的学习。
这次的介绍到此就结束了，如果觉得不错，记得点赞鼓励一下❤️。