Vue使用MockJS,从此不再等后端
mockjs可以极大的提高前端的开发效率;在前端对接后端接口时,不需要苦苦等待后端的接口,只需要约定好接口的数据格式和api地址即可。
安装Mock
通过NPM或者Yarn安装
npm install mockjs 或者 yarn add mockjs
引入Mock
在src目录下新建一个文件夹mock(名字可以自己定),在其中新建一个index.js
内容为:
// 在这里可以做一些通用的配置
import Mock from 'mockjs'
// 设置所有ajax请求的超时时间,模拟网络传输耗时
Mock.setup({
timeout: 300
})
let baseURL = 'https://yourserver'
Mock.mock(baseURL + '/tab_data', 'get', {
status: 'succeed',
result: {
'area_count|100000-800000': 1000,
'population_count|500000-1000000': 100000
}
})
最后在main.js中引入该文件即可
测试一下
在任意组件的mouned钩子里面 通过axios请求/tab_data路径,理论上会返回这些:
{
status: 'succeed',
result: {
'area_count|100000-800000': 1000,
'population_count|500000-1000000': 100000
}
}
官方例子
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。