??我們都知道珠十，在現(xiàn)在流行的“前后端分離”架構中，前后端的聯(lián)調(diào)荠诬，是一個不能避免的問題琅翻，特別是在項目稍微有點規(guī)模之后，“等接口”似乎成了前端開發(fā)者的一種常態(tài)柑贞。所以通常我們在不借助任何工具的情況下方椎，進行前后端聯(lián)調(diào)大概會出現(xiàn)以下幾種尷尬的局面：

• 前后端開發(fā)速度不一致，前端頁面寫好之后钧嘶，必需要等待服務端的接口出來辩尊，才能有足夠的數(shù)據(jù)支撐UI的顯示。
• 服務端接口不能滿足界面的需求時康辑，要前端調(diào)用發(fā)現(xiàn)問題之后摄欲，反饋給服務端，然后服務端需要根據(jù)要求修改接口定義疮薇，重新部署胸墙，前端再重新調(diào)用。
• 前端調(diào)用接口的操作成為了測試接口是否有bug的手段按咒。

??以上的情況就造成了前后端聯(lián)調(diào)過程中最主要的問題迟隅，溝通成本，時間成本励七，服務重啟的成本加在一起智袭，就是工期經(jīng)常延后的原因。

一掠抬、解決前后端聯(lián)調(diào)的以往做法

??在以往的做法中吼野，解決這個問題的辦法通常有兩種，一種前端做法两波，一種后端做法瞳步。
??前端的做法一般是在業(yè)務代碼里面先寫上假數(shù)據(jù)供頁面的顯示，等后端接口寫好之后腰奋，再將假數(shù)據(jù)注釋掉单起，改成接口調(diào)用，通常表現(xiàn)為以下的形式：

getData = (id) =>{
 return $.get('/api/user/' + id);
 //return new Promise((resolve, reject)=> {
 //  setTimeout(()=>{
 //    return resolve({
 //      data: {
 //        errcode: 0,
 //        data: {
 //          id: 1,
 //          name: 'tom'
 //        }
 //      }
 //    })
 //  }, 100)
 //})
}

可以看到劣坊，這樣的做法會在業(yè)務代碼里面產(chǎn)生非常多的冗余代碼嘀倒，且在真實接口和假數(shù)據(jù)之間的切換非常不利于維護，前端開發(fā)者必須要記住在上線前，把所有的假數(shù)據(jù)注釋掉测蘑，切換成真實接口的調(diào)用灌危。如果有很多接口都這樣做的話，這樣大大增加了開發(fā)者的工作量帮寻。
??后端的做法大多是先寫一套測試數(shù)據(jù)的接口供前端調(diào)用乍狐，等接口開發(fā)完成之后再切換過來。這樣無疑又增加了后端開發(fā)者的工作量固逗， 而即便是這樣浅蚪，當后端在寫正式接口的過程中，增刪或者修改了某一個字段烫罩，亦或是數(shù)據(jù)接口發(fā)生了改變惜傲，這樣都不能及時的更新到臨時的測試接口上，前端也無法得到及時的反饋贝攒，所以會造成前端邏輯處理的很多返工操作盗誊。
??這兩種方法，無論是哪一種隘弊，在實際的應用中都非常不方便共苛，既影響了業(yè)務代碼亲配，也增加了正常開發(fā)的工作量，所以前端開發(fā)者在開發(fā)的過程中一直在尋求一種mock的方法，能夠在開發(fā)的過程中魂毁，前后端實現(xiàn)完全分離的滋戳，彼此不受牽制猾担。

二洁段、mock的概念

??所謂mock，意思就是模擬质欲，上面提到的前端開發(fā)者通常用寫在業(yè)務代碼里面的假數(shù)據(jù)代替還沒有開發(fā)完成的接口返回的數(shù)據(jù)的方法树埠，其實就是對前端數(shù)據(jù)的一種mock方法，只是這種方法不是很方便嘶伟。于是阿里巴巴的某大神就出品了一款功能非常全面的模擬數(shù)據(jù)生成的 JS 庫怎憋，也就是我們現(xiàn)在見到的mock.js，通過它我們可以使用簡單的語法模擬各類常見的數(shù)據(jù)奋早。
??想要在代碼里面使用mock.js首先要進行npm安裝：npm install mockjs --save-dev盛霎，或者直接在script標簽中引用：<script src="http://mockjs.com/dist/mock.js"\></script\>，然后還需要了解一些mock.js的語法規(guī)則耽装，這些規(guī)則都很簡單，這里就不介紹語法了期揪，只是舉一個簡單的例子來表明mock.js對于生成模擬數(shù)據(jù)來說有多方便掉奄。比如現(xiàn)在頁面需要如下所示的一個數(shù)據(jù)結構，但是后端接口還沒有開發(fā)好，這個時候頁面的顯示就需要前端自己來模擬一些數(shù)據(jù)填充姓建。

