前言
在写前端项目时,你是否会遇到以下情况:
- 与后端进度不一致,急需接口测试项目功能
- 压根没有后端接口,而自己又迫切需要模拟接口模拟数据进行测试
若你正需要一套强大的,能够符合你心意的模拟的后端数据接口,那么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