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

时间：2023-11-23 17:01:14
情景：
    领导：小吴啊，最近在忙什么啊？
    前吴：（心想：我擦勒，难道划水被领导发现了？也不能怪我啊，后台的哥们接口还没给呢，但要是实话实说不就对不起后台哥们了吗？）
                领导，我在学习关于mock相关的文章，可以用来模拟AJAX请求，让前后端更专注于自己的工作。
    领导：不错不错。
    前吴：呵呵，前后端分离之让前端开发脱离接口束缚（mock）；
以上场景应该在开发中大家都有过这样的经历吧，重构完成，再书写交互时遇到后台接口尚未完成，无法得到接口返回的测试数据，但是我们又需要一些数据来测试我们的前端功能的时候，往往会在这种情况下卡壳；最常见的办法就是：等~~~，等后台哥们完成接口再继续开发，似乎有了一个正当划水的理由。但是这样一点也不符合咱们早完事早收工的工作理念，所以呢，今天学习的关于前端模拟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资料.
    使用方法： 
 var isAjaxMocked = true;

 if (isAjaxMocked) {

   var one = $.mockjax({

     url: 'Api/index/siteInfo',    url可以通过正则进行匹配

     data: {                       data用于请求同一接口时，传递的参数不同而返回不同的数据，注：需写多个mockjax

       type: 'cook'

     },

     status: 200,                  请求状态

     responseTime: 750,            请求时间

     responseText: { "user": [{ "id": "1", "name": "david", "birthday": "2001/01/26" }] }    返回数据，此处就可以使用mockJSON来快速创建批量的数据

     使用mockJSON创建批量数据的书写方式：

     responseText: $.mockJSON.generateFromTemplate({

         "user|3-6": [{     随机3-6个

             "id|+1": 1,    +1递增

             "name": "@MALE_FIRST_NAME",    随机姓名

             "birthday": "@DATE_YYYY/@DATE_MM/@DATE_DD"   随机日期

         }]

     })

   });

 }

 $.mockjax.clear(one);    clear方法用于关闭某个mockjax实现

 $.get('/Api/index/siteInfo', {type: 'cook'}, function(callback) {

     $('.wrap').html(JSON.stringify(callback));

     console.log(callback)

 })
        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
            通过使用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
      文件结构：前后端分离之让前端开发脱离接口束缚（mock）
 $.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那就最好了。。。。。。

