使用 json-server mock模拟数据接口说明

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前文我们学习了 在实际项目开发中, 前后端分离的开发模式下前端使用 json-server mock模拟数据接口, 这时候 后端接口还没有开发出来, 前端又需要数据进行开发. 这种情况下就需要前端先行 mock 数据, 等后端接口写好进行 targetUrl 进行替换: 开发 baseUrl & 测试接口各进行对应接口切换.

用 json-server mock 数据

只需一个 .json文件, 一条命令即可启动一个本地服务, 可以向这个服务发起请求, 并返回 .json的文件内容. 快来试一试吧:

json-server 接口说明

json-server 具体请求类型, 及各自具体详情请查看 github.com/typicode/js…

接口说明

• GET 请求数据列表

      + localhost:3000/users

• GET 请求指定 ID 的数据:

      + localhost:3000/users/1

• GET 请求指定字段值的数据

      + localhost:3000/users?name=李四哇&name=张三吖

• GET 数据分页

      + localhost:3000/users?_page=1&_limit=2

• GET 数据排序

      + localhost:3000/users?_sort=age&_order=asc

      + asc 升序 desc 降序

• GET 区间查询

      + localhost:3000/users?age_gte=30&age_lte=40

• GET 搜索

      + localhost:3000/users?q=张三吖

• GET 关联查询

• localhost:3000/companies/1/users

• POST 添加数据

      + localhost:3000/users

      + Headers:{ Content-Type:'application/json' }

      + body -> raw

    {
       "name": "赵六",
       "age": 50,
       "companyId": 3
    }
  

• delete 删除数据

      + localhost:3000/users/1

• patch 更新数据

      + localhost:3000/users/3

      + Headers:{ Content-Type:'application/json' }

      + body -> raw

      {
       "age": 100
      }