在开发中我们常会用到一些模拟数据来确定程序是否有问题，这次我们一起来看一下怎么使用模拟数据来进行测试

json-server

安装

1
npm i -g json-server

使用

在本地创建一个db.json文件，填写需要模拟的数据

1
2
3
4
5
6
{
  "post": [
    { "id": 1, "title": "三体" },
    { "id": 2, "title": "流浪地球" }
  ]
}

启动

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

--watch 表示监听 db.json 数据的变化

--port 后可以根据实际情况来指定服务启动的端口

启动成功后，我们就可以使用 restful 风格的接口来进行增删改查的操作了

1
2
3
4
5
GET http://localhost:3004/post
GET http://localhost:3004/post/1
PUT http://localhost:3004/post/1
POST http://localhost:3004/post
DELETE http://localhost:3004/post/1

使用编程模式创建模拟数据

除了我们手动填写数据，还可以使用编程的方式来批量生成 mock 数据来进行测试

mock.js
1
2
3
4
5
6
7
8
9
10
11
module.exports = () => {
  const data = { post: [] }
  for (let i = 0; i < 20; i++) {
    data.post.push({
      id: i,
      content: `post content ${i}`,
    })
  }

  return data
}
1
json-server mock.js

上面的方法虽然可以模拟数据，但是少一些数据的随机性。我们可以使用 mockjs 来模拟生成其他类型的 mock 数据

mockjs

初始化 node 项目

1
npm init -y

安装依赖

1
npm i -D mockjs

编写 mock.js 文件用于 json-server 模拟数据

mock.js
1
2
3
4
5
6
7
8
9
10
11
12
const mockjs = require("mockjs")
const Random = mockjs.Random
module.exports = () => {
  const data = { post: [] }
  for (let i = 0; i < 5; i++) {
    data.post.push({
      id: i,
      content: Random.cword(3),
    })
  }
  return data
}

启动

1
json-server --watch --port 9999 mock.js

我们在浏览器使用http://localhost:9999/post就可以获取到刚才创建好的 mock 数据了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[
  {
    "id": 0,
    "content": "问形院"
  },
  {
    "id": 1,
    "content": "同离去"
  },
  {
    "id": 2,
    "content": "队农而"
  },
  {
    "id": 3,
    "content": "分列流"
  },
  {
    "id": 4,
    "content": "即飞月"
  }
]

具体 mockjs 的使用方式，可以查看文章下方的 mockjs 示例

参考资料
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章

快来参与讨论吧~