json-server : 前端工程师的小伙伴！

引子

你是否曾为了前端开发需要依赖后端接口而烦恼？是否曾因接口未开发完成而垂头丧气？是否曾梦想能自己制作一个玩具服务器，随心所欲地调试接口？

“json-server”！json-server，简洁，快速，并带你领略REST风采。

安装 json-server

打开终端，使用 npm 来安装：

npm install -g json-server

创建你的小世界

花几秒钟创建一个db.json文件，预先定义你所有的假数据，比如:

{
  "unicorns": [
    { "id": 1, "name": "Rosa", "color": "Pink" },
    { "id": 2, "name": "Misty", "color": "Purple" }
  ]
}

启动你的火箭

进入终端，启动 json-server：

json-server --watch db.json

去享受你的api接口吧！

观看所有的：http://localhost:3000/unicorns

检查你最爱的 Rosa：http://localhost:3000/unicorns/1

路由规则

GET    /unicorns
GET    /unicorns/:id
POST   /unicorns
PUT    /unicorns/:id
PATCH  /unicorns/:id
DELETE /unicorns/:id

别看接口“小小个”，配合上增删查改，放任你大展拳脚。

参数的集合

简洁而实用，你的各种筛选，排序，限额需求，json-server一概包揽：

筛选

条件只要下面这些，瞬间体验扔掉数学的解脱感：

→ ==
_lt → <
_lte → <=
_gt → >
_gte → >=
_ne → !=

GET /unicorns?color=Pink

限额

无论是"从…到…“还是"前…个”，一切尽在 索取，例如取 id 为 1 到 2 的独角兽：

GET /unicorns?_start=1&_end=2

或者仅取前 2 个独角兽：

GET /unicorns?_start=1&_limit=2

排序

对比竞争者一眼看清状况，凭实力排序：

GET /unicorns?_sort=id,_desc

其他高级操作

嵌套字段和数组字段让你能轻松获取你需求的内容：

GET /unicorns?color=Pink&name=rosa

内嵌其他字段，将嵌套的数据一次性取来：

GET /unicorns?_embed=comments

删除需要删除的数据：

DELETE /unicorns/1

静态文件服务

除了 REST API，还可以提供静态文件。只需要创建一个 public 文件夹，JSON Server 将提供它的内容。

同样，你还可以使用 -s 或者 --static 选项来添加更多的自定义文件夹:

json-server -s ./static  db.json

小结

让 json-server 成为你的得力助手。