json-server 模拟接口请求 搭配 mock.js 接口的增删改查

使用JSON Server进行模拟后端接口

第三方服务接口:leanCloud

首先在桌面打开终端
npm install -g json-server(不能再项目中安装)
然后新建一个文件夹(不能是json-server),比如:backServer
进入backServer文件夹打开终端
npm init --yes
npm i json-server --save
然后修改package.json的内容
在script中加入
"json:server":"json-server --watch data.json"
然后新建一个data.json
输入
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
然后终端运行
npm run json:server(上面script中的指令)
端口运行在3000

json-server 默认是 3000 端口，我们也可以自己指定端口，指令如下：

json-server --watch data.json --port 3004

也可以新建一个package.json，把配置信息写在里头：

{
    "scripts": {
        "mock": "json-server data.json --port 3004"
    }
}

之后启动服务，只需要执行如下指令就可以了：

npm run mock

• 过滤获取 Filter：

http://localhost:3004/fruits/1
可以得到指定id为1的水果（对象）：
{
 "id": 1,
 "name": "apple",
 "price": "33"
}

接入mock.js生成批量随机数据

• 在文件下安装mock.js

npm install mockjs --save

• mockjs官网：http://mockjs.com/
• 生成一个data.js的文件并写入:

let Mock  = require('mockjs');
let Random = Mock.Random;
module.exports = function() {
  let data = { list: [] }
  // Create 1000 datas
  for (let i = 0; i < 1000; i++) {
    data.list.push({ id: i, name: Random.cname(),link:Random.url() })
  }
  return data
}

然后使用命令运行data.js就可以看到数据

json-server data.js

配置自定义路由

• 直接在命令行配置，例如

json-server db.js -d 500 -q -r ./routes.json

• 也可以创建json-server.json文件进行配置

{
   "watch": true,
   "delay": 500,
   "quiet": true,
   "routes": "./routes.json"
}

• 然后直接运行

json-server data.js

自定义路由

• 自定义路由通俗的讲就是给api请求地址起了个别名，而且和后台商量好后就避免后期了修改接口地址的麻烦。
• 在mock目录下创建router.json文件，注意每个路由文件应该以/开头。

{
 "/api": "/list",
 "/api/list/:id": "/list/:id",
 "/api/users?name=:name":"/users?name=:name"
}

• 在这个json文件里key就是真实部署时要访问的api路径，对应的value就是我们开发时虚拟的api路径。
  现在访问 /api/list/1和访问/list/1 都返回/list/1的内容

高级查找

Filter(过滤)

• 使用.操作 对象属性值，比如访问更深层次的属性

GET /list?name="xxx"
GET /list?id=1

Paginate(分页)

• 使用 _page 和可选的 _limit来对返回数据定制（不设置默认返回10条）。
  在返回的Response Headers 中，有一个属性Link，里面会有first, prev, next and last links。 而且还有X-Total-Count

GET /list?_page=1&_limit=10
GET /list?_page=1&_limit=2

Sort(排序)

• 使用 _sort 和 _order （默认是ascending)
• _sort表示按照什么来排序
• _order=asc表示升序排序, _order=desc表示降序排序

GET /list?_sort=id&_order=asc

Slice(分隔)

• 使用 _start 和 _end 或者 _limit

GET /list?_start=2&_end=5
GET /list?_start=10&_limit=5

Operators(运算)

• 使用 _gte 或 _lte 选取一个范围

# 选取id在2-5之间的数据
GET /list?id_gte=2&id_lte=5

• 使用 _ne 排除一个值

GET /list?name_ne=游魂

• 使用 _like 进行模糊查找 (支持正则表达式)

GET /list?name_like=游魂

Full-text search(全文检索)

• 使用 q，在对象全部value中遍历查找包含指定值的数据

GET /list?name=张

Relationships(关系图谱)

• 获取包含下级资源的数据, 使用 _embed

GET /parents?_embed=children

• 获取包含上级资源的数据, 使用 _expand

GET /children?_expand=parents

如何在指定IP上启动json-server

json-server --host 192.168.1.XXX my_file.json 

增加对应的数据

• POST方法 传一个请求体

POST /list
body: {
  name:'朱晓乐',
  age: 18
}

修改对应的数据

• PUT方法 路径注意 是 localhost:3000/list/3 这里指定id为3的数据

PUT /list/id
body: {
  name:'朱晓乐',
  age:23
}

• tips: 注意事项
  • PUT传的值会直接覆盖之前原有的值,不会单独修改一个属性

删除对应的数据

• DELETE方法 路径注意 是 /list/id 这里的id指的是在服务中的id

DELETE /list/id