使用RAP2和Mock.JS實(shí)現(xiàn)Web API接口的數(shù)據(jù)模擬和測(cè)試

最近一直在思考如何對(duì)Web API的其接口數(shù)據(jù)進(jìn)行獨(dú)立開(kāi)發(fā)的問(wèn)題堂污,隨著Web API的越來(lái)越廣泛應(yīng)用亡问,很多開(kāi)發(fā)也要求前端后端分離菱属,例如統(tǒng)一的Web API接口后汞幢,Winform團(tuán)隊(duì)驼鹅、Web前端團(tuán)隊(duì)、微信小程序或者APP團(tuán)隊(duì)大家可以同步開(kāi)發(fā),在最初約定一些接口的輸入JSON數(shù)據(jù)和輸出JSON數(shù)據(jù)输钩,但是隨著項(xiàng)目的進(jìn)度開(kāi)展豺型,這些數(shù)據(jù)結(jié)構(gòu)一直有所變化,那么我們模擬的JSON數(shù)據(jù)格式也需要協(xié)同變化买乃,但是很不幸既然大家忙著開(kāi)發(fā)触创,接口協(xié)調(diào)的事情肯定優(yōu)先級(jí)沒(méi)那么高,即使每次記得協(xié)調(diào)接口數(shù)據(jù)为牍,也不一定能夠完全一致。

在Web API端也就是后端沒(méi)有完全做好的情況下岩馍,我們不可能給出所有接口的輸入輸出JSON格式碉咆,那么我們是否可以考慮采用折中模擬數(shù)據(jù)接口的方式來(lái)提供,并且能夠提供比較易讀蛀恩、易維護(hù)的處理方式呢疫铜?答案是肯定有的,結(jié)合RAP2和Mock.js兩者的特點(diǎn)双谆,可以較為方便的模擬出我們需要接口的URL壳咕、輸入?yún)?shù)、輸出參數(shù)等信息顽馋。

RAP2是一個(gè)Web接口管理工具谓厘,開(kāi)源免費(fèi),接口自動(dòng)化寸谜,MOCK數(shù)據(jù)自動(dòng)生成竟稳,自動(dòng)化測(cè)試,企業(yè)級(jí)管理熊痴。

Mock.js的出現(xiàn)解決了前端離開(kāi)后端就沒(méi)法請(qǐng)求數(shù)據(jù)的問(wèn)題他爸,但也出現(xiàn)了新的問(wèn)題,就是在切換生產(chǎn)環(huán)境的時(shí)候果善,模擬的數(shù)據(jù)可能和接口又發(fā)生不同步的情況诊笤。

RAP2是一個(gè)新的解決方案,將前端后端拉倒一個(gè)團(tuán)隊(duì)倉(cāng)庫(kù)中巾陕,共享一個(gè)倉(cāng)庫(kù)讨跟,無(wú)論是URL地址,還是請(qǐng)求需要的參數(shù)惜论,在團(tuán)隊(duì)倉(cāng)庫(kù)中雙方都可以管理许赃,并且可以記錄團(tuán)隊(duì)成員修改了哪些接口,整合到生產(chǎn)環(huán)境的時(shí)候馆类,可以比較完美的切換混聊,同步性較好!

相關(guān)網(wǎng)站資源:

http://mockjs.com/ mock.js網(wǎng)址
http://rap2.taobao.org/ RAP2網(wǎng)址
https://github.com/thx/rap2-delos RAP2官方文檔
https://github.com/nuysoft/Mock/wiki/Syntax-Specification mock.js語(yǔ)法規(guī)范文檔

1、RAP2創(chuàng)建接口

打開(kāi)網(wǎng)站http://rap2.taobao.org/ 句喜,注冊(cè)一個(gè)用戶(hù)賬號(hào)预愤,并創(chuàng)建自己的模塊和接口,如下所示

image

默認(rèn)有一個(gè)示例接口指引我們做相關(guān)的參數(shù)或者響應(yīng)內(nèi)容

對(duì)每個(gè)參數(shù)咳胃,都可以使用Mock規(guī)則進(jìn)行生成值植康,如下界面所示

image

除了示例,我們也可以創(chuàng)建自己的模塊和接口展懈,如下所示我們創(chuàng)建一個(gè)用戶(hù)管理的模塊销睁,以及兩個(gè)接口。

獲取用戶(hù)的接口定義如下所示存崖。

image

這個(gè)URL地址是我們邏輯上的相對(duì)地址冻记,實(shí)際在使用的時(shí)候,我們加上一個(gè)基地址就可以了来惧,在RAP2 它也是一個(gè)相對(duì)地址冗栗,測(cè)試接口的地址也是加上一個(gè)基礎(chǔ)地址,這樣我們實(shí)際開(kāi)發(fā)的時(shí)候供搀,把這部分基礎(chǔ)地址替換為生產(chǎn)環(huán)境的地址即可順利切換過(guò)去了隅居。