{
    "name": "BeJson",
    "links": [
        {
            "name": "Google",
            "url": "http://www.google.com"
        },
        {
            "name": "Baidu",
            "url": "http://www.baidu.com"
        },
        {
            "name": "SoSo",
            "url": "http://www.SoSo.com"
        }
    ]
}

??這樣看诞仓，如果全部手寫的話，好像工作量也不是很大速兔。但是如果一旦其中的links數(shù)組需要有成百上千條數(shù)據(jù)的時候墅拭，前端開發(fā)者一條一條的寫，亦或是復制粘貼都變得非常不現(xiàn)實涣狗，所以這時候我們可以利用mock.js來寫這樣一個結構：

Mock.mock({
    "name": "@name",
    "links|100": [
        {
            "name": "@name",
            "url": "@url"
        }
    ]
})

如上面的代碼所示谍婉，links|100是mock.js的一個語法，表示的是給links數(shù)組里面創(chuàng)建100個對象镀钓，每個對象都包含name和url兩個屬性穗熬，這兩個屬性會通過@name和@url這兩個mock.js的規(guī)則，隨機生成名字和鏈接丁溅，當然唤蔗，這里生成的name是一個隨機的英文名。這樣再也不需要自己手動復制粘貼改數(shù)據(jù)窟赏，只需要改一個地方就可以輕松的拿到任意條數(shù)據(jù)妓柜。關于mock.js的語法規(guī)則可以查看其官網(wǎng)http://mockjs.com。
??有了mock.js之后涯穷，前端開發(fā)者的mock之路又前進了一步棍掐，至少在寫mock數(shù)據(jù)的時候更加方便了。其實更多時候的做法是求豫，單獨用mock.js寫一個data.json的文件塌衰，然后在業(yè)務代碼里面切換真實接口請求和本地data.json文件請求，如下面的代碼所示：

getData = (id) =>{
    //return $.get('/api/user/' + id);
    return $.get('data.json');
}

??或者直接寫真實的接口蝠嘉，然后請求發(fā)出去的時候最疆，利用fiddler或者charles等代理工具，將這個接口Map Local到本地的data.json文件蚤告，這樣就不用改動業(yè)務代碼努酸，更加方便易操作。

三杜恰、常用的兩個開源前端mock工具

??mock.js的出現(xiàn)雖然已經(jīng)簡化了前端工作量获诈，但是依舊有很多問題，或者說它只解決了一部分問題心褐。比如說：

• 所有接口的mock規(guī)則都需要開發(fā)者手動定義舔涎；
• 難以模擬出各種不同的網(wǎng)絡請求狀態(tài)；
• 難以模擬出數(shù)據(jù)錯誤逗爹，或者空數(shù)據(jù)的狀態(tài)亡嫌；
• 不能模擬出根據(jù)不同請求參數(shù)，返回不同結果的情況；

??上面的最后三種狀態(tài)都是在前端界面的開發(fā)過程中都需要考慮到的情況挟冠，但是mock.js都比較難以做到于购，所以這個時候就出現(xiàn)了一些前端的mock工具。這些工具能夠確保前端在開發(fā)的過程中的模擬數(shù)據(jù)可控知染，且在使用之后不會對前端或者服務端的流程有任何影響肋僧，使得前后端有一個明確的分界點。常見的前端mock工具有RAP控淡，YApi嫌吠，NEI，EasyMock逸寓，Mock-API等居兆，他們都是基于Mock.js來進行數(shù)據(jù)模擬的，并在此基礎上做了不同的擴展竹伸。

1.RAP

??RAP是阿里團隊出的一款WEB接口管理工具泥栖，幫助開發(fā)人員有效的管理接口文檔。它是一個企業(yè)級應用勋篓，包括阿里集團在內(nèi)的三百五十多個企業(yè)都在使用RAP管理重要的接口文檔吧享。
??下面是一張RAP的一張開發(fā)流程圖，其實這張圖也基本適用于所有使用mock工具的項目譬嚣。

RAP開發(fā)流程圖

