开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情
对于 Mock，官方的介绍是：“生成随机数据，拦截 Ajax 请求”。
在前端没有真实调用接口时，往往会选择使用 mock 数据来进行数据的渲染，操作简便，生成的数据同时可以增加单元测试的真实性。 详细可参考：MockJS 官方 。
接下来我们在 Vue 项目中配置 mock。
安装mockjs
npm install mockjs --save-dev
配置
-
首先在项目的根目录中建立一个 mock 文件夹
-
vue.config.js 中添加 mock 配置代码：
before: require('./mock/mock-server.js')
整体结构如下：
- 在 main.js 中导入 mock
import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'production') {
mockXHR()
}
- 在 mock 文件夹下建立一个 index.js 文件，并做如下定义：
- Mock.Random 用来生成随机数据
- Mock.mock() 根据数据模板生成模拟数据
- dataList 数组用来存放模拟的数据
import Mock from 'mockjs'
const Random = Mock.Random
const dataList = []
for (let i = 0; i < 10; i++) {
deptList.push({
'id|+1': i, // 从i开始，每次 +1 的一个数字
'name': '@cname', // 生成随机中文名字
'number|1-100': 100, // 生成1-100之间的随机数字
'remark': Random.cparagraph(), //生成随机生成中文
})
}
Mock.mock('/api/getData', 'get', dataList)
export default []
除了基本的使用之外，还有·很多进行数据模板定义、占位符定义的方式：
比如：
- Random.date() // 生成随机日期
- @url() // 生成随机 url
- @color // 生成随机颜色
- ...
- 请求 mock 数据 配置好之后就可以使用了:
axios.get('/api/getData').then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
遇到的坑
曾经遇到过一个与 Mock 相关的问题，在使用调用某个接口时本地环境正常，但生产环境下报错，报错信息如下：
如果遇到这种情况，上线之前记得删掉注释掉 main.js 中 Mock 相关的引用即可。
