前后端分离之让前端开发脱离接口束缚（mock）

小灰灰 2022-12-29 14:09 115阅读 0赞

![format_png][]

来源 | https://www.cnblogs.com/milo-wjh/p/6424246.html

前后端分重构完成，再书写交互时遇到后台接口尚未完成，无法得到接口返回的测试数据，但是我们又需要一些数据来测试我们的前端功能的时候，往往会在这种情况下卡壳；最常见的办法就是：等~~~，等后台哥们完成接口再继续开发，似乎有了一个正当划水的理由。

但是这样一点也不符合咱们早完事早收工的工作理念，所以呢，今天学习的关于前端模拟AJAX的三种办法，用于应对以上情况，加快开发效率；

**解决办法： **

1、mockjax.js和mockjsON.js  
2、mock.js  
3、gulp-mock-server

## **方法一：mockjax.js和mockJSON.js** ##

**简介：**

mockjax.js和mockJSON.js都是基于jQuery开发的JavaScript Library；  
mockjax主要是可以针对指定的网址进行mock, 当Ajax呼叫网址时拦截并回传假的数据,  
mockJSON则是根据我们指定的格式随机数生成回传的Json资料.

使用方法：mockjax具体参数和进阶的使用方式可以看官方github https://github.com/jakerella/jquery-mockjax。

mockJSON的生成模板规则见 https://github.com/mennovanslooten/mockJSON 这个需要clone下来，看他的index.html，github上没介绍；

## **方法二、mock.js （相当于方法一的整合版） 推荐使用！** ##

官方地址：http://mockjs.com/\#mock

简介：mock.js结合了mockjax.js和mockJSON.js，适用于jquery、nodejs、angularjs，有完善的API文档和维护，适用性强

用法：简单是试用了jquery下的使用，跟方法一的用法类似，其他环境下没使用过也不好说啥，具体使用方法和介绍可以查看官网或则《使用Mock.js进行独立于后端的前端开发》 https://segmentfault.com/a/1190000003087224 这篇文章；

优点：中文API学习方便，适用环境多，mockjson生成方便，多种随机模型，JSON数据修改能马上能应用；

缺点：需手动书写多个Mock.mock（几个接口书写几个，相同的除外），对于维护某个特定接口时不易查找；

## **方法三、gulp-mock-server** ##

简介：github https://github.com/sanyueyu/gulp-mock-server

通过使用gulp-mock-server构建本地服务，并拦截AJAX请求，指向定义好的文件目录中（默认是根目录的data文件夹），目录中存放好相同目录结构的json文件，当发起请求时会自动转向指定的文件，获得mockjson；

用法：安装node、npm、gulp、gulp-mock-server这些就不细讲了，说下gulpfile.js配置；

var gulp = require('gulp'),    mockserver = require('gulp-mock-server');gulp.task('mock', function() {    gulp.src('.')        .pipe(mockserver({            host: 'localhost',            path: '/',            open: 'http://localhost:8090/index.html',            port: 8090,            端口号            allowCrossOrigin : true   跨域        }));})        更多参数请查看 https://github.com/sanyueyu/gulp-mock-server

文件结构：

![format_png 1][]

$.get('/index/siteInfo', function(callback) {     url对应了data文件下的目录；    $('.wrap').html(JSON.stringify(callback));    console.log(callback)})$.get('/test', function(callback) {    $('.wrap').html(JSON.stringify(callback));    console.log(callback)})

优缺点：  
1、优点：项目中只要启动服务，不需要在代码中引入相关的js文件，接口数据按文件结构分类，方便管理；  
2、缺点：①json文件整理，归类繁杂，mockdata生成不方便；  ②更新json文件后，需要重启服务才能得到更新；

结合以上三种方式的mock，个人比较推荐使用mock.js,如果能根据接口文档自动生成需要的mockdata那就最好了。

本文完〜

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![format_png 2][]

![format_png 3][]

点个**在看**支持我吧

![format_png 4][]

[format_png]: /images/20221120/9d42004039dd48528c8a2deb3581f62f.png
[format_png 1]: /images/20221120/3e1710f28b4a4d76bfc552dc7d5e9da4.png
[format_png 2]: /images/20221120/4bb27d92a635471c8480b662b2111af1.png
[format_png 3]: /images/20221120/79c83b86909b4f3bbe4fef0052b4b893.png
[format_png 4]: /images/20221120/fb97fecbeb94448588493d44a8a82629.png