tips：網(wǎng)上有大牛也提供了AngualrJS版的RAP插件对碌，詳見：https://github.com/xiaomaojames/ng-rap

2.YApi

??YApi是去哪兒網(wǎng)移動架構組開發(fā)的一個開源項目，可以幫開發(fā)者輕松創(chuàng)建發(fā)布蒿偎，維護API朽们，相比較RAP，它有以下優(yōu)點：
??（1）YApi具有扁平化的權限設計诉位，可以滿足大型企業(yè)級的項目管理骑脱，在YApi里超級管理員擁有最高權限，并將權限分配給若干組長不从，超級管理員只需管理組長惜姐，組長又分為分組組長與項目組長，分組組長在創(chuàng)建項目時可以指定項目組長椿息，項目組長可以邀請組員參與項目歹袁，共享接口數(shù)據(jù)。
??（2）YApi在新建項目的時候寝优，還可以快速導入其他格式的接口數(shù)據(jù)条舔，方便快速添加接口。目前支持postman乏矾，swagger孟抗，har數(shù)據(jù)導入迁杨。當然首先你需要先在以上三個接口管理平臺上導出接口數(shù)據(jù)，然后再將導出的數(shù)據(jù)導入到YApi平臺上凄硼，它會自動解析文件铅协，并生成相應的接口。以導入swagger數(shù)據(jù)為例：首先要生成 JSON 語言編寫的 Swagger API 文檔文件摊沉，例如這樣的數(shù)據(jù)http://petstore.swagger.io/v2/swagger.json狐史，我們可以將其內(nèi)容復制到 一個JSON 文件中，然后打開yapi平臺说墨，進入到項目頁面骏全，點擊數(shù)據(jù)管理，選擇相應的分組和swagger導入方式尼斧，選擇剛才的文件姜贡，就可以開始導入JSON數(shù)據(jù)，最后會生成相應的接口棺棵。這個功能比較適合一些成熟的接口楼咳，這些接口從一些接口平臺導出之后不會再變更的情況下會很方便，同時也適合一些項目的遷移律秃。
??（3）YApi具有接口文檔管理的功能爬橡，在傳統(tǒng)后端的接口開發(fā)過程中，接口開發(fā)和接口測試是必不可少的棒动，但是接口文檔因為沒有跟開發(fā)和測試聯(lián)系到一起糙申，所以一旦在開發(fā)或者測試的過程中有改動，那么維護接口文檔將是一件很繁瑣的事情船惨。YApi將接口文檔和測試通過單一數(shù)據(jù)源連接到一起柜裸，如果接口改動，因為改的是單一數(shù)據(jù)源粱锐，就不會出現(xiàn)更新不及時的情況疙挺，并且YApi的模擬接口還可以關聯(lián)接口文檔，所以當后端在開發(fā)的過程中調(diào)整了接口文檔中的定義時怜浅，前端開發(fā)者就能及時作出改動铐然。

??YApi在一定程度上來說，比RAP的功能更加完善恶座，也更加強大搀暑，它提供接口文檔管理，接口數(shù)據(jù)模擬（Mock）跨琳，接口調(diào)試自点，自動化測試等一系列功能。
??雖然如此脉让，然而最厲害的不一定是最合適的桂敛，在數(shù)金功炮，我們通常使用swagger來管理接口，雖然YApi支持導出swagger格式的數(shù)據(jù)术唬，并解析成mock接口薪伏，但是它是通過將swagger文檔導出成json格式的文件之后，再將這個文件解析出來碴开，這樣就會產(chǎn)生一個問題毅该，當后端同學改動了swagger上的現(xiàn)有接口，亦或是又增加了一些接口潦牛，就需要再重新導出一份swagger文檔的json文件，然后再導入YApi平臺解析一次挡育，這樣的操作既冗雜又繁瑣巴碗，所以對于我們使用swagger來管理接口的團隊來說，如果某個mock工具能夠有“一鍵同步swagger”的操作即寒，那將會是減輕不少的工作量橡淆。巧合的是，Easy Mock剛好能解決我們這個問題母赵。

四逸爵、Easy Mock的介紹

