我在向小伙伴推薦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ù),如何無痛對接后端接口才是最終的目的。