Mock.js使用

JavaScript08

Mock.js使用,第1张

Mock.js 是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据。

可以在src目录下新建mock文件夹,新建index.js文件。在index.js文件中建立虚拟数据。

如果需要使用虚拟数据,就在main.js入口文件中导入mockjs文件。

Mock.setup( settings ): 配置拦截 Ajax 请求时的行为。

Mock.mock( template ): 根据数据模板生成模拟数据。template表示数据模板,可以是对象或字符串。数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值。

'name|rule': value : 属性名 name、生成规则 rule、属性值 value。属性名 和 生成规则 之间用竖线 | 分隔。

'name|min-max': array: 当属性值是数组 Array。通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。

'name|+1': number: 当属性值是数字 Number。属性值自动加 1,初始值为 number。

占位符: 用 @ 来标识其后的字符串是 占位符。占位符 引用的是 Mock.Random 中的方法。

@cname: 随机生成一个常见的中文姓名。

@ctitle( min, max ): 随机生成一句中文标题。默认值为 3 到 7 之间的随机数。

@integer( min, max ): 返回一个随机的整数。min是最小值,max是最大值。

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

此时,前台向后台发送请求,会获取到mokejs虚拟数据,而不是真实的后台数据。

在前后端分离的开发模式中,数据需要通过 http 请求异步从服务器端获取,也就是前端开发需要依赖后端接口,如果不能时时保证数据获取通畅,就会造成开发阻塞。这时前端需要一种方式可以来模拟数据请求,从而更多的掌握主动权独立开发项目, mockjs 可以以无侵入的方式拦截 ajax 请求,通过模拟服务器端响应来返回数据

JSRUN

Mockjs 语法规范由数据模板定义规范和数据占位符定义规范组成,在官网的 示例文档 中提供了丰富的模板定义方法,可点击查看

Mockjs 实现的原理是对 XHR 对象的拦截,属于 js 拦截,并没有通过浏览器发出请求,所以一般会碰到以下问题。

为了处理以上问题,引入集成了 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 设置代理

假设本地请求的根路径为 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 去掉即可。