前端开发数据mock神器 -- xl_mock

 

1、为什么要实现数据 mock 

 

　　要理解为什么要实现数据 mock，我们可以提供几个场景来解释，

　　1、现在的开发很多都是前后端分离的模式，前后端的工作是不同的，当我们前端界面已经完成，但是后端的接口迟迟不能提供

　　　 前端很多时候都会等接口。

　　2、测试人员想要你提供一份可以直接测试，自行修改后端接口，测试 UI 的时候。

　　3、后端的接口，不能提供一些匹配不到的场景的时候。

 

　　这个时候如果前端可以实现自己的一套 mock 数据，这里的问题都会迎刃而解，我们可以模拟真实的接口，提供我们自己需要的数据及其数据结构。

　　这样，我们可以在后端未完成的情况下，完成测试，调试以及优化。

 

2、mock 数据的方案

 

　　说到前端开发，那么实现前端数据到 mock 是在前端构建中不可缺少到一个步骤，不管是在开发或者调试都是必不可少的。

　　那么我们要实现数据的 mock ，有哪些操作呢？其中最常规到方法就那么几种：

　　例如：

　　1、引入 mock.js 实现请求拦截。

　　2、搭建一个属于自己到 mock 服务器，模拟自己想要到数据及其数据结构。

　　3、搭建RAP 可视化到一个 mock 服务器

　　4、还有其他很多特别到手段....

　　

　　在这几种方法中，都是利用了模拟数据，来实现前端的展示，提高前端开发效率以及开发节奏。

　　

　　xl_mock 介绍

 

　　xl_mock 是一个基于 mock.js 开发的一个可视化的数据 mock 的 npm 包。

　　它可以实现在你的项目中通过命令开启一个本地数据 mock 服务器。

　　并且 mock 的数据类型会存在在项目中，以供合作开发。　　

　　

　　xl_mock 使用及其预览

 

　　1、首先全局安装 xl_mock

 

npm install -g xl_mock

 

　　在全局安装，可以实现全局命令。

　　如果不在项目项目中安装，则会开启一个全局的 mock 服务器。这是不可取的。

 

　　2、在项目中添加 npm 包 xl_mock

 

yarn add xl_mock

　　

　　在项目中添加 xl_mock ,这样开启服务的时候只会在当前项目生效。

 

　　3、在项目开启 mock 服务器

 

xl_mock start -p 2048

　　

　　这里开启的项目的 mock 服务器，并且监听的端口好是 2048 。

　　如果端口号被占用，会先停止端口号的进程，然后重新开启。

 

 

　　首先，这里会在项目的根目录生成一个 mock 目录，用于存放数据。（ 如果存在 mock 目录，则不会重新生成 ）

　　可以看到这里开启的是一个本地服务器，并且打开了 http://127.0.0.1:2014/index.html

　　这里我们看到的是一个可视化，接口添加，接口修改，以及接口类型添加等。

 

　　4、添加一个接口

 

 

　　这里添加了一个 uesrInfo 接口

　　并且请求地址为 /get/userInfo

　　这里还可以进行方法的选择，以及接口的描述，还有接口具体信息。

　　当我们点击提交数据，接口的信息已经写入了本地项目目录下的 mock 文件夹内，以供提取。

 

　　5、接口验证和调用

 

 

　　在这里，我是直接输入接口地址到浏览器中验证接口是否生效。

　　那么在项目中，我们如何调用呢？

　　我们可以判定一个 mock 环境，将请求地址都替换成 http://127.0.0.0:2048 , 实现接口的调用。。

 

　　xl_mock 相对于其他的优点：

 

　　相对于 mock.js ：

　　xl_mock 已经从项目中提出了，不需要进行接口请求拦截，使开发更接近于后端接口

　　xl_mock 提供了可视化的界面，这样接口浏览更直观