使用Mock.js生成假数据

为什么要 Mock 数据?

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

开始 & 安装

1
npm install mockjs --save-dev
1
2
3
4
5
6
7
8
9
10
11
// 使用 Mock
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
// 引入Mock.js
import Mock from 'mockjs'

// 拦截请求,响应假数据
Mock.mock('/api/banner', Mock.mock({
code:0,
'data|5': [{ id : '@id', dateAdd: '@date("yyyy-MM-dd HH:mm:ss")',picUrl:'@image("750x360", "#FF6600")', title: '@title(5)'}],
msg: 'success'
}))

mockjs示例:http://mockjs.com/examples.html