Mock

当前端工程师需要独立于后端并行开发时，后端接口还没有完成那么前端怎么获取数据？
这时可以考虑前端搭建web server自己模拟假数据，这里我们选第三方库mockjs用来生成随机数据拦截Ajax请求。

官方文档

基本使用

安装mockjs：cnpm install mockjs --save-dev
创建mock文件夹以及mock配置的js文件

方式一：直接创建随机数据

const Mock = require('mockjs')
//随机生成id
let id = Mock.mock('@id')
console.log(id)
//随机生成对象
let obj = Mock.mock({
    id: '@id()',//随机id
    username: '@cname()',//随机生成中文名字
    date: '@date()',//随机生成日期
    avatar: "@image('200x200','red','#fff','avatar')",//生成图片，参数：size,background,foreground,text
    description: '@paragraph()', //描述
    ip: '@ip()', //ip地址
    email: '@email()' //随机生成邮箱
})
console.log(obj)

方式二：读取json文件

const fs = require('fs')
const path = require('path')
const JSON5 = require('json5')
const Mock = require('mockjs')

//读取JSON文件
function getJsonFile(filePath) {
    var json = fs.readFileSync(path.join(__dirname, filePath), 'utf-8');
    return JSON5.parse(json);
}

//返回一个函数
module.exports = function (devServer) {
    //监听http请求
    devServer.app.get('/user/userinfo', function (rep, res) {
        //每次相应请求时获取mock data的json文件
        var json = getJsonFile('./userInfo.json5');
        //将json传入mock方法，生成的数据返回给浏览器
        res.json(Mock.mock(json))
    })
}

配置vue.config.js

devServer: {
    // before: require('./mock'),在vuecli3中使用
    //setupMiddlewares: require('./mock'),在vuecli5中使用
    onBeforeSetupMiddleware: require('./mock/index')//引入mock/index.js 
}

当后端开发完成时，移除mock