介绍

今天在开发小程序应用时接触到一款简单易用的前端Mock工具，特此整理记录。json-server是一款非常简单易用的数据Mock工具，对于前端开发测试接口时非常适用，只需要提供对应的JSON数据就可以Mock出一个接口来。

GitHub地址：https://github.com/typicode/json-server

安装命令，需要先安装node

npm install -g json-server
1

安装完成之后,选择本地的一个目录作为数据存储地方，然后创建db.json文件，并写入下面的测试内容

{
  "posts": [
    { "id": 1, "title": "json-server-1", "author": "typicode-1" }
    { "id": 2, "title": "json-server-2", "author": "typicode-2" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
1
2
3
4
5
6
7
8
9
10

启动JSON服务，在db.json目录下运行启动命令

json-server --watch db.json
1

上面的Resources表示当前服务提供了那些端点接口，默认启动的是3000端口

HTTP请求测试

GET

查询列表

根据ID查询

参数化查询

http://localhost:3000/posts?title=json-server-2&author=typicode-2

分页查询

GET /posts?_page=1
GET /posts?_page=1&_limit=3
默认limit为10

排序

可以使用_sort 和 _order属性来进行数据排序，其中 _order默认是asc升序

http://localhost:3000/posts?_sort=view&_order=asc

比较器

【1】通过_gte和_lte去进行数字类型数据范围的查找
http://localhost:3000/posts?view_gte=20&view_lte=200

【2】通过_ne去进行数据的排除
http://localhost:3000/posts?author_ne=typicode-1

【3】使用_like进行模糊查询
http://localhost:3000/posts?author_like=code

全文检索

通过q进行全文检索
GET /posts?q=internet

POST

Post用于新增数据，数据会被写入到json文件中，可以被实时查询到

PUT

PUT用于更新数据，数据会被写入到json文件中，可以被实时查询到
PUT http://localhost:3000/posts/1 需要指定路径参数

DELETE

DELETE /posts/1

小结

该工具支持多个主流的HTTP方法请求，其中POST/PUT等会将请求的数据写入到本地的db.json文件中去。POST/PUT请求需要指定Content-Type: application/json请求头格式。

如果手动修改文件是不会热加载的，需要重新启动。但是通过POST、PUT等方法变更的数据是会被实时查询到的。

PUT/POST默认会添加一个ID属性，POST时如果JSON请求体内有冲突的ID，则提交失败，异常信息如下

可以通过json-server --watch db.json --port 3004自定义启动端口。

对于团队内开发可以访问远程服务器文件，或者互相访问

$ json-server http://example.com/file.json
$ json-server http://jsonplaceholder.typicode.com/db
1
2

自己也只是项目开发中刚刚接触，官方文档还提及了生成随机数据、添加自定义路由、设置中间件（修改头部，鉴权等）、集成其他三方工具等等，详细的可以参考官方文档 https://github.com/typicode/json-server