1 安装使用

安装：

  1. npm i json-server -g

准备 db.json ：

  1. {
  2.   "plans": [
  3.     { "id": 1, "title": "go to bed", "author": "xinbao" }
  4.   ],
  5.   "comments": [
  6.     { "id": 1, "body": "some comment", "postId": 1 }
  7.   ],
  8.   "profile": { "name": "xinbao" }
  9. }

启动（自带解决跨域CORS，也支持jsonp）：

  1. json-server --watch db.json --port 5001

剩下的就简单了，默认的restful 最佳实践的约定：

作用 method url param data
获取计划列表 get /plans ?pageSize=1&pageNu10
获取计划 get /plans/{id} 无
新增计划 post /plans {}
修改计划 put /plans/{id} {}
删除计划 delete /plans/{id}

额外补充参数：

  • 筛选：
    • ?title=xxx&author=xxx 字段筛选
    • ?id=1&id=2 读取多个结果
    • ?authhor.name=xxx 带嵌套
  • 分页：
    • ?_page=7&_limit=10 分页
    • ?_sort=key&_order=asc 排序
  • 搜索：
    • ?q=xx 模糊搜索
  • 联合类型，多表查询
    • /posts?_embed=comments 包含内部资源
    • /comments/1?_expand=post 包含父级资源
  • 其他的选择符号 [key]_lte 大于等于

也支持载入远程 json，数据可复用：

  1. json-server http://example.com/file.json
  2. json-server http://jsonplaceholder.typicode.com/db

3 如何mock

如何mock,把json改成js，这样就可使用 faker 了

  1. // index.js
  2. module.exports = () => {
  3.   const data = { users: [] }
  4.   // Create 1000 users
  5.   for (let i = 0; i < 1000; i++) {
  6.     data.users.push({ id: i, name: `user${i}` })
  7.   }
  8.   return data
  9. }

4 设定 base

新建 routes.json ，给连接增加 baseURL

  1. {
  2.   "/api/*": "/$1",
  3.   "/:resource/:id/show": "/:resource/:id",
  4.   "/posts/:category": "/posts?category=:category",
  5.   "/articles\\?id=:id": "/posts/:id"
  6. }

启动

  1. json-server db.json --routes routes.json

5 技术实现

实时修改db，用的是 lowdb

https://github.com/typicode/json-server