自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(133)
  • 收藏
  • 关注

原创 Vue3 + Element Plus 省市区县级联cascader组件封装,支持 v-model 双向绑定 + 回显,可直接复用

是非常常见的需求,无论是查询条件、新增表单、编辑弹窗,都需要用到。为了避免重复代码,提升开发效率,我们可以把省市区三级联动封装成一个。本文以同样的实现思路,用el-cascader来一步一步实现。如果需要赋默认值(如编辑弹窗)⬇️。v-model 双向绑定。数据回显(编辑页面必备)

2026-06-02 17:29:06 232

原创 element-plus开关el-switch实现是否开启定时自动刷新

在我们常见的后台管理端的数据列表页,通常是用户点击【查询】按钮,触发一次查询,然后数据列表更新。用一个开关el-switch来实现是否开启定时刷新,例如每隔30秒刷新一次。用的是element-plus的开关组件el-switch。如果没有手动关闭销毁定时器,别忘了在页面卸载时来个保险。2添加动作交互,用定时器实现自动刷新。1先把组件元素基础属性设置好。3别忘了清理销毁定时器。

2026-05-28 09:43:01 39

原创 Vue3 + Element Plus 省市区县级联组件封装,支持 v-model 双向绑定 + 回显,可直接复用

封装成通用组件后,

2026-04-10 17:50:02 146

原创 echarts环形饼图加背景虚线的两种实现方式

看下效果图,和普通的饼图很明显的区别就是:1没有图例2显示文本标签及视觉引导线2圆环中心自定义内容标题3需要转化为南丁格尔玫瑰效果4背景有一圈蓝色点点的线按照通常的就是。

2026-04-07 16:14:33 76

原创 ES6核心知识解析03:为什么用let和const取代var

在上一节中,我们谈到了var的缺陷。在ES6出现之前,我们都是使用var这个关键字来声明变量,那么它被let和const取而代之肯定是因为有弊端。而let和const就是为了弥补这些弊端,或者说解决这些痛点的。那么因此let和const的3个非常重要的特点接着咱们一个一个分析↓。

2026-04-01 17:47:55 299

原创 ES6核心知识解析02:var被淘汰的三大缺点

在ES6出现之前,我们都是使用var这个关键字来声明变量,那么它被let和const取而代之肯定是因为有弊端。这篇文章就来盘点一下接着咱们一个一个分析↓。

2026-02-11 07:48:20 588

原创 ES6核心知识解析01:什么是ES6以及为什么需要ES6

摘要:ES6是ECMAScript 2015的重大版本更新,是JavaScript语言里程碑式的升级,解决了ES5在大型项目开发中的痛点。虽然后续有小版本更新,但ES6因其重大变革成为代名词。它使JavaScript从脚本语言升级为支持工程化开发的语言,是现代前端开发的基础。本专栏将系统梳理ES6核心知识,帮助开发者建立完整知识体系,欢迎订阅交流。

2026-02-05 20:08:24 541

原创 毕业十一年,面试被问到struts2,死去的记忆又开始攻击我

今天去参加一个很心仪的面试,结果被面试官的八股文吊打,我总是回答得磕磕绊绊,这仿佛成了我一道过不去的坎儿,我有时候真的恨透了这些东西,最终恨的不过是自己的不争气罢了。好吧,当他问我struts2时,我已经石化了,很多年前用过的技术,我拼命在脑海深处找寻一些残存的记忆,最后只是徒劳无功,可怜的嘴巴开始胡诌……先让我们回到十多年前,当时java web主流的形式还是JSP+Servlet。好吧,变不下去了,忘了都,反正就是很快被springboot取而代之了。好吧,结束面试,整理这些死去的记忆。

2025-08-15 12:22:28 224

原创 从银行排队到零钱支付:用“钱包经济学”重构Java缓存认知

