在web项目开发中,前端完成静态页面的开发后,后端迟迟未给到接口,会导致前、后端数据交互的开发流程中停滞。可以根据后端接口字段,通过json-server模拟服务端REST风格的API接口,进而实现前端的独立开发。
一、json-server安装
json-server是一个nodejs开源项目,GitHub链接为:https://github.com/typicode/json-server,在执行json-server安装前,请确保系统已安装nodejs 10.0以上版本,nodejs安装参照https://www.jianshu.com/p/f30b7b2afd66。
1、打开命令行终端,执行安装命令。
npm install -g json-server
2、创建程序目录json-server,进入目录初始化package.json文件。
mkdir -p json-server
cd json-server
npm init --yes
3、安装json-server及相关依赖到当前目录。
npm install json-server –save
4、编辑package.json文件,配置json-server快捷启动方式。
vim package.json
#按照一下内容修改
{
"name": "json-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"json:server": "json-server --watch db.json",
"json:server-remote": "json-server http://jsonplaceholder.typicode.com/db"
},
"keywords": [],
"author": "",
"license": "ISC"
}
5、启动json-server服务,通过浏览器访问。
npm run json:server
若打印出如下表
则表示启动成功直接访问地址:http://localhost:3000/posts可得到如下结果
二、json-server使用
json-server启动后,在程序根目录json-server会自动生成db.json文件,通过修改该文件可配置测试的接口类型。在终端上, ctrl+c终止处理操作,输入指令npm run json:server-remote可自动下载官网的接口实例。
接口请求参数如下:
1、分页【关键字:_page】
应用:http://localhost:3000/posts?_page=1
2、排序【关键字:_sort,_order】
_sort后面为要分类的键名,_order为排序的方式,DESC(倒序),ASC(顺序)。
应用:http://localhost:3000/posts?_sort=author
应用:http://localhost:3000/posts?_sort=author&_order=DESC
3、切分【关键字:_start,_end,_limit】
类似于js里面的slice函数。slice(_start,_end),从数据里面取出数据。数据不包括_end,_limit可以和_start配合,表示从_start位置开始_limit条数据被取出来。
应用:http://localhost:3000/posts?_start=1&_limit=3
4、操作【关键字:_gte,_lte,_ne,[key]_like】
_gte:大于或等于,_lte:小于或等于,_ne:不等于,[key]_like:模糊搜索
应用:http://localhost:3000/posts?author_like=author
5、全局搜索【关键字:q】
q为数据中全局搜索传入的参数
应用:http://localhost:3000/posts?q=json
6、字段扩展【关键字:_embed,_expand】
_embed:扩展子数据字段,_expand:扩展父数据字段