前言

在写前端项目时，你是否会遇到以下情况：

• 与后端进度不一致，急需接口测试项目功能
• 压根没有后端接口，而自己又迫切需要模拟接口模拟数据进行测试

若你正需要一套强大的，能够符合你心意的模拟的后端数据接口，那么json-server将是你的不二之选

json-server介绍

使用json-server我们只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口。

安装

使用npm全局安装：

npm install -g json-server

入门

创建JSON文件

创建一个db.json包含一些数据的文件：

{
    "posts": [
        {
            "id": 1,
            "title": "json-server",
            "author": "typicode"
        },
        {
            "id": 2,
            "title": "json-server2",
            "author": "typicode2"
        }
    ],
    "comments": [
        {
            "id": 1,
            "body": "some comment",
            "postId": 1
        },
        {
            "id": 2,
            "body": "some comment2",
            "postId": 2,
            "author": {
                "name": "typicode"
            }
        },
        {
            "id": 3,
            "body": "some comment3",
            "postId": 1
        }
    ],
    "profile": {
        "name": "typicode"
    }
}

JSON文件中一级的key值就是一个接口的名称，如上所示会生成三个接口：

• /posts
• /comments
• /profile

key值对应的数组内就是该接口的数据。

同时在comments的数据中有一个postId字段（注意不是postsId）对应的是posts中的id，表示comments是与posts相关联的（类似于后端的表关联）

启动JSON server

控制台运行启动db.json：

json-server --watch db.json

启动成功：

默认启动使用的端口号是3000，此时直接访问：http://localhost:3000/posts就会得到posts中的数据：

指定端口号

使用--port指定端口号为5000：

json-server --watch db.json --port 5000

接口使用

对于JSON server生成的接口，可以同时使用 POST、PUT、PATCH 或 DELETE 请求，对应的更改将自动安全地保存到db.json文件中

简单使用

# 获取所有的posts信息
GET    /posts
 
# 获取id=1的posts信息
GET    /posts/1
# 或
GET    /posts/?id=1
 
# 添加posts信息，请求body中必须包含posts的属性数据，json-server自动保存。
POST   /posts
 
# 修改posts中id=1的数据，请求body中必须包含posts的属性数据
PUT    /posts/1
# 或
PUT	   /posts/?id=1
# PATCH请求补丁式修改
PATCH  /posts/1
 
# 删除posts中id=1的信息
DELETE /posts/1
 

筛选

一级筛选

# 获取posts中title=json-server并且author=typicode的数据
GET /posts?title=json-server&author=typicode

使用 . 访问深层属性

# 获取comments中author.name=typicode的数据
GET /comments?author.name=typicode

使用判断条件

可以用的判断条件为：

• _gte : 大于等于
• _lte : 小于等于
• _ne : 不等于
• _like : 包含

# 查询posts中id不等于1的数据
GET /posts?id_ne=1

GET /posts?id_lte=1
GET /posts?title_like=server

连接表查询

# 查询posts中id=1对应的comments中的数据
GET /posts/1/comments

分页

_page： 第几页
_limit：一页多少条

GET /posts?_page=1
GET /posts?_page=2&_limit=1

• 默认一页10条
• 后台会返回总条数，总条数的数据在响应头:X-Total-Count中

排序

_sort：排序的字段
_order：排序的方式：升序asc（默认），降序desc

# 根据id升序查询posts中数据
GET /posts?_sort=id&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

支持多个字段排序：

GET /posts?_sort=id,title&_order=desc,asc

片

_start：片开始的位置
_end或_limit：片结束的位置

与Array.slice完全一样工作（即_start具有包容性和_end排他性）

# 查询posts中下标0（包含下标0）到下标1（不包含下标1）之间的数据，即第1条
GET /posts?_start=0&_end=1
# 查询posts中id=1对应的comments中的数据的下标1到下标3之间的数据
GET /posts/1/comments?_start=1&_end=3

全文搜索

q：搜索内容

# 搜索posts中包含typicode2的数据
GET /posts?q=typicode2

关系

同时获取子资源

_embed：需要包含的子资源

GET /posts?_embed=comments

获取包含子资源comments中数据（根据comments中的postId与posts中的id相对应进行查询）的posts数据

posts对应的comments子资源会存放到posts的comments字段中

GET /posts/1?_embed=comments

获取posts中id=1并且包含其对应的子资源comments数据的数据

同时获取父资源

_expand：需要包含的父资源

GET /comments?_expand=post

GET /comments/1?_expand=post

获取或创建嵌套资源

GET  /posts/1/comments
POST /posts/1/comments