一、 对 上一篇文章的 第五点 进行补充
传送 ==> 学生信息管理系统 (第三天 )技术汇总及问题解决
这个注意事项还是有问题的:
axios.defaults.baseURL
的确不能放在 main.js 中,否则 proxy 代理直接不起作用,但是! 也不应该放在 封装axios 请求文件中, 为什么当时放了也能用呢? 因为我当时并没有调用这个axios封装的方法,所以 axios.defaults.baseURL
也并没有执行,所以 proxy 代理起作用, 今天我需要请求后端接口,开始需要使用这个封装的axios方法,结果 proxy 代理失效了。
因为main.js 里面的代码都是启动项目就开始运行的,所以如果把 axios.defaults.baseURL
配在 main.js 中,项目一启动,axios 的请求根路径就配置好了,直接导致 proxy 代理失效。 所有罪魁祸首就是配置了 axios.defaults.baseURL
。
我尝试把 axios.defaults.baseURL
注释,再启动项目,确实 proxy 又开始生效了,但是我不可能不去请求后端接口,如何在不使用 axios.defaults.baseURL
的情况下配置请求根路径,我的做法如下:
二、 关于 引入Echarts图表,切换组件是卡顿现象解决
最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速度倒是挺快,但是当我点击切换其他组件统计图时,出现了让人难以忍受的卡顿,有好几次都网页直接崩溃。
原因分析:
每一个图例在没有数据的时候它会创建一个定时器去渲染气泡,页面切换后,echarts图例是销毁了,但是这个echarts的实例还在内存当中,同时它的气泡渲染定时器还在运行。这就导致Echarts占用CPU高,导致浏览器卡顿,当数据量比较大时甚至浏览器崩溃。
解决方法:
创建一个 beforeDestroy
生命周期钩子,用于切换组件前销毁 Echarts 图例。
三、使用ES6 语法 Object.keys() 进行赋值操作出现的问题
BUG: 点击编辑,再点击添加,导致学生信息直接被置空了
错误代码:
正确代码:
四、 Vue 获取后端验证码,并点击刷新验证码
- 后端:
要想实现点击刷新验证码,则需要在后端代码上做处理,在获取验证码接口上接收一个参数(参数自定义,仅做标志,标志每次前端请求的都是不同的验证码,如果没有这个参数,前端每次的验证码请求都相同,导致请求不会发出)。
- 前端:
效果展示: