在前后端分离开发过程中,需要等到后端给出接口和接口文档后,才能继续开发,使用MockJS可以让前端独立于后端开发。
MockJS生成随机数据,拦截 Ajax 请求, 就可以非常方便的模拟后端接口。
1. 安装
基于Nodejs安装
npm install -g mockjs
OR
yarn global add mockjs
直接引用
<script src="mock.js" type="text/javascript"></script>
2. 使用 Mock 生成模拟数据
var Mock = require('mockjs')
var data = Mock.mock({
// list 的值是一个数组,其中含有 1到2 个元素
'list|1-2': [{
// id 是一个自增数,起始值为 1,每次增 1
'id|+1': 1
}]
})
// 输出结果
console.log(JSON.stringify(data))
// 结果
{
"list": [
{
"id": 1
},
{
"id": 2
}
]
}
3. 模拟成接口
Mock.mock('/get/list1', 'get', data)
4. 调用模拟接口
使用axios.js来调用接口
<!-- 引入 -->
<script src="axios.min.js" type="text/javascript"></script>
axios.get('/api/list1')
.then(function(response) {
console.log(response.data)
})
.catch(function(err) {
console.log(err)
}
5. Mockjs优点
- 前后端分离:让前端攻城师独立于后端进行开发。
- 增加单元测试的真实性:通过随机数据,模拟各种场景。
- 开发无侵入:不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
- 用法简单:符合直觉的接口。
- 数据类型丰富:支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
- 方便扩展:支持支持扩展更多数据类型,支持自定义函数和正则。