mock数据

json-server

安装

shell

npm i -g json-server

使用

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

json

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

启动

shell

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

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

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

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

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 数据来进行测试

module.exports = () => {
    const data = { post: [] }
    for (let i = 0; i < 20; i++) {
        data.post.push({
            id: i,
            content: `post content ${i}`,
        })
    }

    return data
}

shell

json-server mock.js

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

mockjs

初始化 node 项目

shell

npm init -y

安装依赖

shell

npm i -D mockjs

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

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
}

启动

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

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

json

[
  {
    "id": 0,
    "content": "问形院",
  },
  {
    "id": 1,
    "content": "同离去",
  },
  {
    "id": 2,
    "content": "队农而",
  },
  {
    "id": 3,
    "content": "分列流",
  },
  {
    "id": 4,
    "content": "即飞月",
  },
]

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

json-server

安装

使用

启动

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

mockjs

评论区