1. 程式人生 > >前端開發時自己做樁資料(假資料)

前端開發時自己做樁資料(假資料)

Deprecated: 已使用第三方mock-server,此DIY的方式就不用了,算作是一次學習吧。

某些功能開發時(以及後續維護時)嚴重依賴api返回的資料。不但要求資料呈現某特定狀態,特別是當前開發功能要修改資料時,費勁巴拉弄好的資料,點一下按鈕,就耗光了。還得再來一次……大費周章。於是,需要一個“樁資料”。(此資料不是真正從api請求來,而是自己在“偷偷”在本地提供的)。有個強大的json-server,據考察只支援REST API,不適宜。故自己簡單實現了一個機制,可以實現樁資料

用法

  1. 將你所請求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"
        ...
    }
}
  1. 在src/iscripts/global/test/stub/stub.js中 @@include此js
    注:stub.js中只能有一個@@include,其他都註釋掉。否則,後邊的會覆蓋掉前面的,給window.stub賦值
  2. gulp --stub=1
  3. 開始除錯吧

原理:

將統一封裝的jquery的ajax方法呼叫前,加了一個判斷。如果所請求的介面有stub資料,則應用改資料(而不去服務端請求了)。
故,此方法僅能一定程度上模擬真實情況,重在模擬請求資料,但不能寫資料

說明

  1. stub並不一定能對你初次開發時有多大用處,只對後續你再想使用此資料時用處比較大。尤其你開發的功能會“改變資料”時,此方法可以省去資料過快被消耗掉
  2. 如果開發的功能需要順次請求多個介面(注意是不同介面哦),可以給stub賦多個key-value,參考例子:data/demand_index/pay.js
  3. 另,現在已經有幾個資料,或可用到;慢慢積攢吧
  4. 此功能開發的比較“毛坯房”,有不方便的地方,可以再視情況增強一些。