json-server是一款 json 数据服务器,可以对json文件、js脚本生成的json数据、远程json数据进行RESTFUL风格的增删改查操作,可以通过参数、分页、排序、全文搜索、关联查询、范围查询等进行复杂查询,对开发者特别是前端开发者是一款非常好用的开发工具。
官网:
下面我们来介绍具体的用法,
首先确保你本地安装了node.js。
安装json-server npm install -g json-server
创建一个json文件 db.json {
"posts": [
{ "id": 1, "title": "测试标题1", "author": "张三" },
{ "id": 2, "title": "测试标题2", "author": "李四" }
],
"comments": [
{ "id": 1, "body": "这里是内容体1", "postId": 1 },
{ "id": 2, "body": "这里是内容体2", "postId": 2 }
],
"profile": { "name": "测试json" }
}
指定json文件运行服务,命令行运行以下命令 json-server --watch db.json
服务器就这么搭建好了,就是这么的快,可能还不要3分钟。
增删改查-请求示例请求方式遵循restful风格,
- GET-查询、
- POST-新增、
- PUT -修改、
- PATCH-修改属性、
- DELETE-删除
get请求-查询
可以看到资源路径都列在控制台里了,浏览网址 ,出现以下结果,posts路径就是json文件里的key
[
{
"id": 1,
"title": "测试标题1",
"author": "张三"
},
{
"id": 2,
"title": "测试标题2",
"author": "李四"
}
]
POST请求-新增
使用POST请求会添加一条新记录,如POST请求: ,返回新记录的id。
{
"id": 3
}
json文件也被更改
{
"posts": [
{
"id": 1,
"title": "测试标题1",
"author": "张三"
},
{
"id": 2,
"title": "测试标题2",
"author": "李四"
},
{
"id": 3
}
],
"comments": [
{
"id": 1,
"body": "这里是内容体1",
"postId": 1
},
{
"id": 2,
"body": "这里是内容体2",
"postId": 2
}
],
"profile": {
"name": "测试json"
}
}
PUT请求-修改
PUT请求会修改一条记录,如请求: ,我们在请求body里输入以下修改内容:
{
"title":"这是修改的内容",
"author":"王五"
}
json文件变成了
{
"posts": [
{
"id": 1,
"title": "测试标题1",
"author": "张三"
},
{
"id": 2,
"title": "测试标题2",
"author": "李四"
},
{
"title": "这是修改的内容",
"author": "王五",
"id": 3
}
],
"comments": [
{
"id": 1,
"body": "这里是内容体1",
"postId": 1
},
{
"id": 2,
"body": "这里是内容体2",
"postId": 2
}
],
"profile": {
"name": "测试json"
}
}
PATCH请求-修改单个属性
PATCH与PUT的区别在于,PUT的请求内容需要包含整个对象除id外的所有属性,PATCH的请求内容可以是单个属性。
比如我们PATCH请求: ,body为
{
"title":"这是修改的内容xxxx"
}
json文件里id为3的记录仅title属性发生改变,其他字段不变
{
"posts": [
{
"id": 1,
"title": "测试标题1",
"author": "张三"
},
{
"id": 2,
"title": "测试标题2",
"author": "李四"
},
{
"title": "这是修改的内容xxxx",
"author": "王五",
"id": 3
}
],
"comments": [
{
"id": 1,
"body": "这里是内容体1",
"postId": 1
},
{
"id": 2,
"body": "这里是内容体2",
"postId": 2
}
],
"profile": {
"name": "测试json"
}
}
DELETE请求-删除
DELETE请求会删除一条数据,如请求: 。
删除后的json文件内容发生改变,可以看到id为3的记录没了:
{
"posts": [
{
"id": 1,
"title": "测试标题1",
"author": "张三"
},
{
"id": 2,
"title": "测试标题2",
"author": "李四"
}
],
"comments": [
{
"id": 1,
"body": "这里是内容体1",
"postId": 1
},
{
"id": 2,
"body": "这里是内容体2",
"postId": 2
}
],
"profile": {
"name": "测试json"
}
}
过滤id
浏览 ,代表读取post里id为1的那条数据,注意不是代表第1条,而是id为1的那条。
{
"id": 1,
"title": "测试标题1",
"author": "张三"
}
过滤参数
浏览 张三
[
{
"id": 1,
"title": "测试标题1",
"author": "张三"
}
]
如果有多级也可以用 “.” +属性名查询如 author.name =张三。
排序
通过“_sort”指定排序属性和“_order”指定asc顺序还是desc倒序查询,如: 。
分页
通过 “_page”和“_limit” 进行分页查询,如查询第一页,每页20条查询写法:
截取部分
通过 “_start”、“_end”和“_limit” 参数查询,如从20条开始查询10条数据:
不等于查询
通过“属性名_ne”写法如:
[
{
"id": 2,
"title": "测试标题2",
"author": "李四"
}
]
大于等于/小于等于查询
通过“ 属性名_gte ”查询大于等于,通过“ 属性名_lte ”查询小于等于,写法如:
[]
like查询
通过“ 属性名_like ”的写法查询如 标题1
[
{
"id": 1,
"title": "测试标题1",
"author": "张三"
}
]
全文搜索
通过 q 查询参数如: 标题
[
{
"id": 1,
"title": "测试标题1",
"author": "张三"
},
{
"id": 2,
"title": "测试标题2",
"author": "李四"
}
]
关联查询
通过 _embed 参数请求如: ,代表posts关联comments。
[
{
"id": 1,
"title": "测试标题1",
"author": "张三",
"comments": [
{
"id": 1,
"body": "这里是内容体1",
"postId": 1
}
]
},
{
"id": 2,
"title": "测试标题2",
"author": "李四",
"comments": [
{
"id": 2,
"body": "这里是内容体2",
"postId": 2
}
]
}
]
指定端口
命令增加 –port 参数
json-server --watch db.json --port 3004
使用js脚本生成数据代替json
创建一个index.js文件用于生成数据
module.exports = () => {
const data = { users : [] }
// Create 1000 users
for (let i = 0; i < 1000; i++) {
data.users.push({ id: i, name: `user${i}` })
}
return data
}
运行服务指定js文件
json-server index.js
使用远程地址加载数据
json-server
json-server
作为静态文件服务器
创建一个 public 目录,创建一个内容为hello world的 index. html 文件。
mkdir public
echo 'hello world' > public/index.html
json-server db.json
访问 ,根路径会默认显示public目录下的内容,会显示index.html的内容。
'hello world'
也可以通过–static参数指定其他路径的目录
json-server db.json --static ./some-other-dir
自定义请求路由
创建一个 routes.json 文件用于定义请求路由,每个路径都由 / 开头。
{
"/api/*": "/$1",
"/:resource/:id/show": "/:resource/:id",
"/posts/:category": "/posts?category=:category",
"/articles\\?id=:id": "/posts/:id"
}
启动服务时指定请求路由定义文件
json-server db.json --routes routes.json
以下访问左边的路径分别对应右边的原始请求效果
- /api/posts ==》 /posts
- /api/posts/1 ==》 /posts/1
- /posts/1/show ==》 /posts/1
- /posts/javascript ==》 /posts?category=javascript
- /articles?id=1 ==》 /posts/1
更多功能可以通过json-server的官网查阅,希望本文对你有所帮助。