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')   // 正式發(fā)版時注掉即可

注: 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',//地址