Mock服务器搭建

Mock安装与测试

在后台API还未开发完成的情况下，我们可以利用mock来制造一些测试数据，来验证我们功能的正确性。

1. json-server安装

1
npm install -g json-server

运行后，如下图所示：

2. 创建mock文件夹

在mock下面新建_fixture和http文件夹。

  • _fixture: 存放数据用的json文件。

  • http: 存放.http接口测试文件。

如果需要测试rest风格的api接口，需要安装REST Client插件。

3. 运行Mock服务器

为了验证mock服务器是否搭建成功，需要编写接口进行测试。

3.1 新建json文件

在json文件夹下面新建hr-manager.json文件，文件内容如下：

用户属性：ID、姓名、年龄

1
2
3
4
5
6
7
8
9
{
  "users": [
    {
      "id": 1,
      "name": "张三",
      "age": 20
    }
  ]
}
3.2 新建http文件

在http文件夹下面新建hr-manager.http文件，进行接口测试。

3.3 启动mock服务器
1
json-server ./mock/_fixture/hr-manager.json

运行结果如下图所示：

运行成功的情况下，我们可以在浏览器地址栏输入: localhost:3000 查看运行结果。

当我们点击“users”后，可以查看users的数据结构。

4. 测试

4.1 GET请求

访问ID为1的用户数据。

上面的例子中有一个不好的地方是，如果我们继续写POST、PUT等请求的话，我们还需要将http://localhost:3000前缀带上，其实我们可以将他们抽取出来。

1
2
3
4
5
6
7
8
9
### API公共前缀
@baseUrl = http://localhost:3000

### 数据形式
@contentType = application/json

### 查询
# @name getUsersById
GET {{baseUrl}}/users/1

如果没有写条件如： GET {{baseUrl}}/users，则查询users下面全部数据。

在开始其他请求之前，我们选中一个API接口（如： GET {{baseUrl}}/users/1），鼠标右键，选择 Generate Code Snippet，可以生成其他语言对应的接口代码。

选择JavaScript:

可以看下面这样子的结果：

同样也可以选择Java、PHP来生成相应的代码片段。

4.2 POST请求

添加ID为2的数据

添加完数据之后，打开hr-manager.json文件，我们发现在users的结构下面，添加了一条ID为2的数据。

如果不改变ID的值，继续点击 “Send Request”，重复创建异常发生。

4.3 PUT请求

ID为1的记录中，name设置为“测试”, 这时我们会发现数据丢失了。

我们如果只想更新部分字段的话，需要利用PATCH

4.4 PATCH请求

ID为1的记录中，name设置为“测试”, 数据不发生丢失。

4.5 DELETE请求

删除ID为1的记录