前端開發時自己做樁資料(假資料)
阿新 • • 發佈:2019-02-06
Deprecated: 已使用第三方mock-server,此DIY的方式就不用了,算作是一次學習吧。
某些功能開發時(以及後續維護時)嚴重依賴api返回的資料。不但要求資料呈現某特定狀態,特別是當前開發功能要修改資料時,費勁巴拉弄好的資料,點一下按鈕,就耗光了。還得再來一次……大費周章。於是,需要一個“樁資料”。(此資料不是真正從api請求來,而是自己在“偷偷”在本地提供的)。有個強大的json-server,據考察只支援REST API,不適宜。故自己簡單實現了一個機制,可以實現樁資料
用法
- 將你所請求api的某次“合意”的資料儲存成js檔案,形如:
// 將某次請求的結果以key-value的形式賦給window.stub // http://api.domain.com/index.php?r=demand/index&demand_id=1 window.stub = { "demand/index": // 此key即為api中的r引數 { succ: "1", name: "a", tel: "123" ... } }
- 在src/iscripts/global/test/stub/stub.js中 @@include此js
注:stub.js中只能有一個@@include,其他都註釋掉。否則,後邊的會覆蓋掉前面的,給window.stub賦值 - gulp --stub=1
- 開始除錯吧
原理:
將統一封裝的jquery的ajax方法呼叫前,加了一個判斷。如果所請求的介面有stub資料,則應用改資料(而不去服務端請求了)。
故,此方法僅能一定程度上模擬真實情況,重在模擬請求資料,但不能寫資料
說明
- stub並不一定能對你初次開發時有多大用處,只對後續你再想使用此資料時用處比較大。尤其你開發的功能會“改變資料”時,此方法可以省去資料過快被消耗掉
- 如果開發的功能需要順次請求多個介面(注意是不同介面哦),可以給stub賦多個key-value,參考例子:data/demand_index/pay.js
- 另,現在已經有幾個資料,或可用到;慢慢積攢吧
- 此功能開發的比較“毛坯房”,有不方便的地方,可以再視情況增強一些。