Leayh

Vue项目打包后体积优化背景这段时间使用Vue+Typescript完成了对公司用户管理系统的重构，替换掉了之前的JSF实现了准前后端分离。目前还没有采取前端独立部署的模式，前端文件打包后需要放到tomcat中进行访问。公司的服务器带宽100M，希望系统能支持500并发，且没有购买CDN服务。对于打包后的前端文件chunk-vendors.js就达到了900kb，急需优化。解决路由...

背景在近期开发的学校管理系统中，有一个导入管理模块，其中包含Excel的上传功能，由用户选择文件后进行上传，前端需要对文件内容进行初步校验后给出是否符合规范的提示后再传给后端。这就需要前端事先对Excel文件内容进行读取。解决我们这个项目使用Vue+Typescript进行开发，UI库使用的是iView。在简单调研之后，我发现可以使用xlsx库实现对Excel文件内容的读取。下边放实现功能...

背景提分加项目中遇到了一个需要前端对PDF页面进行分页的需求。该需求是要为每一位学生生成一份PDF的学习报告，起初是采用了前端提供几个页面模板，由java端调用iText去生成PDF，PDF的分页工作也由工具去完成。但是由于页面中包含大量的数学公式、图片等一些对样式要求较高的元素，iText对很多CSS3属性的支持较差，生成的PDF经常会出现切页的情况。最后决定由前端生成分好页的页面，并提...

背景在开发提分加项目的过程中，遇到了点击下拉菜单时在新窗口中打开页面，由于之前一直做的是单页面应用，没有碰到过类似的需求，于是上网搜了一下解决办法，也再次系统地温习了一下vue-router。 解决使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。const ...

背景在提分加项目中用到了element-ui的select组件，发现第一次进入页面点击选择器时会有一个边框闪烁，后审查元素时发现了:focus-within的伪类。解决.select-box span:focus-within { border: none; outline: none;}其中，.select-box是我给select组件取的类名，添加完以上样式后，边...

背景最近在做提分加的预览页面时，有一个用于实现锚点定位的侧边栏导航，而在页面滚动时，侧边导航也需要随着页面的滚动而激活相应的模块，这就需要监听页面的滚动事件了。 解决监听滚动事件mounted() {//监听页面滚动事件window.addEventListener('scroll', this.appScroll)//注意：如果由于自己的vue中的样式导致监听不到，可以...

背景在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。 keyCode 实际键值 48到57 0到9 65到90 a到z（...

背景今天在开发限时练-提分加项目的时候，有一个需要锚点定位的需求，而在Vue项目中，使用传统的在a标签的href属性中写id的方法无效，会导致浏览器的地址改变从而跳转到其他页面。 解决最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果。<template><div class="score-preview-container"> &lt...

背景之前在做ADTS项目的时候，首页是一个实时监测的页面，需要每隔5秒更新一次数据，而业务逻辑上的需要先请求告警列表的接口的，从告警列表中拿到数据再去获取其他的数据，所以我在获取告警列表的方法中增加了一个定时器。 最开始我是将定时器声明在组件内部的（由于页面不多，数据关联也不太强，所以项目中没有使用store进行数据管理），后来清除的时候发现无法清除，后来索性声明到window下了。...

背景前几日在做UBA项目的时候有一个页面需要用echarts图展示用户对各个节目的点播量，页面结构为左侧柱状图展示节目点播量，右侧饼图和折线图展示某个节目的用户点播分布和用户点播变化趋势（如下图），因为我们造的数据是11月26日的，而进入页面默认查询最近1天的，所以刚进来肯定是查不到数据，需要自行选择时间去查询数据。而在查数据的时候出现了echarts折线图无法正确获取宽高的情况。 ...