VUE CLI项目中使用MOCK实例

mock的使用场景是什么?

当前端工程师需要独立于后端并行开发时，前后端会约定一份接口文档，但前后端开发进度并不一致，当后端没有完善接口功能时，前端需要在本地模拟数据返回

这时可以考虑前端搭建web server自己模拟数据,这里我们选第三方库mockjs用来生成随机数据,拦截请求.

mock.js官网示例:http://mockjs.com/examples.html

mockjs使用搭建:

一:安装依赖

# yarn安装

yarn add mockjs --save-dev

# npm安装

npm install mockjs --save-dev

二:在vue项目中配置创建mock文件夹用于存放相关配置

1.在mock文件夹中添加一个index.js,这里就是我们注册所有mock服务的地方

/***index.js***/

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

// 设置拦截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);
  }
});

三:在vue项目中的配置

1.在vue.config.js中devServer的before属性中进行请求拦截配置

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

四:在main.js中引入

// main.js
require('./mock');

五:根据项目的业务逻辑在mock文件夹中添加请求所返回数据相对应的js文件

// user.js
let userList = {
	total: 100,
	'rows|10': [{
	    id: '@guid',
	    name: '@cname',
	    'age|20-30': 23,
	    'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
	]}
}

export default {
    'get|/parameter/query':  option => {
	// option 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
	return {
	    status: 200,
	    message: 'success',
	    data: userList
	};
  }
}

这样我们就可以每次随机生成10条数据，总数为100条，其中id和name使用的占位符，age是随机取出20-30中的数字，job是随机取出其后数组中的某一项，这在mock文档里都有说明。

当我们在页面发起了ajax请求，路径是'/parameter/query'，并且请求方式是get时，就会返回我们写好的mock数据。