目录

• ​​前言​​
• ​​json-server介绍​​
• ​​安装​​
• ​​入门​​

• ​​创建JSON文件​​
• ​​启动JSON server​​
• ​​指定端口号​​

• ​​接口使用​​

• ​​简单使用​​
• ​​筛选​​

• ​​一级筛选​​
• ​​使用 `.` 访问深层属性​​
• ​​使用判断条件​​
• ​​连接表查询​​

• ​​分页​​
• ​​排序​​
• ​​片​​
• ​​全文搜索​​
• ​​关系​​

• ​​同时获取子资源​​
• ​​同时获取父资源​​
• ​​获取或创建嵌套资源​​

前言

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

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

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

json-server介绍

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

安装

使用​​npm​​全局安装：

npm install

入门

创建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的信息

筛选

一级筛选

# 获取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中的数据

分页

​​_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