- 博客(54)
- 收藏
- 关注
原创 threejs基础入门案例研究——三维立体物体沿指定曲线循环移动
主要思路是先创建指定曲线路径,并将其分为1000个点,然后按照自定义路线从头遍历点的位置,然后修改物体位置以及朝向等,实现三维立体物体沿指定曲线循环移动的效果。这里以vue3代码为例,进行展示
2024-07-08 14:31:28 1054 1
原创 threejs基础入门案例研究——三维立体物体沿指定曲线逐渐增长变长
主要思路是先创建指定曲线路径,并将其分为1000个点,然后按照自定义路线拉伸三维物体,从头遍历点的位置,然后放入物体拉伸路径中,实现缓慢增长效果
2024-07-05 16:33:30 1012 1
原创 环形进度条渐变色的两种方案
实现如下渐变色环形进度条一提到环形进度条渐变色,相信大家先想到的是el-progress,以及echarts。现在我们就这两种方案进行开发。指路element-plus,访问官网官网中给出了环形进度条的写法,但是没有给出渐变色的配置项,这就需要我们自己手动修改,代码如下:在控制台中我们可以看到,实际上el-progress就是两个path组成,第一个就是底色环状,第二个就是进度条,通过修改stroke,我们看到蓝色被我们修改成了红色,所以如上代码,我们需要手动添加一个svg代替element中的第
2023-10-24 10:35:11 3383 5
原创 nginx版本号隐藏(405 not allowed解决办法)
项目安全测试发现405页面暴露了nginx版本,其相关版本号泄露时攻击者会利用相应软件版本的当前漏洞,进行有效的相应攻击。所以需要我们做好版本号的隐藏。
2023-10-09 17:16:38 1198
原创 文件上传前前端通过魔数(magic number)去限制上传文件类型
对于某一些类型的文件,起始的几个字节内容都是固定的,根据这几个字节的内容就可以判断文件的类型,这就是魔数。vue el-upload文件上传前获取文件类型并限制文件类型
2023-07-18 14:13:30 1042
原创 linux下express+puppeteer安装部署并用PM2守护进程
承上篇,是在本地nginx部署前端,本地另起express服务进行测试,下面我们来讲讲如何部署express到linux服务器,并用PM2守护进程。在此仅作为本人开发记录,不一定能解决你的问题,在文末可以到github的讨论区看看寻找你的答案。针对不同的puppeteer我们需要安装对应的chrome版本,puppeteer报错
2023-06-20 18:05:06 2653 2
原创 vue3添加百度统计查看网站实时数据
百度统计是一款数据分析工具,可以帮助网站管理员了解访问者的行为,分析网站流量、转化率、来源、访问路径等数据。它可以实时监控网站流量和用户行为,提供详细的数据报告和图表,帮助网站拥有者更好地了解网站的运营状况,进行数据驱动的优化和调整,从而提高网站的转化率和用户体验。
2023-06-06 10:17:18 1531
原创 puppeteer-不需重构,无痛加强vue单页面应用的SEO,提升百度收录排名
puppeteer-不需重构,无痛加强vue单页面应用的SEO,提升百度收录排名
2023-05-15 10:50:26 2315 6
原创 前端根据权限设置动态路由菜单
在前端开发中,我们常会遇到根据不同角色/用户所拥有的权限码不同需要分配动态路由,一般我们可以将动态路由菜单存在后端,方便数据库管理,但是有时后端之后返回给我们一个权限码数组让前端自行进行判断,下面是我提供的一种思路。
2023-04-23 17:55:38 259
原创 vue3+echarts实现世界地图以及轨线(label使用fomatter+rich动态添加图片及背景色,以及label如何添加动态边框色)
echarts label formatter rich实现动态字体颜色动态边框色动态图片,世界地图轨线,世界地图json数据,默认显示tooltip
2023-04-21 17:58:58 3143 4
原创 vue3自定义实现可过滤关键字的树形下拉选择框
层级过深,会出现级联下拉超出屏幕的情况,所以改用树形下拉,但是element没有相关组件,现记录下自定义实现可以根据关键字筛选的树形下拉选择框。
2023-04-07 16:39:54 884
原创 解决vue2版本,el-select下拉框数据量过多,el-select进行分页请求懒加载,滚动防抖加载,支持关键字过滤及其他el-select属性
element-plus中有虚拟化选择器el-select-v2实现滚动加载下拉框,但是在一些比较老的项目中使用的是el-ement版本的UI,除了单独引入el-select-v2进行局部引用外,我们还可以自己手动封装一个滚动分页下拉。el-select滚动懒加载防抖
2023-04-03 16:51:17 2387
原创 多页面使用同个带定时器的组件,多次切换路由定时器叠加无法彻底消除
多页面使用同个带定时器的组件,多次切换路由定时器叠加无法彻底消除,定时器无法彻底注销
2023-03-27 17:29:08 320
原创 vue3复杂表单列表,根据表单内容是否改变判断是否弹出离开前保存提示(用户修改后又改回原来的数据不触发保存提示)
vue3复杂表单列表,根据表单内容是否改变判断是否弹出离开前保存提示(用户修改后又改回原来的数据不触发保存提示)
2023-03-09 19:10:13 1009
原创 解决页面动态计算样式尺寸时页面滚动,导航栏固定位置不准确问题以及子元素固定无法保持子元素与父元素宽度一致问题
解决页面动态计算样式尺寸时页面滚动,导航栏固定位置不准确问题以及子元素固定无法保持子元素与父元素宽度一致问题
2023-03-07 18:20:31 504
原创 解决vue3绑定动态本地图片时require无法使用问题
解决vue3绑定动态本地图片时require无法使用问题,vue2,vue3中使用img标签绑定动态路径
2023-03-07 18:04:16 3149
原创 el-table表头过滤器为不同接口返回值,表格渲染较表头下拉返回快,导致表头下拉为空——获取接口返回之后,拿到id去调另一个接口并map进数组对象
我的做法是在调取接口1后foreach获取每一行id1,然后定义一个新属性用来接收下拉返回值,但是发现接收到的是一个promise object。内部表格需要在点击展开外部表格某一行时拿到外部接口1对应行返回值id1调取接口2获取;内部表格表头下拉需要接口2返回值id2调取接口3拿到返回值。最近做项目遇到一个问题为双层表格嵌套,在方法后加上then,成功接收值。
2023-02-24 13:42:47 155
原创 element 的el-form双层循环嵌套动态校验vue3
首先我把绿色部分看作一个表单,第一层循环放在表单外,在红色部分外包一个div进行二次循环。至此成功,el-from的循环嵌套prop需要根据数据结构进行修改,此处仅供参考,多试试就行了。此外我们还需要修改二层循环prop的值,并在el-form-item行内写上校验规则。使用的是vue3+el-form。
2023-02-23 10:45:09 2805 2
原创 前端编写邮件html各邮箱兼容及注意事项
近期由于项目需要,第一次编写邮件html模板,发现各种邮箱兼容问题,尤其是windows自带的邮箱outlook兼容性极差,在此简单做下记录。
2023-01-16 10:28:09 4375
原创 vite 打包上线后页面静止一段时间(半小时+)路由跳转无响应
项目在本地开发没问题,但是打包到测试环境时发现页面无操作静止半小时+后,点击事件、接口等都无异常,页面跳转失效,(window.open正常,router.push、router.go(-1)等失效),查看控制台报错触发路由跳转时,报错。
2023-01-11 10:53:56 1888 1
原创 el-tooltip的二次封装,文字过长省略,hover时悬浮,不省略不悬浮
el-tooltip是我们的常用组件,但是无法判断绑定元素是否过长需要省略的,此组件对el-tooltip的二次封装,文字过长省略,hover时悬浮,未超出长度限制时不显示,代码如下。
2022-10-21 15:41:59 892
原创 表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口
不知道UI抽什么风,所有列表都没用分页器,一律采用滚动加载。但我又是个懒蛋,不想手写所以就用了element-plus的无限滚动,但是v-infinite-scroll和el-table这俩搁一块就有bug了啊!!!在网上找了半天没遇到相似问题,现在来记录一下。本次开发中其实可以不用el-table的,因为这个列表并不展示头部,但是我又极其热爱el-table,所以不顾老大劝阻还是用了。好了好了,问题就是——。
2022-09-26 11:16:45 6047 5
原创 scrollIntoView()或者使用锚点滚动定位引起的页面偏移以及当有fixed的导航栏时标题被遮盖的踩坑问题
scrollIntoView()或者使用锚点滚动定位引起的页面偏移以及当有fixed的导航栏时标题被遮盖的踩坑问题
2022-09-26 10:30:25 4751
原创 mavon-editor预览图片时,层级错乱
当一个页面里有两个mavon-editor时,在预览界面点击任意一个中的图片查看时,页面会出现层级错乱情况。可以使用下列代码解决问题。
2022-09-23 15:00:02 332
原创 vue-tippy优秀悬浮框插件的两种使用方式(解决elementui的tooltip不及时消失及定位出错问题,使用el-progress进度条模仿柱状图,tippy模仿echarts悬浮框)
使用el-progress进度条模仿柱状图,tippy模仿echarts悬浮框解决el-tooltip定位出错以及消失不及时问题
2022-07-14 11:10:21 3224
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人