"当你的系统还在频繁访问数据库'银行'时,聪明的开发者早已学会用'钱包零钱'策略实现毫秒级响应——本文将用理财思维拆解缓存设计精髓,教你如何让代码学会'小额快付'的架构艺术。【缓存】作为程序员必须理解的概念之一,让我们用 ‌‌ 和 ‌‌ 的日常生活场景,来类比 Java 中的缓存机制。钱包里的零钱就像缓存数据,能快速支付小额消费(高频访问),省去跑银行取现(数据库查询)的时间。二者是不是有一定的异曲同工之处呢?首先来理解缓存的几个概念为什么要缓存?

2025-05-16 10:22:09 1164

原创 摸鱼=多线程?码农必学的并发哲学,教你如何科学划水

【线程】尤其是【多线程】也是每个程序员都绕不开的一个概念,本篇文章就是尝试换一种思路或者说角度来重新梳理这个概念。

2025-04-25 18:30:00 1036

原创 控制反转≈鸡蛋灌饼?论程序员如何优雅做饼

控制反转(Inversion of Control)是一种设计原则,其核心是将对象的创建、生命周期管理及依赖关系的控制从代码中剥离,交由外部容器或框架统一管理。传统开发中,对象通过直接实例化(如new一个)主动获取依赖,而反转则是将控制权交给容器,使对象仅需声明依赖,由容器在运行时动态注入从代码内部转移至容器组件间依赖关系不再硬编码,而是通过配置或注解动态解析依赖注入(Dependency Injection)是实现控制反转的具体手段,将依赖对象从外部注入到目标组件汇总,而非由组件自行创建。

2025-04-24 10:14:44 1250

原创 ElementPlus按需自动引入配置详解

有很多插件没用上,浪费资源,打包会更大用什么引用什么,操作冗余用到什么就引入什么,只需要简单配置,灵活机动,因此本文主要介绍。

2025-04-24 08:33:51 1134

原创 echarts环形饼图自定义边框、标题及图例

看下效果图,和普通的饼图很明显的区别就是:1有明显的白色边框线2圆环中心自定义内容标题3需要设置图例位置与内容我通常的就是。

2024-10-16 13:46:29 1137

原创 hover显示播放遮罩层效果

点击,跳转到对应的视频播放页。这是目前主流视频网站的一个通用效果。我们都知道视频列表其实是一个封面列表,鼠标放上去时,有反馈:即。为了做出这个效果需要准备1张封面图片和1个播放按钮icon。如有任何疑问或者想实现什么效果,欢迎评论区交流。注:vue版本"^3.4.15"先来看下实现之后的效果。

2024-04-24 16:09:39 739 2

原创 图片hover放大效果

一张图片,鼠标放上去时,出现放大效果。非常简单,两个关键词:hover和transform

2024-04-24 13:57:51 897

原创 vue3项目配置按需自动导入API组件unplugin-auto-import

将vue、vue-router等的import语句删除,项目正常启动不报错。这款插件是前端大神Anthony Fu写的,非常实用。unplugin-auto-import的git地址。有兴趣的小伙伴可以到git上看,

2024-02-19 17:39:28 4547

原创 vue3项目配置按需自动引入自定义组件unplugin-vue-components

Anthony Fu,在Git上的账号是antfu,是Vue和Vite核心成员,同时也是VueUse、Slidev几个开源项目的作者……,他的一些插件都是非常非常实用的!我们通常在项目中,需要手动引入自定义的各种组件,如果涉及的页面功能比较多的话,光是import的长度都能赶上春联了。这就是前端大神Anthony Fu写的的非常好用的插件,其实已经被vite官方收录了。将你引入自定义组件的import*****之类的语句,去掉,依旧正常运行。如果,能有一个插件帮我们实现自动引入,是不是要谢天谢地了呢?

2024-02-19 15:27:47 3669

原创 unplugin-vue-components解决命名冲突

