vue實踐中的狗血事件之:mock數據引發的血坑
阿新 • • 發佈:2018-08-18
ESS 代碼 cal money 返回 def ood true ext
在項目實踐中,遇到了這麽一檔子事
開發環境下,很快樂,什麽事兒都沒有,於是想打包一下測一下自動登錄的效果
好家夥,一開始登錄沒有效,改來改去,最後連路由都切換不了,
明明開發環境下好好的,為毛打包後就不行了
折騰了半天,終於找到原因:ajax請求數據搞的鬼
情況如下:
開發環境下用express模擬出請求路由,登錄數據和端口數據一起放在一個login.json文件中
{ "userinfo":{ "name" : "vbyzc1984", "tel" : "13959795557", "head" : "QQ20180813161622.jpg", "addr" : "泉州市豐澤區外代大廈11樓1102", "money":"9500", "score":"7500", "level":"2", "exp":"1250", "nextexp":"5000" }, "goods" :[ { "title":"梅菜扣肉飯", "image":"food1.jpg", "price":"13", "label":{ "zp":true, "new":true, "la":false } } ] }
將login.json require引入:var appData = require(‘./api/login.json‘)
用express註冊出2個路由:
“api/login.json” : 設置返回數據為 appData.userinfo
“api/goods.json” : 設置返回數據為 appData.goods
請求很正常,正常登錄
api/login.json是靜態模擬,所以打包後,直接把整個目錄復制過去測試效果,
由於開發環境下是虛擬路由直接返回整個login.json對象中的某個對象,
所以代碼中用response.data.data,得到的是包括userinfo,和goods2個子對象的一個完整對象,直接放到vuex狀態中的登錄對象,肯定不能用
所以最後解決方法是,把login.json改為db.json,用於放所有模擬數據
再分別新建獨立的對應數據文件:比如login.json,只放這些東西:
{ "data":{ "name" : "vbyzc1984", "tel" : "13959795557", "head" : "QQ20180813161622.jpg", "addr" : "泉州市豐澤區外代大廈11樓1102", "money":"9500", "score":"7500", "level":"2", "exp":"1250", "nextexp":"5000" } }
此外還有一奇葩事件導致相關的代碼出現錯誤警告
開發環境中,從localStorage獲取沒有設置的值,得到的是 null
而生產環境中,得到的是 ‘undefined‘ ,註意,是字符串,不知為何?
暫時只能多加個判斷來解決 :
AUTO_LOGIN_TOKEN != null && AUTO_LOGIN_TOKEN != undefined && AUTO_LOGIN_TOKEN != ‘undefined‘ 狗血事件就靠一段落了。vue實踐中的狗血事件之:mock數據引發的血坑