json-server的简单使用

前置

在做前端开发时，如果不懂后端的情况下，有的时候做的项目是一个前后端分离的项目，则这个时候一般后台的开发是慢于前端开发的。这个时候由于后端没有完成好相关的接口或者是接口文档还没有写好，就需要前端自己使用一定的技术方案去模拟接口请求，一般把这种开发模式称之为 mock（假数据）。

mock数据的方式有很多种

• json 文件
• express
• rap2.taobao.org
• mock.js
• json-server 工具包

json-server 详解

JSON-Server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。

安装json-server

npm install -g json-server

yarn global add json-server

启动 json-server

json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。

db.json文件的内容：

{
	"news": [
		{
			"id": 1,
			"title": "新闻1一"
		},
		{
			"id": 3,
			"title": "新闻1一"
		},
		{
			"id": 2,
			"title": "新闻2一"
		}
		
	]
}

例如以下命令，把db.json文件托管成一个 web 服务。

 json-server --watch --port 6868 db.json
 （端口自定义）

输出类似以下内容，说明启动成功。

打开浏览器，输入: http://localhost:6868/
找到news点进去

过滤查询

查询数据，可以额外提供

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2

# 可以用 . 访问更深层的属性。
GET /comments?author.name=typicode

还可以使用一些判断条件作为过滤查询的辅助。

可以用的拼接条件为：

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

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

分页查询

默认后台处理分页参数为： _page 第几页， _limit 一页多少条。

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

默认一页10条。

后台会返回总条数，总条数的数据在响应头:X-Total-Count中。

排序

• 参数： _sort 设定排序的字段
• 参数： _order 设定排序的方式（默认升序）

GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

支持多个字段排序：

GET /posts?_sort=user,views&_order=desc,asc

任意切片数据

GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
GET /posts/1/comments?_start=20&_limit=10

全文检索

可以通过q参数进行全文检索，例如：GET /posts?q=internet