Mock

一、mock的使用场景

前端工程师独立于后端开发时，## 选用第三方库mock.js来生成随机数据，拦截ajax请求。
mock原理图：

二、mock的特点

三、在vue中使用mock.js

步骤一：创建项目

vue create mock-demo

步骤二：安装依赖
首先cd到mock-demo文件夹：

命令：

# 使用axios发送ajax
cnpm install axios --save
# 使用mockjs产生随机数据
cnpm install mockjs --save-dev
# 使用json5解决json文件,无法添加注释问题
cnpm install json5 --save-dev

安装依赖：

四、mock的使用

步骤一： 新建mock文件夹,新建文件testMockjs.js

步骤二：mock语法定义举例

const Mock = require('mockjs');//mockjs 导入依赖模块
var id = Mock.mock('@id')//得到随机的id,字符串
console.log(Mock.mock('@id'), typeof id)

var 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()"//email
})
console.log(obj)

五、json5的安装与配置

json文件,中如果说存在注释文件和编辑器都会报错,采用json5格式来让json格式可以存在注释：
报错：

步骤一：在mock中新建userInfo.json5文件
步骤二：安装json5依赖

步骤三：创建testtJSON5.js文件用来读取json5文件

const fs = require('fs');
const path = require('path');
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
    //读取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}
var json = getJsonFile('./userInfo.json5');
console.log('json', json)

可以得到json5的内容：

六、mock与vue-cli结合

步骤一：在mock文件夹下,新建index.js

const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 导入依赖模块
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
    //读取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}

//返回一个函数
module.exports = function(app){
    //监听http请求
    app.get('/user/userinfo', function (rep, res) {
        //每次响应请求时读取mock data的json文件
        //getJsonFile方法定义了如何读取json文件并解析成数据对象
        var json = getJsonFile('./userInfo.json5');
        //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
        res.json(Mock.mock(json));
    });
}

步骤二：在根目录下建立文件vue.config.js

module.exports = {
    devServer: {
        before: require('./mock/index.js')//引入mock/index.js
    }
}

测试：
在HelloWorld.vue中添加网络请求：

import axios from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    axios.get('/user/userinfo')
    .then(res => {
      console.log(res)
    })
    .catch(err => {
      console.error(err); 
    })
  }
}

浏览器打印：

七：mock移除

步骤一：在项目根路径新建文件 .env.development

MOCK=true

步骤二：完善mock\index.js

module.exports = function(app){
    if(process.env.MOCK == 'true'){
        //监听http请求
        app.get('/user/userinfo', function (rep, res) {
            //每次响应请求时读取mock data的json文件
            //getJsonFile方法定义了如何读取json文件并解析成数据对象
            var json = getJsonFile('./userInfo.json5');
            //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
            res.json(Mock.mock(json));
        });
    }
}

此时执行成功：

步骤三：若后端开发成功，则只需将.env.development的true改为false

此时不可访问：

总结