Mock 数据
Mock 在 vue 中的使用
- 使用npm下载mock
npm install mockjs
2.使用 mock
在 mock 文件夹下建 index.js 文件
配置 index.js 文件
import Mock from 'mockjs' // 引入mock.
import { mapvData } from './mapData' // 引入mock数据的文件--mapData
// 配置Ajax请求延时，可用来测试网络延迟大时项目中一些效果
Mock.setup({
timeout: 0
})
// 调用模拟数据方法
<!--Mock.mock(url, get/post, data)
参数1: 请求mock数据url地址,
参数2:get/post的请求方式,
参数3:mapvData数据集合
-->
Mock.mock(/\/map-data/, 'post', mapvData)
export default Mock
配置 mapData 数据文件
import Mock from 'mockjs'
const arr = Mock.mock({
"array|1-10": [
{
'name': 'zhang',
'age': 2 | +1
}
]
})
const custInfor = arr.array // json格式
export const mapvData = req => {
req = JSON.parse(req.body)
return custInfor
}
// 或直接写固定数据
import Mock from 'mockjs'
const custInfor = [
name: 'zhang',
age: 12
]
export const mapvData = req => {
req = JSON.parse(req.body)
return custInfor
}
mock随机数据,详情请看 mock.js官网
3.在 main.js 里引入mock
require('./mock') // 正式发版时注掉即可
注: 1.调用接口时,一定要注掉mock数据,不然会报错
2.带参时mock',可用正常匹配, 如:
Mock.mock(/\/map-data(|\?\S*)$/, 'get', mapvData);
mock随机数据
// 'id|+1': 1,
// 'name' :'@name',//英文名
// 'canme': '@cname()',//中文名
// 'email': '@email',//邮箱
// 'phone': /^1[385][1-9]\d{8}/,//手机号
// 'color': '@color',//颜色
// 'title': '@title',//英文标题
// 'url': '@url("http")',//链接
// 'image': Random.image('200x200', '#50B347', '#FFF', 'Mock.js'),//图片
// 'date': '@date("yyyy-MM-dd HH:mm:ss")',
// 'date2': '@dateTime',//时间
// 'cadd': '@province' + '@city' + '@county',//地址
