后端GG？来mockjs模拟一波数据说件喜闻乐见的事情就是，我们公司的服务器被攻击了。

说件喜闻乐见的事情就是，我们公司的服务器被攻击了。

于是在后端忙碌时间,作为前端er只能被（ri）迫（change）摸鱼，

搞一波怎么使用

mock接口入口

cnpm install mockjs

更目录下新建mock/index

// 首先引入Mock
import Mock from 'mockjs'
var Random = Mock.Random

console.log('MockMock', Mock);


// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
});

在mian.js在引用

// mian.js
import '@/Mock'

新建mock请求模块

比如有两个不同模块的接口,那就

编辑mock接口

//requesA.js
 let demoList = {
    status: 200,
    message: 'success',
    data: {
        total: 100,
        'rows|10': [{
            id: '@guid',
            name: '@cname',
            'age|20-30': 23,
            'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
        }]
    }
};

export default {
    'get|/parameter/query': demoList,
}

//requesB.js
import Mock from 'mockjs'
var Random = Mock.Random

const demoList = {
    status: 200,
    message: 'success',
    data: {
        total: 100,
        'rows|3': [{
            id: '@guid',
            name: '@cname',
            color: Random.hsl()
        }]
    }
}

const demoList2 = {
    status: 200,
    message: 'success',
    data: {
        total: 100,
        'rows|5': [{
            id: '@guid',
            name: '@cname',
            img: Random.image()
        }]
    }
}

export default {
    'post|/parameterPost/a': demoList,
    'post|/parameterPost/b': demoList2
}

写好了mock数据，页面中请求走一波~

这里用axios请求,

created () {
    axios.get('/parameter/query').then(res => {
      console.log(res);
    })
    axios.post('/parameterPost/b').then(res => {
      console.log(res);
    })

    axios.post('/parameterPost/b').then(res => {
      console.log(res);
    })

最后

这里就完了，最后mockjs语法可以看一波[文档](https://github.com/nuysoft/Mock/wiki),有用的话记star一波~