-
介绍
Mock.js
生成随机数据，拦截 Ajax 请求
前端使用mockjs后，对后端接口进行请求时，mockjs会拦截Ajax请求，并返回随机数据，模拟后端的响应。这样，无需等到后端接口开发完毕，前端就可以对获取数据部分进行开发、测试，做到前后端分离。当后端开发完毕后，只要关闭mock即可，无需修改代码逻辑，提高了开发效率。
前提（正确的做法）是，已经和后端确定好接口格式，各自按照文档进行开发。当然，也有不太理想的情况→后端有自己的想法。。。那就不太适合使用mock数据了。
-
使用方法
- 安装mock
npm install mockjs
-
在src下新建mock文件夹，新建index.js文件
index.js
在index.js中导入所有mock服务，并进行通用配置
import Mock from 'mockjs'
import './queryBusList'
Mock.setup({
timeout: '200-600'
});
- 注册mock服务
在mock文件夹下为每个接口建立一个js文件，注册mock数据
//queryBusList.js
import Mock from 'mockjs'
let path = 'xxxx/xxx/xx';
//Mock.mock(rurl, rtype, template)
Mock.mock(new RegExp( '^' + path), 'post', { //需要正则，否则无法拦截
header: {
status: 200,
message: 'success',
errcode: '0',
},
body: {
'busLinesList|1-10':[ //随机生成1-10项长度的列表
{stops:
[{
BusStopName: '@cword(2,5)', //随机生成2-5个中文字符的词
BusStopTime: '@time("HH:mm")', //随机生成时间
},{
BusStopName: '@cword(2,5)',
BusStopTime: '7:30',
}]
}
]
}
})
- 在main.js中导入
//main.js
import './mock/index.js' //使用mockjs模拟数据`
