简介:json-server 可以让前端开发者快速构建标准 RESTful API,从而实现模拟请求开发,在没有后台开发接口的情况下进行业务模拟。
使用背景
通常我们将Web应用的开发分为两个端:
- 客户端开发(负责用户交互与数据展示,俗称前端)
- 服务端开发(负责对数据的处理,俗称后台)
交互逻辑为:
客户端 服务端
-----发起请求---->
拦截请求,根据交互逻辑返回数据
<----返回数据-----
根据返回数据渲染页面
客户端开发者需要根据返回数据渲染页面,那就需要等待服务端开发者提供数据,那么在服务端开发者书写数据逻辑的过程中,客户端开发者不能做事情,开发效率就有了限制。
解决这个问题,就是让客户端开发者可以在服务端开发未完成的情况下能够获取到数据,一般来说会使用假数据,例如:
// 创建假数据文件 user.json
{
{ id: 1, name: "Libai", age: 23 },
{ id: 2, name: "Zhangfei", age: 26 },
{ id: 3, name: "Dufu", age: 25 },
}
在涉及到大量的数据时,人为编造数据就耗时耗力,为了提供优化,可以使用 mock.js 来模拟数据。
这种做法虽然让我们的页面有了数据填充,但是每次返回的数据都是随机的,数据不能持久化存储下来。
那么有没有一种方式可以让前端在没有后台接口支持的时候通过真实的请求体验获得数据,进行开发呢?
常见的解决手段就是前端学习某个后端语言,然后本地启动服务,类似于通过 node + express 等手段自己开服务。这种做法虽然可行,但是需要前端开发者花费时间学习和配置接口内容。
另一种手段就是使用 json-server,它可以帮助前端开发者快速构建 RESTful 类型的接口,轻松配置,极大的增强了前端开发者的开发体验。
Get a full fake REST API with zero coding in less than 30 seconds (seriously)
在不到30秒的时间里,以零编码的方式获得一个完整的假REST API(认真的)
安装
下载 node,打开 windows 命令行,输入:npm install -g json-server 命令安装 json-server 如果速度慢,可以使用淘宝镜像
快速使用
建立文件夹,创建一个 db.json 文件用以存储数据,例如:
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
在当前文件夹开启命令窗口,输入:json-server --watch db.json
该命令会默认帮我们创建一系列的接口API,接口介绍:
| URL | method | 说明 |
|---|---|---|
| /posts | GET | 获取post数组的列表项 |
| /posts/1 | GET | 获取post数组中id为1的内容 |
| /posts | POST | 向post数组中添加内容 |
| /posts/1 | PUT | 全部修改post数组中id为1的内容 |
| /posts/1 | PATCH | 部分修改post数组中id为1的内容 |
| /posts/1 | DELETE | 删除post数组中id为1的内容 |
JSON server的特性
标准的 RESTful API
支持过滤
支持分页
支持排序
支持全文检索
支持关系
支持数据分割
支持操作符(大于小于)
支持 JSONP
支持 CORS