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' ,注意,是字符串,不知为何?
暂时只能多加个判断来解决 :
vue实践中的狗血事件之:mock数据引发的血坑的更多相关文章
- vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置 安装 axios ...
- Vue开发中的中央事件总线
在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- vue项目中使用mockjs模拟接口返回数据
Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...
- vue项目中使用mockjs+axios模拟后台数据返回
自己写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,于是在网上找了下,发现一个挺好用的模拟后台接口数据的工具:mockjs.现在把自己在项目中使用的方法贴出来 先看下项目的目 ...
- vue组件中—bus总线事件回调函数多次执行的问题
在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...
- vue.js 中如何解除绑定事件
我们项目中有一个点赞需求,只允许点击一次赞,再次点击则取消赞, 为了防止用户多次连续点击,在点赞后需要解绑事件,成功调取API后,才可再次点击取消赞. 目前用的方法是加入一个flag控制点击事件可否点 ...
- clipboard 在 vue 项目中,on 事件监听回调多次执行
clipboard 定义一个全局变量 import ClipboardJS from "clipboard"; if(clipboard){ clipboard.destroy() ...
- VUE 实现监听滚动事件,实现数据懒加载
methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...
随机推荐
- SpringMVC(三)-- springmvc的系统学习之数据的处理,乱码及restful
资源:尚学堂 邹波 springmvc框架视频 一.提交数据的处理 1.提交的域名称和处理方法的参数一致 (1)提交的数据:http://localhost:8080/data/hello.do?na ...
- 课程回顾5in1
提出过的问题 问题1:敏捷开发在现阶段急于使用或试行,会不会得到相反的结果? 整个开发流程在施行了一整个学期,有积极的影响,也有消极的影响.例如通过这个流程的实施,规划短期的项目进度,使得成员能逐步了 ...
- PAT 甲级 1105 Spiral Matrix
https://pintia.cn/problem-sets/994805342720868352/problems/994805363117768704 This time your job is ...
- 虚拟主机修改上传配置(PHP)
虚拟主机中不允许修改php.ini 配置文件(当然有的允许修改,则修改php.ini,因为有时候在线上通过.htaccess 修改了也没有作用),只能通过ini_set() 或重写文件.htacces ...
- Spring+Junit测试用例的使用
1.[导包]使用Spring测试套件,需要两个jar包:junit-X.X.jar和spring-test-X.X.X.RELEASE.jar,在maven项目下可添加如下依赖: <depend ...
- Docker(六)-Dcoker仓库
仓库 一个容易混淆的概念是注册服务器(Registry). 实际上注册服务器是管理仓库的具体服务器,每个服务器上可以有多个仓库,而每个仓库下面有多个镜像.从这方面来说, 仓库可以被认为是一个具体的项目 ...
- Yii框架的原代码
http://www.digpage.com/app_struct.html#index-php
- require.js text 插件使用
相比于使用script构建DOM结构,使用HTML标签来构建html是一个很好的方式.然而, 并没有很好的方式可以在js文件中嵌入 HTML .最好的方式是使用 HTML字符串, 但这很难管理,尤其实 ...
- 如何让搜索引擎抓取AJAX内容?
越来越多的网站,开始采用"单页面结构"(Single-page application). 整个网站只有一张网页,采用Ajax技术,根据用户的输入,加载不同的内容. 这种做法的好处 ...
- MT【186】四边形中的余弦定理
在四边形$ABCD$中,若$AB=a,BC=b,CD=c,AD=d,AC=e,BD=f$,则 $$a^2c^2+b^2d^2=e^2f^2+2abcd\cos(A+C).$$ 注:这个结果可以看成是余 ...