使用Mock.js生成假数据

发表于 | 分类于

为什么要 Mock 数据？

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。

开始 & 安装

  1. 安装 mockjs
1
npm install mockjs
  1. 使用 Mock
1
2
3
4
5
6
7
8
9
10
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4)) //使用四个空格缩进

使用 & 示例

定义一个数据模板，生成模拟数据

1
2
3
Mock.mock({
  "string|1-10": "★"
})

拦截一个 Ajax 请求，并返回 Mock 数据

1
2
3
4
5
6
7
8
9
10
11
12
13
Mock.mock('/api/banner', Mock.mock({
  code:200,
  'data|2': [{
    'id': '@id',
    'name|+1': ['PV', 'UV'],
    'title': '@title(5)',
    'pic': '@image("750x360", "#FF6600")',
    'dateAdd': '@date("yyyy-MM-dd HH:mm:ss")',
    'region': '@region',
    'value|0-1500': 100
  }],
  msg: 'success'
}))