vue+mock使用

1.引入mock.js依赖包

npm install mockjs --save-dev

2.src下新建如下文件夹

(1).mock.js

// 首先引入Mock
const Mock = require('mockjs');

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

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './mock.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);
  }
});

(2).article.js

let articleList = {
    // code: 200,
    // msg: 'success',
    data: {
        total: 1000,
        'rows|5': [{
            id: '@guid',
            title: '@ctitle',
            name: '@cname',
            category: {
                'name|1': ['动作片', '古典片', '美国片', '国影', '印度片']
            },
            date: '@date(yyyy-MM-dd)'
        }]
    }
};

let publishList = {
    // code: 200,
    // msg: 'success',
    data: {
        'options|5': [{
            id: '@guid',
            'label|+1': ['动作片', '古典片', '美国片', '国影', '印度片']

        }]
    }
};
let admins = {
    // code: 200,
    // msg: 'success',
    data: {
        'options|5': [{
            id: '@guid',
            username: '@name',
            nickname: '@cname',
            email: '@email',
            'value1|1': [true, false],
            'value2|1': [true, false],
            'key|+1':['s1','s2','s3','s4','s5'],
            'roles|3': [
                {
                    'id|+1': ['1','2','3'],

                    'rname|+1':['超级管理员','数据库管理员','普通管理员']
                }
            ]
        }]
    }
};
let userData = {
    // code: 200,
    // msg: 'success',
    data: {
        total: 1000,
        'rows|6': [{
            id: '@guid',
            username: '@name',
            nickname: '@cname',
            'gender|1': ['true', 'false'],
            date: '@date(yyyy-MM-dd HH:mm:ss)',
            email: '@email',
            location: '@city',
            text: '@csentence(5,10)',
            finalTime: '@date(yyyy-MM-dd HH:mm:ss)'

        }]
    }
};
export default {
    'get|/article_list/query': articleList,
    'get|/publish_list/query': publishList,
    'get|/user_list/query': userData,
    'get|/admin_list/query': admins
}

3.main.js

添加require('./mock/mock')
然后测试使用即可