??Easy Mock是大搜車前端團隊開發(fā)的一個可視化，能快速生成模擬數(shù)據(jù)的在線mock服務凹嘲，他沒有RAP那么有限制性师倔，也沒有YApi那么完善的功能，但是對于我們來說周蹭，它剛剛好趋艘，在對比了現(xiàn)有的幾種前端開源mock工具后，我們決定選用Easy Mock作為我們團隊的前端模擬工具凶朗，并將它部署在內(nèi)網(wǎng)瓷胧。
??與其他的mock工具一樣，Easy Mock基于Mock.js棚愤，能夠使用簡單的語法創(chuàng)建出模擬數(shù)據(jù)搓萧，如果你還不了解mock.js的語法，可以訪問其官網(wǎng)http://mockjs.com宛畦，除了支持mock.js的基本語法之外瘸洛，Easy Mock還做了一些擴展，例如：

1.支持簡單的Function刃永，可以實現(xiàn)邏輯判斷货矮，并對結果進行動態(tài)的返回。
2.Easy Mock在每個mock接口里面注入了一些express的變量斯够，這些變量就是原來 req 上的幾乎所有的屬性囚玫，如_req.header喧锦、_req.query等，有了這些變量抓督，就可以根據(jù)用戶調(diào)用mock接口時傳進來的一些信息做非常動態(tài)寫響應式返回燃少。
3.Easy Mock支持restful風格的接口，例如“/merchandise/:id”铃在，我們可以通過_req.params.id 來獲取到參數(shù)的值阵具。

??除了在mock.js語法的基礎上做了擴展之外，Easy Mock的另一大優(yōu)勢是可以根據(jù)swagger中定義的實體的屬性類型生成對應的mock數(shù)據(jù)定铜。由于我們公司大多使用swagger來管理接口阳液，所以在定義好接口之后，可以先利用接口文檔部署一套只有數(shù)據(jù)結構揣炕，沒有真正實現(xiàn)功能的swagger接口帘皿，然后通過swagger文檔地址，就可以在Easy Mock中生成一個包含此文檔地址數(shù)據(jù)的模擬接口畸陡，此操作支持swagger1.0和swagger2.0的語法鹰溜。
??由于我們在生成的過程中填入的是一個swagger文檔的地址，不是一個靜態(tài)的json文件丁恭，所以當swagger的接口有更新的時候曹动，Easy Mock支持“一鍵同步”，且這個同步是智能的牲览，它會先檢測這個接口是否有變動墓陈，如果有則對這個接口做覆蓋式的更新，如果沒有竭恬，則不會更新跛蛋。這一特性對于不斷有需求進來，不斷迭代的項目組非常的友好痊硕，這也是我們選擇這個工具的非常重要的一個原因赊级。
??通過Easy Mock來進行數(shù)據(jù)模擬對流程不會產(chǎn)生任何影響，只是通過swagger接口文檔來生成模擬接口岔绸，需要swagger注解做的更加嚴謹和完善理逊，這樣在mock接口中才能看到更加清晰的這個接口的功能，用法等等信息盒揉。

Easy Mock的使用方法
??下面我們簡單的講一下Easy Mock的使用方法晋被，以使用swagger的項目為例。如果你沒有在內(nèi)網(wǎng)部署的話刚盈，可以進官網(wǎng)羡洛，注冊一個賬號，然后開啟你的神奇的swagger+Easy Mock之旅藕漱，新注冊的賬號會自動生成一個演示項目,里面創(chuàng)建了多種的Mock類型欲侮，對于新手來說崭闲，可以先看一下這個演示項目，在此基礎上進行編輯威蕉。如果你想創(chuàng)建自己的項目刁俭，可以跟著以下的步驟來做：
（1）創(chuàng)建項目
??點擊主頁右下角的藍色加號按鈕，進入項目創(chuàng)建界面

創(chuàng)建項目

（2）填寫基本信息
??因為我們要基于swagger來創(chuàng)建這個項目韧涨，所以注意要在swagger Docs Api里面填入你項目的swagger Docs Api的地址（不用swagger的可以跳過填swagger Docs Api這一欄）牍戚。

填寫基本信息

??注意：項目swagger Docs Api的地址并不是項目swagger的地址，一個通用的獲取swagger Docs Api地址的方法就是虑粥，將swagger的URL中項目名只有的部分替換成/v2/api-docs,比如地址為https://xxxx.xxxx.com/projectname/swagger-ui.html替換后的地址為https://xxxx.xxxx.com/projectname/v2/api-docs如孝，這樣就能得到swagger Docs Api的地址了。
??基本信息填寫完畢后舀奶，點擊創(chuàng)建按鈕暑竟，即可創(chuàng)建成功。接下來回到項目頁面就可以看到我們創(chuàng)建的項目

創(chuàng)建成功

