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

時間 2019-11-20

標籤後端分離前端開發脫離接口束縛 mock 简体版

原文原文鏈接

情景：

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

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

領導，我在學習關於mock相關的文章，能夠用來模擬AJAX請求，讓先後端更專一於本身的工做。

領導：不錯不錯。

前吳：呵呵，

；

以上場景應該在開發中你們都有過這樣的經歷吧，重構完成，再書寫交互時遇到後臺接口還沒有完成，沒法獲得接口返回的測試數據，可是咱們又須要一些數據來測試咱們的前端功能的時候，每每會在這種狀況下卡殼；最多見的辦法就是：等~~~，等後臺哥們完成接口再繼續開發，彷佛有了一個正當划水的理由。可是這樣一點也不符合我們早完事早收工的工做理念，因此呢，今天學習的關於前端模擬AJAX的三種辦法，用於應對以上狀況，加快開發效率；

解決辦法：一、mockjax.js和mockJSON.js

二、mock.js

三、gulp-mock-server

方法一：mockjax.js和mockJSON.js

簡介：mockjax.js和mockJSON.js都是基於jQuery開發的Javascript Library；

mockjax主要是能夠針對指定的網址進行mock, 當Ajax呼叫網址時攔截並回傳假的數據,

mockJSON則是根據咱們指定的格式隨機數生成回傳的Json資料.

使用方法：

 1 var isAjaxMocked = true;
 2 if (isAjaxMocked) {
 3   var one = $.mockjax({
 4     url: 'Api/index/siteInfo',    url能夠經過正則進行匹配
 5     data: {                       data用於請求同一接口時，傳遞的參數不一樣而返回不一樣的數據，注：需寫多個mockjax
 6       type: 'cook'
 7     },
 8     status: 200,                  請求狀態
 9     responseTime: 750,            請求時間       
10     responseText: { "user": [{ "id": "1", "name": "david", "birthday": "2001/01/26" }] }    返回數據，此處就可使用mockJSON來快速建立批量的數據
11     使用mockJSON建立批量數據的書寫方式：
12     responseText: $.mockJSON.generateFromTemplate({
13         "user|3-6": [{     隨機3-6個
14             "id|+1": 1,    +1遞增
15             "name": "@MALE_FIRST_NAME",    隨機姓名
16             "birthday": "@DATE_YYYY/@DATE_MM/@DATE_DD"   隨機日期
17         }]
18     })
19   });
20 }
21 $.mockjax.clear(one);    clear方法用於關閉某個mockjax實現
22 $.get('/Api/index/siteInfo', {type: 'cook'}, function(callback) {
23     $('.wrap').html(JSON.stringify(callback));
24     console.log(callback)
25 })

mockjax具體參數和進階的使用方式能夠看官方github https://github.com/jakerella/jquery-mockjax

mockJSON的生成模板規則見 https://github.com/mennovanslooten/mockJSON 這個須要clone下來，看他的index.html，github上沒介紹；

方法2、mock.js （至關於方法一的整合版）推薦使用！

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

簡介：mock.js結合了 mockjax.js和mockJSON.js，適用於jquery、nodejs、angularjs，有完善的API文檔和維護，適用性強

用法：簡單是試用了jquery下的使用，跟方法一的用法相似，其餘環境下沒使用過也很差說啥，具體使用方法和介紹能夠查看官網或則《使用Mock.js進行獨立於後端的前端開發》 http://www.javashuo.com/article/p-owekqvcy-bk.html 這篇文章；

優勢：中文API學習方便，適用環境多，mockjson生成方便，多種隨機模型，JSON數據修改能立刻能應用；

缺點：需手動書寫多個 Mock.mock（幾個接口書寫幾個，相同的除外），對於維護某個特定接口時不易查找；

方法3、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配置；

 1 var gulp = require('gulp'),
 2     mockserver = require('gulp-mock-server');
 3 gulp.task('mock', function() {
 4     gulp.src('.')
 5         .pipe(mockserver({
 6             host: 'localhost',
 7             path: '/',
 8             open: 'http://localhost:8090/index.html',
 9             port: 8090,            端口號
10             allowCrossOrigin : true   跨域
11         }));
12 })
13         更多參數請查看 https://github.com/sanyueyu/gulp-mock-server

文件結構：

1 $.get('/index/siteInfo', function(callback) {     url對應了data文件下的目錄；
2     $('.wrap').html(JSON.stringify(callback));
3     console.log(callback)
4 })
5 $.get('/test', function(callback) {
6     $('.wrap').html(JSON.stringify(callback));
7     console.log(callback)
8 })