RAP一種更高效的前后端接口對接解決方案

我在向小伙伴推薦RAP的時候,有的小伙伴會覺得這個是個玩好意,幫助很大,而另一部分有使用過Mock.js的會說,Mock就挺好了啊。于是就有了這篇文章,一是向大家推廣,二是作為一個快速入門的教程,網(wǎng)上對RAP的教程太少了。

RAP是一個Web接口管理工具,開源免費,接口自動化,MOCK數(shù)據(jù)自動生成,自動化測試,企業(yè)級管理。阿里媽媽MUX團隊出品!阿里巴巴都在用!

使用情景

以往前后端分離開發(fā)過程中,會出現(xiàn)這種對話

前端:接口寫好了沒,我著急用,沒這個接口我沒法測功能啊。
后端:別催啊,我數(shù)據(jù)庫都沒寫好,接口給你也沒用啊。
=>Mock.js出現(xiàn)后
后端:你先要哪個接口?
前端:不用,我自己都虛擬好了數(shù)據(jù)了
···
后端:這就是你做的接口,怎么這么多跟我寫的不一樣,這個參數(shù)也不對啊

Mock.js的出現(xiàn)解決了前端離開后端就沒法請求數(shù)據(jù)的問題,但也出現(xiàn)了新的問題,前端在生產(chǎn)環(huán)境中編寫的Mock虛擬數(shù)據(jù)代碼,在后期與后端對接時,面對著如何處理這些代碼的問題,項目切換,又得重新思考Mock代碼編寫。而且,就算前端按照前期和后端約定好的規(guī)則編寫參數(shù),響應(yīng)數(shù)據(jù)等,還是無法保證后端會不會在寫代碼過程中,出現(xiàn)一些手滑的操作,可能他自己都不知道。
而現(xiàn)在,RAP是一個新的解決方案,將前端后端拉倒一個團隊倉庫中,共享一個倉庫,無論是URL地址,還是請求需要的參數(shù),在團隊倉庫中雙方都可以管理,并且可以記錄團隊成員修改了哪些接口,看最后會是誰背鍋··手動滑稽。
前后同一套接口模板,RAP一種更高效的前后端協(xié)作方式

RAP五天前發(fā)布了RAP2,相對于之前的版本,在界面和操作上做了很大的優(yōu)化,接口初步體驗也更穩(wěn)定了寫,
不得不吐槽上一個版本RAP,各種靈異操作。
####推薦理由
  - 支持mock.js語法:RAP本身基于mcok.js
  - 支持接口管理:可管理url地址,不同模塊分類。
  - 支持團隊協(xié)作:擁有團隊倉庫
  - 支持歷史修改操作查看:可查看接口修改情況,但不支持操作回溯。
  - 接口共享:不需要重復(fù)編寫接口
  - 自動化測試:一鍵測試接口情況
  - JS插件
####文章目錄
    - 界面介紹
    - RAP語法規(guī)則
    - RAP使用
    - 使用建議

手摸手使用教程

跳過部分:注冊=>登錄 這里又得吐槽一下上一個版本登錄,登錄后一段時間就得重新登錄,驗證碼賊煩,新版本已改善。

界面介紹

  • 導(dǎo)航欄界面


    • 首頁:登錄后展示操作記錄,僅為記錄,無回溯功能
    • 倉庫:個人倉庫,團隊倉庫列表及入口處,可以在此處新建個人倉庫
    • 團隊:展示已加入團隊,可新建團隊,進入團隊中可查看團隊倉庫
    • 接口:一些接口使用信息
    • 狀態(tài): RAP服務(wù)使用狀態(tài)數(shù)據(jù)圖表展示,主要是用戶數(shù)量增長,倉庫活躍度排名
  • 倉庫界面 個人倉庫和團隊倉庫都一樣


    • 藍色 :倉庫名,為倉庫入口,點擊可進入編輯詳情
    • 黑色:生成該倉庫js 插件文件
    • 紅色:編輯倉庫信息
    • 個人倉庫有刪除按鈕,團隊倉庫沒有,只有刪除團隊選項。
  • 倉庫信息編輯界面


    • 添加倉庫成員,修改倉庫名稱及描述
    • 協(xié)同倉庫,可以將其他倉庫的接口進行共享到當(dāng)前編輯的倉庫。注:每個倉庫,每個接口都有它獨特的ID,ID為自動生成,無法手動修改。
  • 倉庫設(shè)置界面


    • 編輯:同上倉庫信息編輯
    • 插件:接口插件使用詳細方式,相當(dāng)于教程了
    • 數(shù)據(jù):整個倉庫的所有信息,包括上面說的倉庫ID ,接口ID等,為JSON數(shù)據(jù)
    • 測試:測試當(dāng)前編寫后接口響應(yīng)內(nèi)容,包括所有已編寫接口。
    • 新建模塊:重新建一個功能塊,相當(dāng)于一級目錄
    • 新建接口:在此處新建接口,點擊后會出現(xiàn)彈框,填寫接口名稱,URL
    • 激活接口可編輯狀態(tài):
      • 新建:新建請求參數(shù)或響應(yīng)內(nèi)容
      • 導(dǎo)入:通過JSON導(dǎo)入?yún)?shù)設(shè)置
      • 預(yù)覽:編輯內(nèi)容發(fā)生改變時,Mock數(shù)據(jù)也會發(fā)生改變
  • 新建參數(shù)界面


    • 名稱:參數(shù)名
    • 類型:描述參數(shù)類型
    • 生成規(guī)則:填寫Mock語法規(guī)則
    • 初始值:初始值
    • 簡介:
RAP語法規(guī)則

RAP是基于 MOCK的,所以語法上是跟MOCK是一樣的,只是填寫位置發(fā)生了改變,

Mock.js寫法
變量名     備注
id|1-100     

// 表示id從100開始,每次加1

名稱 類型 生成規(guī)則 初始值 生成結(jié)果 簡介
id string 2-10 ass assassass 字符串重復(fù)2-10次不等
name string @order[3,13,1,3] 2 在數(shù)組中隨即選取一個
datetime string @datetime("yyMddd") 204040722 生成時間具體格式請查看Mock文檔
re RegExp /201[7-7][0-1][0-9][0-2][0-9]/ 20170706 通過正則數(shù)據(jù)

以下圖片列出了本人記錄的常用書寫方式,以及生成的數(shù)據(jù)格式


RAP使用

  • 接口形式:http://rap2api.taobao.org/app/mock/508/GET/login
    其中508為倉庫ID,不同倉庫可以通過添加協(xié)同倉庫達到接口復(fù)用的作用,可添加多個ID,不同ID逗號隔開。
  • 使用方式可查看接口

使用建議及技巧

  • 最好在團隊中新建倉庫,拉上后端的小伙伴一起RAP才是利器。
  • 協(xié)同倉庫是一個很有用的功能,要善于運用,相當(dāng)于倉庫復(fù)制。
  • 接口詳情最好寫一些需要注意的內(nèi)容,給別人看的。

總結(jié)

RAP給前后端開發(fā)者一種更好更透明的協(xié)同開發(fā)方式,前端也可以讓自己項目代碼中不出現(xiàn)虛擬數(shù)據(jù)這種無用代碼,項目切換以及迭代過程中RAP讓接口更加靈活,不要僅僅滿足于前端可以寫幾個虛擬數(shù)據(jù),如何無痛對接后端接口才是最終的目的。

參考文檔
Mock.js文檔
RAP2官網(wǎng)
RAP用戶手冊【更新2015/7/21】

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。