嗨客网搜索
Json-Server路由

Json-Server路由教程

Json-Server 提供了 GET、POST、PUT、PATCH 和 DELETE 等请求的 API。

Json-Server数据准备

首先,我们在 E:\workspace 目录,创建一个 db.json 文件,输入以下内容:

{ "JavaScript":[ { "id": 1, "category":"ES6", "author": { "name":"HaiCoder5", "isAdmin":1 }, "website": { "name":"嗨客网", "url":"http://www.haicoder.net" } }, { "id": 2, "category":"Vue", "author": { "name":"HaiCoder1", "isAdmin":1 } } ], "Server":[ { "id": 1, "category":"Docker", "author": { "name":"HaiCoder3", "isAdmin":1 }, "website": { "name":"嗨客网", "url":"http://www.haicoder.net" } }, { "id": 2, "category":"Golang", "author": { "name":"HaiCoder2", "isAdmin":1 }, "website": { "name":"嗨客网", "url":"http://www.haicoder.net" } }, { "id": 3, "category":"Python", "author": { "name":"HaiCoder2", "isAdmin":1 } } ] }

接着,我们在该目录的地址栏,输入 cmd,打开 cmd 窗口,如下图:

01 jsonserver data.png

输入 cmd 之后,直接回车,即可在此目录打开命令行,如下图所示:

02 jsonserver data.png

我们在命令行,输入以下命令,启动 json-server:

json-server --watch db.json

启动成功,如下图所示:

03 jsonserver data.png

Json-Server路由列表

普通查询

查看所有数据

GET localhost:3000/db

查看 JavaScript 所有数据

GET localhost:3000/JavaScript

查看 Server 所有数据

GET localhost:3000/Server

查看 JavaScript 下 id 为 1 的数据

GET localhost:3000/JavaScript/1

过滤查询

查询 Server 模块下,category 为 Docker 的数据

GET localhost:3000/Server?category=Docker

查询 Server 模块下,category 为 Golang 的数据

GET localhost:3000/Server?category=Golang

查询 JavaScript 模块下,id 为 1 并且 category 为 ES6 的数据

GET localhost:3000/JavaScript?id=1&category=ES6

查询 Server 模块下,author 的 name 属性为 HaiCoder3 的数据

GET localhost:3000/Server?author.name=HaiCoder3

条件查询

查询 Server 模块下,id 大于等于 3 的数据

GET localhost:3000/Server?id_gte=3

查询 Server 模块下,id 小于等于 2 的数据

GET localhost:3000/Server?id_lte=2

查询 JavaScript 模块下,category 不等于 Vue 的数据

GET localhost:3000/JavaScript?category_ne=Vue

查询 Server 模块下,category 包含 n 的数据

GET localhost:3000/Server?category_like=n

分页查询

分页查询 Server 模块,返回第一页数据,每页两条

GET localhost:3000/Server?_page=1&_limit=2

分页查询 Server 模块,返回第三页数据,每页一条

GET localhost:3000/Server?_page=2&_limit=3

排序查询

排序查询 JavaScript 模块,按 id 倒叙排序

GET localhost:3000/JavaScript?_sort=id&_order=desc

多个字段排序

GET localhost:3000/Server?_sort=author,category&_order=asc,desc

任意切片查询

任意切片查询 JavaScript 模块,返回第一条数据

GET localhost:3000/JavaScript?_start=0&_end=1

任意切片查询 Server 模块,从第三条开始返回,返回两条记录

GET localhost:3000/Server?_start=2&_limit=2

全文检索查询

全文检索 Server 模块,返回包含 HaiCoder3 的数据

GET localhost:3000/Server?q=HaiCoder3

全文检索 Server 模块,返回包含 Doc 的数据

GET localhost:3000/Server?q=Doc

子节点查询

查询 JavaScript 模块,返回数据增加 haicoder 子节点

GET localhost:3000/JavaScript?_embed=haicoder

查询 Server 模块下 id 为 1 的数据,返回数据增加 haicoder 子节点

GET localhost:3000/Server/1?_embed=haicoder

新增数据

Json-Server 新增数据使用 POST 的请求方式。

新增 JavaScript 模块下 id 为 3 的数据:

POST localhost:3000/JavaScript

使用 Json-Server 新增数据需要在 Headers 上设置 Content-Type:application/json 。并且在 Body 的数据格式选择 raw,并将需要新增的数据添加到 body 中,数据中必须含有 id 字段。

新增的数据,会被 Json-Server 自动保存到数据文件中。

删除数据

删除 JavaScript 模块下 id 为 1 的数据:

DELETE localhost:3000/JavaScript/1

删除的数据,会被 JsonServer 自动从数据文件中删除。

修改数据

修改 JavaScript 模块下 id 为 1 的数据:

PUT localhost:3000/JavaScript/1

使用 Json-Server 新增数据需要在 Headers 上设置 Content-Type:application/json 。并且在 Body 的数据格式选择 raw,并将需要新增的数据添加到 body 中,数据中必须含有 id 字段。

修改 JavaScript 模块下 id 为 1 的数据:

PATCH localhost:3000/JavaScript/1

拓展知识

HTTP方法 是否幂等 说明 详细描述
POST 创建资源 Create POST api/users,会在users下面创建一个user;多次执行,会导致多条相同用户被创建。
PUT 替换资源 Replace PUT /items/1,若存在 /items/1 就替换,不存在就新增。注意PUT方法会更新整个资源对象,若前端没有提供完整的资源对象,缺失的字段将会被清空。
PATCH 局部更新 新引入方法。对PUT方法的补充,只更新前端提供的字段。若前端没有提供完整的资源对象,缺失的字段将不会被更新。

幂等(idempotent):是一个数学和计算机学概念,在计算机范畴内表示一个操作执行任意次对系统的影响跟一次是相同。比如GET/DELETE很好理解,不管操作多少次,得到的结果都是一样的,所以它俩是幂等的。

Json-Server路由总结

Json-Server 提供了 GET、POST、PUT、PATCH 和 DELETE 等请求的 API。在 JsonServer 中新增数据和修改数据,需要将 Header 的 Content-Type 设置为 application/json

在 JsonServer 中新增数据,修改数据和删除数据,这些操作都会被 JsonServer 自动保存到数据文件中。

嗨客网顶部