大概就是这样啦,至于到底要不要设置directoryAsNamespace​​​​​​​为true,就看你个人习惯啦。注:vue+ts项目,dts属性默认为true,因此在你不留意时,它就自动生成啦。将会自动生成components.d.ts文件,1同名加路径前缀,不同名也要加路径前缀。false时,就要多花点脑细胞想名字。如果有任何,欢迎友友们评论区留言……这几种情况,看一下,你应该就理解啦。true时,就需要引用时多敲点代码。当出现同名文件时,该怎么解决呢?下图这个例子,我用不同颜色区分了。

2024-02-19 15:23:48 3127

原创 利用vite快速搭建vue3项目

然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。之后我们将一步一步给这个框架基底添加基础的好用的工具,以便快捷开发。4、之后根据你的编码习惯或需要,选择【ts】或者【js】,点回车。3、回车之后,出现选择框架的提示,我们选择【vue】回车。1、选择一个文件夹,在vscode终端打开,输入命令【6、【cd rookiedemo】进入对应的工程目录。2、提示你输入项目名称之后,我这里设置的是【5、vite非常贴心,按照对应的提示,即可。

2024-02-19 11:20:07 896

原创 原生video设置控制面板controls显示哪些控件

其实我觉得,基本上原生提供的功能已经满足日常使用了,除非你的需求的重度视频功能,然后对美观度有一定要求,如各大视频网站爱优腾+B。

2023-12-01 11:06:35 3790

原创 css实现渐变电量效果柱状图

如果你只是想做一个静态demo,不需要数据,不需要后台,这里教你一个简单快捷的方法,用css实现!我们通常的做法就是用echarts来实现。其实思路是一致的,就是效果层的叠加。以上,就是在项目中实际会用到的效果。接着是又在渐变的基础上,接着我们实现进阶版,

2023-09-25 15:53:49 1188 2

原创 error:03000086:digital envelope routines::initialization error

vue前端项目命令框输入npm run serve报error:03000086:digital envelope routines::initialization error错误 原因:node版本过高 解决办法: 在命令行输入命令修改环境变量:$env:NODE_OPTIONS="--openssl-le…前端vue项目启动突然报错error:03000086:digital envelope routines::initialization error。然后就是寻求度娘帮助。

2023-09-05 11:24:13 1110

原创 echarts实现渐变电量效果柱状图

例子中,过程已经讲得比较详细了,所以这里就不再重复说了,直接贴全部代码。相比于普通的柱状图,这里边最明显的区别在于多了。如果你耐心看完,并理解了对应的图层叠加思路↓。以上代码实现了官网示例与最终效果的对比。先引入一个两层叠加的例子。那么就能很容易想到,

2023-06-15 16:24:07 1053

原创 echarts分割柱形图实现渐变电量效果柱状图

先看下效果图是这个样子的 ,和普通的柱状图最明显的区别就是需要做成类似于电池格电量显示效果。

2023-06-15 10:04:59 2047 4

原创 echarts象形柱图实现电量效果柱状图

改造的基本思路:将type由bar变为pictorialBar,再修改设置与pictorialBar相关的配置项即可。看到这几种标记类型还不是很抽象,没关系,我们一个一个看下效果。a.type由bar变为pictorialBar,效果如下。看了这么多,那么我们要用到的是哪一个呢?看下官网例子,你就大概明白每个配置项能实现的效果了,接着再改变一下颜色,设置一下label就完成了。为什么是椭圆效果呢?我们去官网配置项中找答案,因此我们设置一下想要实现效果的配置项。但是,还有一个小细节需要注意,

2023-06-14 17:17:57 2336

原创 运行 ‘ApplicationCustomer‘ 时出错: 命令行过长。要为 ApplicationCustomer 或也为 Spring Boot default 配置 缩短命令行吗?

springboot启动项目时报错:命令行过长。要为 ApplicationCustomer 或也为 Spring Boot default 配置 缩短命令行吗?

2023-03-15 14:54:33 1478

原创 利用vite创建vue3工程

官方创建的前端构建工具。

2023-01-03 14:25:38 609

