学生信息系统 (第四天 )技术汇总及问题解决

一、 对 上一篇文章的 第五点 进行补充

传送 ==> 学生信息管理系统 (第三天 )技术汇总及问题解决

这个注意事项还是有问题的:
在这里插入图片描述
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 获取后端验证码,并点击刷新验证码

  • 后端:

要想实现点击刷新验证码,则需要在后端代码上做处理,在获取验证码接口上接收一个参数(参数自定义,仅做标志,标志每次前端请求的都是不同的验证码,如果没有这个参数,前端每次的验证码请求都相同,导致请求不会发出)。在这里插入图片描述

  • 前端:

在这里插入图片描述在这里插入图片描述


效果展示:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/haduwi/article/details/111594381