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

Posted 2020-12-30 vbyzc

 

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

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

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

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

折腾了半天，终于找到原因：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‘

 

狗血事件就靠一段落了。