rap2使用姿式——前端、後端、測試必看（多gif圖）

背景

rap2做爲一款阿里媽媽開源的http接口管理工具，被你們普遍使用。誠然，這款工具確實存在一些bug，可是在市面上主流的開源http接口管理工具當中，不失爲一款優秀的工具。它的許多特性,包括團隊管理、接口倉庫、插件、mock數據、postman導出等，可使咱們很方便的管理接口文檔以及有效地提升先後端協做的效率。

概念 / 詞彙

• 倉庫：即接口文檔放置的倉庫，能夠包含多個接口文檔
• 協同倉庫：Mock服務協同倉庫，在當前倉庫中沒法匹配到接口時，將會從協同倉庫中尋找
• 團隊：團隊可包含多個倉庫，用戶可加入多個團隊
• 插件：用於實現生成Mock數據、攔截真實I/O請求以Mock數據替換等功能的插件
• 平臺API：以開放API形式將接口文檔、Mock數據等內容，提供給外部調用
• Mock模板：Mock.js規則模板，用於生成Mock數據，模板中可定義豐富的規則以適應數據的按需隨機性
• Mock數據：經過Mock模板生成的最終Mock數據

功能介紹

首頁

在上圖中，左邊是你所屬倉庫的全部修改歷史。讓背鍋有跡可循。右邊則分別列出的是你擁有的倉庫和加入的倉庫。在這裏你能夠經過點擊藍字跳轉到相應的倉庫、模塊、接口。

倉庫

在這裏分別能夠查看本身所屬的倉庫和全部的倉庫。相比於本身加入的倉庫，對於本身擁有（建立）的倉庫，除了能夠擁有編輯功能以外，你還能夠刪除它。

編輯倉庫

建立倉庫

團隊

經過團隊功能能夠很方便地進行成員管理與權限控制。

接口

這裏主要是一些外部接口。經過這些接口能夠導出接口文檔數據以及用於前端mock數據。關於mock方法，稍後會在使用場景中介紹。

狀態

經過這個頁面，咱們能夠看到整個系統的使用概覽。

接口管理(重點)

在進入一個倉庫以後，咱們會看到以下界面：

這裏要注意的是，若是咱們是要編輯接口的基本信息，好比url、類型、狀態碼，就點擊左邊的鉛筆（編輯按鈕）。在這裏url必定要用相對路徑；若是要修改接口的請求和響應信息，則點擊右邊的綠色編輯按鈕。點擊預覽，能夠展現或者隱藏接口的請求或者響應模板以及數據。下面咱們來演示如何建立一個經過email獲取學生詳情的接口。該接口使用GET方法，url是/api/v1/students?email=,響應則是json:

{
	"name": "秀蘭",
	"age": 12,
	"city": "深圳",
	"province": "廣東",
	"avatar": "http://dummyimage.com/200x100/4A7BF7&text=Hello123123",
	"intro": "我是一個來自深圳的朋友"
}
複製代碼

接着修改請求和響應模板： rap2支持新建和導入兩種方式，咱們先來看看新建請求參數。

這裏須要注意的是，對於GET方法默認使用Query Params;而對於POST方法則默認使用Body Params。固然在某些狀況下，一些接口會經過header傳遞一些參數。我建議你們最好是遵循http規範來選擇參數類型。 再來看看經過導入的方式，完成響應模板的製做。

對於後端人員來講，若是經過某些http客戶端工具(如postman)進行接口調試，使用這種方式無疑是最省力的一種。

---

看到這裏好像大功告成了。這東西這麼簡單還要你來告訴我？ too simple,sometimes naive. 若是僅僅止步於此，rap2只是實現了接口管理的工做，對於先後端協做的效率提高並無到最大化。對於前端開發者而言，他們仍是須要手動構造假數據。這樣既繁瑣、易出錯以及數據覆蓋範圍窄。所以rap2結合了mockjs，提供了mock數據的功能。只要在參數上設置好生成規則和初始值，即可以生成大量的符合規則的隨機數據。前端開發者只須要將整個倉庫對應的mockjs插件導出，而後引用到本身的項目當中，就能夠完徹底全地擺脫後端人員愉快地開發了。具體使用場景將會在下節中給出，在本節當中，將會初步演示mock效果。

在上圖中，姓名、年齡、省、市甚至頭像均可以mock。這樣就能夠在開發的時候發現諸如文本過長致使ui錯亂的bug，而不須要苦苦哀求後端爸爸造數據了。

mock模板語法:github.com/nuysoft/Moc…

mockjs官網模板示例：mockjs.com/examples.ht…

使用場景

在這裏例舉三個場景，分別對應後端、前端與測試人員。

後端

對於後端開發來講，主要負責模塊的劃分以及接口文檔的編寫。至於倉庫管理以及mock模板規則，具體由誰負責可能須要先後端協商。

前端

如今經過一個demo來演示前端如何結合rap2快速實現mock數據的功能。

1. 經過vue-cli初始化一個項目 rap2-vue-demo
2. 安裝axios和mockjs；

   npm intsall axios --save
   npm intsall mockjs --save
   複製代碼

3. 導出rap2倉庫模板

這裏多是rap2的bug，直接用瀏覽器打開會亂碼。用控制檯的Preview功能粘貼能夠解決這個問題。

4. 在src目錄下創建文件夾mock;mock文件夾下新建index.js、mock-template.js。代碼以下:

   // src/mock/index.js
   const Mock = require('mockjs');
   require('./mock-template');
   window.Mock = Mock;
   
   (function(RAP, Mock) {
     for (let repositoryId in RAP.interfaces) {
   	for (let itf of RAP.interfaces[repositoryId]) {
   	  Mock.mock(itf.url, itf.method.toLowerCase(), settings => {
   		console.log(`Mock ${itf.method} ${itf.url} =>`, itf.response);
   		return Mock.mock(itf.response);
   	  });
   	}
     }
   })(window.RAP, window.Mock);
   複製代碼

   // src/mock/mock-template.js
   (function() {
     let repositoryId = 42;
     let interfaces = [{...}] // 省略
     let RAP = window.RAP || {
   	protocol: 'http',
   	host: 'rapapi.tool.wezhuiyi.com',
   	interfaces: {}
     };
     RAP.interfaces[repositoryId] = interfaces;
     window.RAP = RAP;
   })();
   複製代碼

原理其實就是將rap2倉庫當中對應的mock模板導出，而後將它做爲參數賦值給Mock對象，來完成Mock對象的構造。在這個demo當中是簡單粗暴地將mock模板代碼複製到src/mock/mock-template.js當中。我的認爲最好的作法應該是遠程引入rap2插件的js，這樣接口若是有變更的話，前端無需任何改動。

5. 在main.js中引入mockjs,以及將axios寫入Vue對象原型

   import Mock from './mock';
   import axios from 'axios';
   
   Vue.config.productionTip = false;
   Vue.prototype.$http = axios;
   ...
   複製代碼

6. 組件中使用

   mounted() {
       this.$http.get("/api/v1/students").then(res => {
       console.log(res.data);
       this.student = res.data;
       });
   },   
   複製代碼

7. 效果演示

測試

對於測試人員來講，使用rap2能夠經過「導出Postman Collection」功能，將倉庫的全部接口一鍵導入至postman。而後基於此快速構建接口層面的自動化測試。具體實踐方法能夠參考這篇文章：juejin.im/post/5c763a…