Mock 数据

Mock 在 vue 中的使用

1. 使用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',//地址