image

這個(gè)接口實(shí)際返回的JSON數(shù)據(jù)格式就是我們約定好的JSON格式了,如果我們有變化葛虐,大家參考這個(gè)中間的平臺(tái)就可以了胎源,溝通時(shí)比較方便,也可以對(duì)比那些字段參數(shù)變化調(diào)整了挡闰,這樣前后端就有了一個(gè)參考的中間平臺(tái)乒融,一致性較好。

2摄悯、接口參數(shù)定義和Mock變量使用

那么這些JSON數(shù)據(jù)是如何來(lái)的赞季,我們其實(shí)是填寫(xiě)了一些變量,讓它自動(dòng)生成的數(shù)據(jù)的奢驯,這個(gè)也是Mock.js的功勞吧申钩。RAP2集成了MockJS的很多變量使用,參考著使用就可以構(gòu)建很多不一樣的數(shù)據(jù)瘪阁,非常方便撒遣。

下面列出我的一些輸入、輸入的變量?jī)?nèi)容管跺。

輸入的參數(shù)义黎,定義如下:

image

響應(yīng)的輸出參數(shù)如下定義。

image

獲得的輸出自動(dòng)生成的JSON數(shù)據(jù)如下所示豁跑。

image

這個(gè)就是我們使用Mock變量的好處廉涕,自動(dòng)根據(jù)規(guī)則填充,上面我使用了各種變量來(lái)定義數(shù)據(jù),如果你需要了解Mock的變量狐蜕,可以結(jié)合Mock的變量來(lái)測(cè)試即可宠纯。具體參考下面說(shuō)明。

http://mockjs.com/examples.html

上面鏈接列出了Mock的兩項(xiàng)定義:數(shù)據(jù)模板定義和數(shù)據(jù)占位符定義层释,可以根據(jù)情況用不同的定義婆瓜。我更側(cè)向于使用后者,方便快捷贡羔。

RAP2給前后端開(kāi)發(fā)者一種更好更透明的協(xié)同開(kāi)發(fā)方式廉白,一個(gè)負(fù)責(zé)維護(hù)接口、一個(gè)負(fù)責(zé)參考修改調(diào)用乖寒,大家相互配合蒙秒,其樂(lè)融融。
關(guān)于RAP2的功能好像還有很多宵统,不過(guò)我們使用它最主要的目的是解決模擬API接口和協(xié)同性的問(wèn)題,這個(gè)大原則是它的主要目的覆获,基于RAP2和Mock.js的結(jié)合马澈,我們可以解放頻繁溝通而得不到接口一致性問(wèn)題的問(wèn)題,從而實(shí)現(xiàn)更好從調(diào)試環(huán)境到生產(chǎn)環(huán)境的切換弄息。

甚至更好的方案是我們 在Web API接口開(kāi)發(fā)的初期痊班,先花點(diǎn)功夫來(lái)定義好所有的接口輸入輸出,整理一個(gè)大家認(rèn)為比較好的接口規(guī)范后摹量,再開(kāi)始Web API的編碼涤伐,這樣肯定后期開(kāi)發(fā)是事半功倍,而且前端也可以很快對(duì)接缨称。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末凝果,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子睦尽,更是在濱河造成了極大的恐慌器净,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件当凡,死亡現(xiàn)場(chǎng)離奇詭異山害,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)沿量,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)浪慌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人朴则,你說(shuō)我怎么就攤上這事权纤。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵妖碉,是天一觀的道長(zhǎng)涌庭。 經(jīng)常有香客問(wèn)我,道長(zhǎng)欧宜,這世上最難降的妖魔是什么坐榆? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮冗茸,結(jié)果婚禮上席镀,老公的妹妹穿的比我還像新娘。我一直安慰自己夏漱,他們只是感情好豪诲,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著挂绰,像睡著了一般屎篱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上葵蒂,一...
    開(kāi)封第一講書(shū)人閱讀 52,441評(píng)論 1 310
  • 那天交播,我揣著相機(jī)與錄音,去河邊找鬼践付。 笑死秦士,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的永高。 我是一名探鬼主播隧土,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼命爬!你這毒婦竟也來(lái)了曹傀?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤饲宛,失蹤者是張志新(化名)和其女友劉穎卖毁,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體落萎,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡亥啦,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了练链。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片翔脱。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖媒鼓,靈堂內(nèi)的尸體忽然破棺而出届吁,到底是詐尸還是另有隱情错妖,我是刑警寧澤,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布疚沐,位于F島的核電站暂氯,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏亮蛔。R本人自食惡果不足惜痴施,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望究流。 院中可真熱鬧辣吃,春花似錦、人聲如沸芬探。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)偷仿。三九已至哩簿,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間酝静,已是汗流浹背卡骂。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留形入,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓缝左,卻偏偏與公主長(zhǎng)得像亿遂,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子渺杉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容