对于已经入门前端的同学来说，学习界面调试技巧是进阶前端的必由之路，但是请个后端显然不合理配合你学习界面调试。没有自己的一套小工具来完成这一切？当然是json-server，简单易学。本文将对其进行介绍。安装npminstall-gjson-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--watchdb.json会出现如下结果：?json-server--watchdb.json\{^_^}/嗨！Loadingdb.jsonDoneResourceshttp://localhost:3000/dataHomehttp://localhost:3000随时输入s+enter创建数据库快照Watching...然后就可以通过接口获取数据For例子：GEThttp://localhost:3000/data可以返回一个列表[{"title":"frontend","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",“钥匙”：“6”，“孩子们”：[]}]}]如果想获取key=1的那条数据，请求如下接口：GEThttp://localhost:3000/data/1但是返回{}，为什么呢？原因是json-server默认是按id查询的。把db.json的datakey换成id，上面的接口就可以拿到数据了。当然json-server提供了一个命令行参数--id让我们自己指定数据的主键，如下：json-server--watch--idkeydb.json启动后也可以拿到数据像这样。添加一条数据使用最简单的调用方式：POSThttp://localhost:3000/data，可以发现json-server在db.json中插入了一条只包含key的数据，如果你想使数据看起来更完整，可以这样调用：POSThttp://localhost:3000/dataContent-Type:application/json{"title":"FullStack","children":[]}这将添加一个新的块数据类似如下：{"title":"Fullstack","children":[],"key":"JATqMgd"}更新一段数据PUThttp://localhost:3000/data/JATqMgdContent-type:application/json{"title":"Full-stackdevelopment","children":[]}发送请求后，会发现对应数据的title发生了变化。删除一条数据DELETEhttp://localhost:3000/data/JATqMgd发送请求后，对应的数据从db.json中删除。至此，我们完成了增删改查的接口调用，获得了“增删改查”少年的荣誉称号。其实json-server有很多功能，比如：条件查询（Filter）、分页查询（Paginate）、排序（Sort），甚至还有关系查询（Relationships）。如果您有兴趣，可以查看其文档以进一步学习。本次介绍到此结束，觉得不错记得点赞收藏鼓励哦??。