原创 利用vue-cli创建vue3工程

需注意:想创建vue3工程,对vue-cli版本有要求,必须确保vue-cli在4.5.0以上。

2023-01-03 10:47:41 948

原创 el-calendar日历自定义显示内容

有码友在评论区里分享了更简介的方式,看到后一直想尝试一下,所以本篇就是来填坑的。

2022-08-16 15:40:31 3792 9

原创 vue使用原生video标签播放视频

如果想实现自动播放,需要加autoplay属性,但是加了之后也可能出现无法自动播放的问题,还需要在加muted属性

2022-07-22 16:35:14 4415

原创 java利用Freemaker模板引擎生成word并导出

制作好要导出的word模板,后台将数据写入文件中传给前端,前端保存对应的word文档即可。(我在网上搜相关教程时,看到有的帖子是先生成了word文档,将word文档以流的形式给前端,导出之后,再将生成的word文档删除掉,其实这相当于多次一举,所以你在看的时候注意甄别实现思路)...

2022-07-22 15:34:11 1485 7

原创 java二维数组转Map

此处的ArrayUtils引用自org.apache.commons.lang3.ArrayUtils;,确保你的项目中有相关依赖即可

2022-07-22 11:29:27 1113

原创 利用Freemaker模板引擎制作包含表格和图片的word导出模板

注如果显示的数据在后台是封装到实体类中的,我们需要写成类似${user.name}这样的,也就是说后端怎么封装数据,前端就怎么拆解显示数据。我们在word文章中插入的一张图片,在转xml的过程中会被转为base64码,非常好找,就是一串很长很长很长……找到$符所在的位置,发现${}内容不是我们预期想要的,需要将中间多余的部分删除掉,整理成可以识别的格式。将需要动态输出的数据用${}来占位标记,图片就需要在word文档中真的插入一张图片。将其替换为我们要显示的图片的${}占位符即可。......

2022-07-20 11:49:02 1194

原创 java读取远程图片时数据丢失而显示不全

java利用Freemaker模板引擎生成word导出,导出的数据中包含图片,所以需要先将图片转化为base64码,然后将这些数据输出生成word文件。之所以用InputStream.available()可能就是因为在InputStream和OutStream中用得太顺手了,就像直接套固定公式一样。我们知道读取远程文件需要依赖网络环境,这个过程通常是不可控和不稳定的,也就是说read()可能会阻塞,因此不能再采用。但是导出的word文件依旧出现了类似下图中显示不全的现象,很明显是。...

2022-07-18 14:40:30 1338

原创 利用Freemaker导出word时的常用语法示例

Freemak导出word文档时的常用语法示例

2022-06-23 15:33:38 977

原创 js获取当前月、上一月和下一月

获得当前月/上一月/下一月

2022-06-23 11:20:26 14080

原创 npm查看是否安装了某个插件

没有安装的话就会显示empty,已经安装的话就会显示相应版本信息

2022-06-17 11:44:08 1846

原创 java将图片转化为base64码

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。将图片转化为base64码就是可以将一幅图片数据编码成一串字符串,使用该字符串代替图片地址,从而不需要使用图片的 URL 地址。示例中读取的是远程图片文件,如果要读取本地文件,请看链接:读取本地文件和远程文件https://blog.csdn.net/rear0312/article/details/125199724?spm=1001.2014.3001.5501...

2022-06-09 11:33:27 19815

原创 java读取本地文件和远程文件

java读取本地文件和远程文件

2022-06-09 11:20:00 9850

原创 java获得指定时间的前几天或后几天是哪一天

相关代码: public static Date daysAgoOrAfter(Date oneday,int amount){ Calendar mon = Calendar.getInstance(); mon.setTime(oneday); mon.add(Calendar.DATE,amount); return mon.getTime(); }注:前几天参数amount为负整数后几天参数amount为正整数测试: public ...

2022-04-27 17:37:09 3290

GradientColor.js

生成渐变颜色

2024-04-01

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除