在前后端分离的开发模式中，数据需要通过 http 请求异步从服务器端获取，也就是前端开发需要依赖后端接口，如果不能时时保证数据获取通畅，就会造成开发阻塞。这时前端需要一种方式可以来模拟数据请求，从而更多的掌握主动权独立开发项目，mockjs 可以以无侵入的方式拦截 ajax 请求，通过模拟服务器端响应来返回数据
安装与引用
// node 安装
npm install mockjs
// 引入 mockjs 模块
import Mock from 'mockjs'
基础用法
/**
* @method Mock.mock(rurl, template)
* @param [String] curl 拦截的请求url
* @param [Object] template 生成数据的模板
*/
Mock.mock('hello.php', {
'list|1-5': [{
name: '@name',
email: '@email',
createTime: '@date'
}]
})
$.ajax({
url: 'hello.php',
dataType: 'json'
}).done(function(data, status, jqXHR) {
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
模块化引用
// 定义并导出 mock 模块
import Mock from 'mockjs';
export default Mock.mock('hello.php', {
'list|1-5': [{
'id|+1': 1,
'email': '@EMAIL',
'regexp3': /\d{5,10}/
}]
});
// 引入定义好的模块
import data from './mock';
axios.get('hello.php')
.then(function (response) {
console.log(response);
})
-
Mock.mock(rurl, template)方法表示拦截 ajax 请求'hello.php'，通过模板生成模拟数据返回 -
list|1-5表示随机生成属性名为list的数据1-5条， 管道符号|左侧表示属性名，右侧表示生成规则 -
@name表示随机生成name值，@表示占位符，引用的是Mock.Random中的方法
Mockjs 语法规范由数据模板定义规范和数据占位符定义规范组成，在官网的 示例文档 中提供了丰富的模板定义方法，可点击查看
mock server
Mockjs 实现的原理是对 XHR 对象的拦截，属于 js 拦截，并没有通过浏览器发出请求，所以一般会碰到以下问题。
- 虽然是无侵入式，如果要打包上线，需要把 mockjs 删除
- 无法在浏览器调试工具里查看请求链接和请求参数
- 无法调试反向代理，处理跨域问题
为了处理以上问题，引入集成了 mockjs 的 mock server工具 easy-mock，注册并登录 easy-mock 官网后，会有一个演示项目提供参考，参考演示项目可以轻松创建自己的项目，如下图
创建项目后可以基于当前项目创建请求接口，如下图，创建一个 url 为 \user的 get 请求，会生成接口为 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/user 的完整地址，点击 用户列表 可查看返回数据，由于 easy-mock 内部集成了 mockjs，所以在生成数据时可以采用mockjs数据模板来生成，把基础用法中的数据生成模板粘贴过来，可以生成相同数据
设置代理解决跨域
浏览器限制跨域访问，所以要访问到接口数据，还需要解决跨域问题，通过 Nginx 解决跨域我在另外一片文章有讨论过，点击可以可查，下面主要介绍下通过 webpack-dev-server 设置代理
// 通过 ajax 请求 user 接口
axios.get('/proxy/user')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// webpack-dev-server 配置
devServer: {
proxy: {
'/proxy/*': {
target: 'https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello',
changeOrigin: true,
pathRewrite: {
'^/proxy': ''
}
}
}
}
假设本地请求的根路径为 http://localhost:8080，通过 ajax 请求 用户列表 的完整接口为 http://localhost:8080/proxy/user，webpack-dev-server 通过代理方式将请求转发到我们在 easy-mock 中定义的接口 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/proxy/user，此时接口地址中多了个代理标志 /proxy, 通过配置参数 pathRewrite: {'^/proxy': ' '} 将 /proxy 去掉即可。
