前后端分離之讓前端開發脫離接口束縛（mock）

情景：

    領導：小吳啊，最近在忙什么啊？

    前吳：（心想：我擦勒，難道划水被領導發現了？也不能怪我啊，后台的哥們接口還沒給呢，但要是實話實說不就對不起后台哥們了嗎？）

                領導，我在學習關於mock相關的文章，可以用來模擬AJAX請求，讓前后端更專注於自己的工作。

    領導：不錯不錯。

    前吳：呵呵， ；

 

以上場景應該在開發中大家都有過這樣的經歷吧，重構完成，再書寫交互時遇到后台接口尚未完成，無法得到接口返回的測試數據，但是我們又需要一些數據來測試我們的前端功能的時候，往往會在這種情況下卡殼；最常見的辦法就是：等~~~，等后台哥們完成接口再繼續開發，似乎有了一個正當划水的理由。但是這樣一點也不符合咱們早完事早收工的工作理念，所以呢，今天學習的關於前端模擬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

    簡介：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  

      文件結構：

$.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那就最好了。。。。。。