:first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; max-width: 100%; height: auto !important; margin: 2px 0; } table { border-collapse: collapse; border: 1px solid #bbbbbb; } td, th { padding: 4px 8px; border-collapse: collapse; border: 1px solid #bbbbbb; } @media only screen and (-webkit-max-device-width: 1024px), only screen and (-o-max-device-width: 1024px), only screen and (max-device-width: 1024px), only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) { html, body { font-size: 17px; } body { line-height: 1.7; padding: 0.75rem 0.9375rem; color: #353c47; } h1 { font-size: 2.125rem; } h2 { font-size: 1.875rem; } h3 { font-size: 1.625rem; } h4 { font-size: 1.375rem; } h5 { font-size: 1.125rem; } h6 { color: inherit; } ul, ol { padding-left: 2.5rem; } blockquote { padding: 0 0.9375rem; } }
-->

div{font-size:15px;}.wiz-table-tools .wiz-table-menu-item.active .wiz-table-menu-sub {display: block}.wiz-table-tools .wiz-table-menu-sub:before, .wiz-table-tools .wiz-table-menu-sub:after {position: absolute;content: " ";border-style: solid;border-color: transparent;border-bottom-color: #cccccc;left: 22px;margin-left: -14px;top: -8px;border-width: 0 8px 8px 8px;z-index:10;}.wiz-table-tools .wiz-table-menu-sub:after {border-bottom-color: #ffffff;top: -7px;}.wiz-table-tools .wiz-table-menu-sub-item {padding: 4px 12px;font-size: 14px;}.wiz-table-tools .wiz-table-menu-sub-item.split {border-top: 1px solid #E0E0E0;}.wiz-table-tools .wiz-table-menu-sub-item:hover {background-color: #ececec;}.wiz-table-tools .wiz-table-menu-sub-item.disabled {color: #bbbbbb;cursor: default;}.wiz-table-tools .wiz-table-menu-sub-item.disabled:hover {background-color: transparent;}.wiz-table-tools .wiz-table-menu-item.wiz-table-cell-bg:hover .wiz-table-color-pad {display: block;}.wiz-table-tools .wiz-table-color-pad {display: none;padding: 10px;box-sizing: border-box;width: 85px;height: 88px;background-color: #fff;cursor: default;}.wiz-table-tools .wiz-table-color-pad > div{font-size:15px;}.wiz-table-tools .wiz-table-color-pad .wiz-table-color-pad-item {display: inline-block;width: 15px;height: 15px;margin-right: 9px;position: relative;}.wiz-table-tools .wiz-table-color-pad .wiz-table-color-pad-item i.pad-demo {position: absolute;top:3px;left:0;}.wiz-table-tools .wiz-table-color-pad .wiz-table-color-pad-item .icon-oblique_line{color: #cc0000;}.wiz-table-tools .wiz-table-color-pad .wiz-table-color-pad-item:last-child {margin-right: 0;}.wiz-table-tools .wiz-table-color-pad .wiz-table-color-pad-item.active i.editor-icon.icon-box {color: #448aff;}.wiz-table-tools .wiz-table-cell-align {display: none;padding: 10px;box-sizing: border-box;width: 85px;height: 65px;background-color: #fff;cursor: default;}.wiz-table-tools .wiz-table-cell-align .wiz-table-cell-align-item {display: inline-block;width: 15px;height: 15px;margin-right: 9px;position: relative;}.wiz-table-tools .wiz-table-cell-align .wiz-table-cell-align-item:last-child {margin-right:0}.wiz-table-tools .wiz-table-cell-align .wiz-table-cell-align-item i.valign{position: absolute;top:3px;left:0;color: #d2d2d2;}.wiz-table-tools .wiz-table-cell-align-item.active i.editor-icon.valign {color: #a1c4ff;}.wiz-table-tools .wiz-table-cell-align-item.active i.editor-icon.icon-box,.wiz-table-tools .wiz-table-cell-align-item.active i.editor-icon.align {color: #448aff;}.wiz-table-tools .wiz-table-color-pad .wiz-table-color-pad-item:last-child,.wiz-table-tools .wiz-table-cell-align .wiz-table-cell-align-item:last-child {margin-right: 0;}th.wiz-selected-cell-multi, td.wiz-selected-cell-multi {background: rgba(0,102,255,.05);}th:before,td:before,#wiz-table-col-line:before,#wiz-table-range-border_start_right:before,#wiz-table-range-border_range_right:before{content: " ";position: absolute;top: 0;bottom: 0;right: -5px;width: 9px;cursor: col-resize;background: transparent;z-index:100;}th:after,td:after,#wiz-table-row-line:before,#wiz-table-range-border_start_bottom:before,#wiz-table-range-border_range_bottom:before{content: " ";position: absolute;left: 0;right: 0;bottom: -5px;height: 9px;cursor: row-resize;background: transparent;z-index:100;}.wiz-table-container {}.wiz-table-body {position:relative;padding:0 0 10px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}.wiz-table-body table {margin:0;outline:none;}td,th {height:28px;word-break:break-all;box-sizing:border-box;outline:none;}body pre.prettyprint {padding:0;}body pre.prettyprint code {white-space: pre;}body pre.prettyprint.linenums {box-shadow:none; overflow: auto;-webkit-overflow-scrolling: touch;}body pre.prettyprint.linenums ol.linenums {box-shadow: 40px 0 0 #FBFBFC inset, 41px 0 0 #ECECF0 inset; padding: 10px 10px 10px 40px !important;}
-->

相关文章