使用mock.js提供模拟数据

比眉伴天荒 2022-07-13 08:55 176阅读 0赞

# Mock.js #

官网：[链接地址][Link 1]

### 官方说明： ###

\*前后端分离，让前端工程师独立于后端开发。  
\*增加单元测试的真实性，通过随机数据，模拟各种场景。  
\*开发无侵入，不需要修改既有代码，就可以拦截ajax请求，返回模拟的响应数据。  
\*用法简单，符合直觉的接口。  
\*数据类型丰富，支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。  
\*方便扩展，支持扩展更多数据类型，支持自定义函数和正则。  
— 以上为官网提供的说明。

最重要的是：  
1.基于Html模版生成数据。  
2.基于数据模版生成数据。  
3.拦截ajax请求。

解决的问题：  
1.数据太长了，将数据写在js文件里，完成后挨个改url。  
2.某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。  
3.想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。  
4.特殊的格式，例如IP,随机数，图片，地址，需要去收集。  
5.后端开发慢，调试麻烦。  
等等这些，不优雅的前端都是不科学的开发方式

--------------------

### 简单上手指南 ###

1.去官网安装代码 [链接地址][Link 1]  
2.开始动手写模拟数据。

> Mock.mock(‘[http://g.cn][http_g.cn]‘, \{  
> ‘name’ : ‘@name()’,  
> ‘age|1-100’: 100,  
> ‘color’ : ‘@color’  
> \});

3.发送请求。

> ajax.post(“url”,data).then(function()\{  
> do something….  
> \});

4.查看返回结果。

以上就是简单的上手指南，接下来就是更加合理的使用这个js工具来打到我们想要的效果。

### 使用gulp ###

使用gulp可以自动完成这些数据和后端接口的替换。  
1.添加gulp的配置，使我们可以手动启动开发环境或者测试环境。

> gulp.task(“test”, function(cb) \{  
> setConfig();  
> if (config.globel.env !== “dev”) \{  
> config.globel.dev = false;  
> \}  
> gulp.run(“clean”);  
> setTimeout(function() \{  
> gulp.run(“run”);  
> \}, 1000);  
> \});

上面的代码就是判断一下当前是否在使用某个环境，这个东西可以是不同的任务，也可以是不同的配置，这样就可以做到只需一行命令完美切换两个不同的环境。  
\*开发阶段使用mockjs提供假数据。  
\*测试调试阶段使用接口提供的数据。  
\*所有代码逻辑都不需要有任何改动，只要定义好接口，一切就跟预想的没有差别。

--------------------

*偷偷的说一个以上版本的简化版*  
在模块化开发情况很合适！  
1.在同等路径的文件夹下建立一个interface.js。  
2.把所有接口都写在这个文件里。  
3.使用requirejs或者commonjs等插件来加载这个文件。  
4.其余逻辑不变，在没有接口的情况下可以直接将假数据或者数据制造逻辑写在这个文件里。  
5.只需单独写个debug开关，或者干脆注释掉这些就可以在接口和自定义数据之间切换。

*这样是不是也很简单！*

[Link 1]: http://mockjs.com/
[http_g.cn]: http://g.cn