Vue项目中使用mock - vue - 前端 - 技术设计

自从有了 mockjs，我们前端工程师再也不用等后端人员开发好之后再测数据了，因为 mockjs 可以拦截 ajax 请求，有了 mockjs 我们可以模拟后台返回数据，以方便的进行一系列的操作。接下来就介绍一下在项目中如何使用 mockjs。

首先安装 mockjs

npm install mockjs

我们可以使用数据模板生成模拟数据。

	Mock.mock( rurl?, rtype?, template ) )
	// 或者
	Mock.mock( rurl, rtype, function( options ) )

Mock.mock( rurl, rtype, template )
表示当拦截到 rurl 和 rtype 的 ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function (options) 将被执行，并把执行结果作为响应数据返回。

其中：

参数介绍完，就该说说怎么使用了

在我们的项目中，是直接注册所有的 mock 服务，所以我们只需要按照一定的格式编写 mock 即可。

首先在 mock 文件夹下创建 index.js 文件，这里就是我们注册所有 mock 服务的地方

	// 首先引入 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);
	}
	});

服务注册好之后，在 main.js 中引入

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

在 mock 文件夹下随便创建一个文件 demoList.js
在该文件中，我们可以按照 index 注册服务的格式来写我们的 mock

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

我们也可以使用 template 返回

	let demoList = {
	status: 200,
	message: 'success',
	data: [{
	id: 1,
	name: 'zs',
	age: '23',
	job: '前端工程师'
	},{
	id: 2,
	name: 'ww',
	age: '24',
	job: '后端工程师'
	}]
	};
	let demoList2 = [{
	id: 1,
	name: 'zs',
	age: '23',
	job: '前端工程师'
	},{
	id: 2,
	name: 'ww',
	age: '24',
	job: '后端工程师'
	}];
	export default {
	'get\|/parameter/query': demoList,
	// 也可以这样写
	// 官方解释为：记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function (options) 将被执行，并把执行结果作为响应数据返回。
	'get\|/parameter/query': (option) => {
	// 可以在这个地方对 demoList2 进行一系列操作，例如增删改
	//option 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
	return {
	status: 200,
	message: 'success',
	data: demoList2
	};
	}
	}

当然，当我们想要展示大量数据时，不可能一个一个的写，那样又费时又费力，这是我们就可以根据 mockjs 的语法规范来快速生成一系列的数据

	let demoList = {
	status: 200,
	message: 'success',
	data: {
	total: 100,
	'rows\|10': [{
	id: '@guid',
	name: '@cname',
	'age\|20-30': 23,
	'job\|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
	}]
	}
	};
	export default {
	'get\|/parameter/query': demoList
	}