json-server模拟接口获取mock数据

在项目开发中，经常会遇到前后端数据交互而引起的开发流程停滞，前端完成静态页面的开发后，却迟迟未得到后端的接口。测试人员想要提前介入测试就可以通过根据后端接口字段，建立一个Restful风格的API接口，从而实现mock数据与前端的交互。

而json-server是一款很小巧却又强大的Mock工具， 支持CORS和JSONP跨域请求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查询方法，如limit，order等。下面详细介绍json-server 的使用。
1、json-server的安装
首先需要安装nodejs，建议使用最新版本。
使用命令全局安装json-server：npm install -g json-server
检查是否安装成功： json-server -v

image.png

2、创建json数据文件
该json文件中，包含2个对象：claim、claimItems。每个对象中分别由不同的属性构成。

{
  "claim": [
    {
      "id": 12345,
      "companyCode": "JX0001",
      "account": "vip",
      "operableCompanyCode": "AH0116"
    }
  ],
  "claimItems": [
    {
      "id": "1011740069",
      "itemName": "进气格栅",
      "operationType": "01",
      "standardPartId": "190",
      "partFeeDiscount": "114.92"
    },
    {
      "id": "10117400691",
      "itemName": "进气格栅1",
      "operationType": "01",
      "standardPartId": "1901",
      "partFeeDiscount": "114.92"
    }
  ]
}

3、启动json-server服务
使用命令：json-server --watch d:\data.json

image.png
服务启动成功后，访问主页：http://localhost:3000
image.png
json-server默认启动端口3000，如果需要更改端口号，操作命令为：json-server --watch data.json --port 3033
当前服务接口的资源链接：
http://localhost:3000/claim
http://localhost:3000/claimItems

4、使用Postman对json-server构建的接口进行测试
以http://localhost:3000/claimItems为例
1）查询数据，请求方式（get）

image.png

2）新增数据，请求方式（post）

image.png

查看服务接口中已添加数据成功添加到data.json数据文件中存储，如下：

image.png

3）修改数据，请求方式（patch或put）
这里需要传参

image.png
image.png

查看服务接口中已成功修改数据并添加到data.json数据文件中存储，如下：

image.png

4）删除数据，请求方式（delete）
DELETE 请求是在需要删除数据的时候调用的，所以服务器上需要传入的 Id 为删除的对象

image.png

查看服务接口中已成功删除指定数据并更新到data.json数据文件中，如下：

增多

以上所有的请求均会在启动JSON Server时的命令窗口界面中自动记录：

image.png

END

---

如果你喜欢我的分享，那就在右下角点个喜欢吧
你的鼓励是我最大的动力来源，在此深表感恩
软件测试的路上，我们可以互相关注，相互学习，共同进步，微信ID:929194573

---