（3）查看接口信息
??點擊上圖的項目地址育勺，進去之后，你將看到Easy Mock將你swagger中的接口都拉下來了罗岖。

創(chuàng)建好的項目

POST請求

POST請求

{
data:{
  default:'hah',
  _req:function({_req}){
    return _req
  },
  name:function({_req,Mock }){
    if(req.query.name === 'nk'){
      return _req.query.name + '_' +Mock.mock('@name')
    }else{
      return this.default
    }
  }
}

??除了響應式的返回寒匙，Easy Mock還支持自定義的響應狀態(tài)，通過在返回的結構中添加_res對象躏将，可以給返回添加定制信息锄弱，_res對象里面包含_res.status，_res.cookies祸憋，_res.headers以及_res.data等会宪，其中_res.data是在_res.status不為200的時候返回的，用來替代正常返回體里面的data蚯窥。
??至此掸鹅，我們運用以上簡單的四個步驟就可以基于swagger接口創(chuàng)建一個EasyMock的項目。如果swagger接口有更新的話拦赠，只需要點擊項目右上角的按鈕巍沙，就可以一鍵同步。
??項目創(chuàng)建好了之后荷鼠，就到了使用的環(huán)節(jié)了句携，想要使用mock的接口，而不改變業(yè)務代碼的邏輯颊咬，則只需要在發(fā)請求的時候用代理工具务甥，例如charles，fiddler等喳篇，將對應的請求Map Remote到我們的mock接口就可以了敞临。

五、小結

??在前后端的聯(lián)調(diào)過程中麸澜，mock工具并不是必須存在的挺尿，甚至有很多同學覺得它的存在并沒有帶來任何價值，屬于“多此一舉”的操作，這本來就是很難界定其好與壞编矾，或許對于一些小的項目來說熟史，的確幫助沒有那么明顯，但是一旦項目比較繁瑣窄俏，那么前端接口mock將會給開發(fā)者帶來很多的便利：前端開發(fā)者不需要等待后端接口出來之后再調(diào)試頁面蹂匹；前端開發(fā)者可以根據(jù)自己的意愿模擬出各種不同的返回結果來調(diào)整頁面的顯示等等都是顯而易見的便利。
??這里提供一個大搜車內(nèi)部推薦的Easy Mock應用流程凹蜈，可供大家在使用Easy Mock的過程中參考：

• 需求限寞，可行性評估
• 需求評審，通常是交互稿或者原型
• 交互或者設計評審仰坦，確認邏輯細節(jié)
• 開發(fā)給出排期履植，包括（接口定義、前端開發(fā)悄晃、聯(lián)調(diào)玫霎、提測、測試時間）
• PM或架構師系統(tǒng)和架構分析產(chǎn)出
• 服務端設計數(shù)據(jù)庫和接口妈橄，給出詳細的接口定義
• 接口評審庶近，完成后部署開發(fā)服務器，會自動根據(jù)swagger定義通過easy-mock服務生產(chǎn)對應的mock項目眷蚓。
• 前后端分別開發(fā)拦盹，前端直接使用easy-mock提供的數(shù)據(jù)構建前端頁面。
• 聯(lián)調(diào)溪椎，測試，運維發(fā)布恬口。
  ??由于內(nèi)網(wǎng)Easy Mock剛剛搭建好校读，我們團隊也是在這個過程中不斷的學習，所以如果大家在使用的過程中有發(fā)現(xiàn)任何問題或者疑問祖能，希望可以及時與我們聯(lián)系歉秫，我們一定會盡快給大家答復。

六养铸、其他工具

??最后雁芙，如果我們的工具，以及上面提到的RAP和YApi都不能滿足您的要求的話钞螟，您也可以訪問以下的鏈接來找到你心儀的工具：
NEI：網(wǎng)易的api接口管理平臺兔甘，功能很完善，但是不開源鳞滨。
apizza：在線模擬調(diào)試洞焙，快速生成api文檔，導出離線版文檔，功能完善澡匪，不開源熔任。
AMP：github的mock開源項目。
Mockbin：可以從HAR文件生成一個模擬樁唁情。
Doclever：編寫REST接口文檔疑苔，版本控制，生成測試數(shù)據(jù)甸鸟。
apiary：Powerful API Design Stack. Built for Developers惦费。
mocky：無需登錄，直接生成一個resposne哀墓，url不固定趁餐。
mock-api：一個網(wǎng)絡服務，用來生成HTTP接口的模擬返回值篮绰。