vue实践中的狗血事件之:mock数据引发的血坑

在项目实践中,遇到了这么一档子事

开发环境下,很快乐,什么事儿都没有,于是想打包一下测一下自动登录的效果

好家伙,一开始登录没有效,改来改去,最后连路由都切换不了,

明明开发环境下好好的,为毛打包后就不行了

折腾了半天,终于找到原因: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'
 
狗血事件就靠一段落了。
原文地址:https://www.cnblogs.com/vbyzc/p/9496524.html