官网文档请参考这里

项目源码请参考这里

Mock简介

• 当前端工程师需要独立于后端并行开发时，后端接口还没有完成，那么前端如何获取数据呢
• 此时就可以考虑前端搭建web server自己模拟假数据，此处我们是使用第三方库mockjs用来随机生成数据，拦截ajax请求
• 测试桩，模拟被测对象的返回，用于测试
• 通常意义的mock指的是mock server,模拟服务端返回的接口数据，用于前端开发、第三方接口联调等
• mockjs原理图：

mock特点

• 前后端分离
• 增加单元测试的真实性
• 开发无侵入：不需要修改既有代码，就可以拦截AJAX请求，返回模拟的响应数据
• 用法简单
• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
• 方便扩展：支持扩展更多的数据类型，支持自定义函数和正则

创建一个mockjs文件，可以打印测试文件的输出

• 创建testMock.js文件，并执行输出：node testMock.js

const Mock = require('mockjs');

var data = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|1-10': [{
    'id|+1': 1, // id自增1
  }]
});
// 输出结果
// console.log(JSON.stringify(data, null, 4));

// 创建一个单独的对象
const obj = Mock.mock({
  id: '@id', // 随机数字id
  username: '@cname', // 随机生成中文名字
  date: '@date()', // 随机生成日期
  avator: '@image(\'200x200\',\'red\',\'#fff\',\'avator\')',
  description: '@description()',
  ip: '@ip()',
  email: '@email()',
});
// console.log(obj);

// 创建一个数组对象
const jsonObj = Mock.mock({
  'array|20': [
    {
      'id|+1': 1, // id自增
      username: '@cname', // 随机生成中文名字
      date: '@date()', // 随机生成日期
    }
  ]
});
console.log(jsonObj);

vue项目里面使用mockjs文件

1. 搭建vue脚手架

参考这里

2. 安装项目项目所需要的相关依赖

npm install axios --save

使用mockjs产生随机数据
npm install mockjs --save-dev

使用json5解决json文件,无法添加注释问题
npm install json5 --save-dev

3. 在项目根目录下创建.env.development文件

MOCK=true

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

    //监听http请求
    app.get('/user/userinfo2', function (rep, res) {
      var json = getJsonFile('./data/objJson.json5');
      //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
      res.json(Mock.mock(json));
    });
  }
};

5. 创建json5数据源文件

userInfo.json5文件
{
  id: '@id',
  // 随机数字id
  username: '@cname',
  // 随机生成中文名字
  date: '@date()',
  // 随机生成日期
  avator: '@image(\'200x200\',\'red\',\'#fff\',\'avator\')',
  description: '@description()',
  ip: '@ip()',
  email: '@email()'
}


objJSON.json5文件
{
  'array|4': [
    {
      'id|+1': 1, // id自增
      username: '@cname', // 随机生成中文名字
      date: '@date()', // 随机生成日期
    }
  ]
}

6. 新建vue.config.js配置文件

module.exports = {
  devServer: {
    // 提供在服务器内部先于所有其他中间件执行自定义中间件的功能
    before: require('./mock/index.js')//引入mock/index.js
  }
};

7. 发送AJAX请求

<template>
  <div class="hello">
    <h1>哈哈哈</h1>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: 'HelloWorld',
    mounted() {
      axios.get('/user/userinfo2').then(res => {
        console.table(res.data);
      }).catch(err => {
        console.error(err);
      });
    }
  };
</script>
<style scoped>
</style>