mockjs简介和应用

Posted 2023-04-02

参考技术A mock.js 是一款模拟数据生成器，帮助前端人员独立于后端进行开发，帮助编写单元测试， 前后端合作期间，后端人员需给到需开发的接口名称、返回的数据格式，前端人员根据这些数据格式，编写mock，可直接用于开发，编写页面交互。

根据数据模板生成模拟数据 拦截真实的ajax请求，并模拟Ajax请求，生成并返回模拟数据 基于HTMML模板生成模拟数据

注意：项目已经做配置，只需要看

官方文档： http://mockjs.com/0.1/ Mock.js 的语法规范包括两部分：

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符 的格式为：

1、对传递的参数解码，并使用post中的参数，对原始数据过滤 2、mock-service 可用于局部热加载

mockjs 使用简介

参考技术A 在前后端分离的开发模式中，数据需要通过 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 去掉即可。