- 博客(93)
- 收藏
- 关注
RSS订阅原创 vue2 动态路由权限菜单+按钮权限实现
在Vue2中实现动态路由主要通过 vue-router 的 addRoutes (已被废弃)方法或 addRoute方法（Vue Router 3.1.0+）。现在有两种思路可以实现动态菜单。：后端直接返回带有相关权限的，规定格式的菜单信息，由前端处理生成路由信息。：后端返回权限标识列表，这个标识列表和前端的路由结构的 name 字段的值进行匹配，如果匹配成功，说明用户具有该菜单的权限。
2025-08-04 11:16:04
1132
原创 解决[vue-router] Duplicate named routes definition: name 名称冲突的问题
首先猜想是 name 属性重复定义的导致的警告，回到路由配置模块（router/index.js）没发现有name冲突的代码。每次初始化时、每次点击动态路由时都会有下图的警告，最终问题锁定在了动态路由这里。改造之后的代码如下，新增了一个 resetRouter() 方法，将默认实例给全新的实例，然后将新实例的 matcher（路由匹配器）赋值给当前路由实例的 matcher。：重置路由，将新实例的 matcher（路由匹配器）赋值给当前路由实例的 matcher。改造之前的代码如下图所示。
2025-08-04 08:48:00
459
原创 重复点击路由导致报错 NavigationDuplicated: Avoided redundant navigation to current location: “xxxxx“.问题
这种处理方式只会静默处理导航重复的错误，其他类型的导航错误（如路由守卫中的错误）仍然会正常抛出。同时，这是 Vue Router 3.x 的处理方式，在 Vue Router 4.x（Vue 3 版本）中，导航错误的处理方式有所不同。：这个错误本身不会影响应用的正常运行，但如果没有被捕获，它会在控制台中显示红色错误信息，影响开发体验，甚至可能被某些错误监控系统捕获，造成不必要的告警。：代码通过重写 Vue Router 的。捕获可能的错误，避免错误继续向上传播。方法覆盖原型上的原方法。
2025-07-19 16:01:55
418
原创 POI报表
API描述WorkbookExcel的文档对象,针对不同的Excel类型分为:HSSFWorkbook(2003)和SheetExcel的表单RowExcel的行CellExcel的格子单元FontExcel字体CellStyle格子单元样式Excel 2003:在POI中使用HSSF对象时，excel2003最多只允许存储65536条数据，一般用来处理较少的数据量。这时对于百万级别数据，Excel肯定容纳不了。Excel 2007:当POI升级到XSSF。
2025-07-08 20:42:28
709
原创 消息推送之Websocket
Websocket 是基于TCP的一种新的网络协议。允许在单个 TCP 连接上进行全双工通信。与传统的 HTTP 请求-响应模式不同，WebSocket 提供了持久的连接，服务器和客户端可以随时主动推送数据，无需反复建立连接，可以进行双向数据传输。客户端可以向服务器发送数据，服务器也可以向客户端发送消息。HTTP协议与WebSocket协议对比不同点HTTP是短连接，WebStocket是长连接。HTTP通信是单向的，WebSocket通信是持久双向的相同点二者的底层都是TCP连接HTTP 连接响应。
2025-06-25 16:56:56
924
原创 Nginx 基础知识
一、Nginx基础Nginx 是一个高性能的HTTP反向代理服务器，及电子邮件（IMAP/POP3）代理服务器可以支持5万个并发请求。其特点占用内存少，并发能力强，在同类型的网页服务器中表现较好。一、Nginx基础1. Linux环境安装Nginx这里主要记录Nginx 环境安装，windows 环境只要下载安装包解压即可使用。1. 安装Nginx相关依赖2. 下载Nginx并安装2.1 新建一个目录，将压缩包放到Linux中并解压 nginx-xx.tar.gz 包解压。
2025-06-22 17:44:30
829
原创 vue项目全屏与半屏视图切换
全屏与正常视图的切换在系统中很常见，现在简单记录下在vue2项目中如何开发全屏与正常视图的切换。这里需要下载全屏插件 screenfull.js 插件。1. 安装插件依赖。值得一提的是，如果不指定插件的版本，默认是安装最新版本的。但在vue2项目中，安装6.0版本的全屏插件会报错，所以在vue2项目中需要指定插件的版本为 5.1.0。2. 定义一个全屏公共组件，这里的路径为 src/components/Fullsceen/index.vue。
2025-06-20 20:11:05
1054
原创 数据分页查询
Spring Data JPA 是 Spring 生态系统中用于简化数据库访问的模块，，基于 JPA（Java Persistence API）规范。它通过减少样板代码和提供通用 CRUD 操作，显著提升了开发效率。Spring Data JPA 整合了 Hibernate 等 JPA 实现，同时扩展了查询能力。如果使用的是 Spring Boot 和 Spring Data JPA，那么分页功能已经内置其中，开发者只需简单配置即可实现。
2025-06-17 16:56:50
324
原创 浅谈数据库连接池
Bean需要显式配置类的场景自定义数据源：使用非标准数据源（如 Druid、BoneCP 等）或需要自定义连接池参数。多数据源切换：即使当前只有一个数据源，但未来可能扩展为多数据源。自定义事务管理器：需要配置特殊的事务传播行为或隔离级别。MyBatis 自定义配置：需要指定 mapper 位置、类型别名或插件。与其他框架集成：例如与 ShardingSphere、Seata 等分布式框架集成。在src目录下建一个类作为配置类。
2025-06-16 20:33:18
732
原创 Java 动态代理
代理对象调用唱歌方法时，代理对象会调用代理工具类的 createProxy 方法的匿名内部类中第三个参数的回调函数，这个回调函数表示代理对象需要做什么事，并且让被代理对象执行唱歌和跳舞方法， invoke(s, args) 会到 Star 对象（被代理对象）找对应的唱歌和跳舞方法。动态代理将额外的功能抽离出来，通过代理类动态的添加到原方法的前后，从而实现对已有的方法进行增强。Spring 的 AOP （面向切面编程）就是应用了动态代理。它的作用就是在不修改原代码的前提下，对已有的方法进行增强。
2025-06-16 10:24:27
227
原创 自定义注解
自定义注解顾名思义就是自己定义注解。注解的本质就是一个接口，所有的注解都继承了 Annotation接口。@注解就是一个实现类对象，实现了该注解以及Annotation接口。就是对使用注解的地方进行标记。public @interface 注解名称 {// 如果没有默认值可以写成 public 属性类型 属性名()public 属性类型 属性名() default 默认值特殊属性value，如果注解只有一个value属性，使用注解时 value名称可以不写，可以直接写值。
2025-06-16 10:21:25
363
原创 加盐加密算法
MD5（Algorithm 5）是一种常用的，用于将任意长度的数据进行的加密处理。MD5 可以将输入的任意长度的数据转换为一个128位（16字节）的哈希值，通常表示为32个十六进制数字。不可逆性：MD5 加密是，即无法从加密后的结果还原出原始数据。固定长度输出：不论输入数据的长度如何，MD5 始终输出。高速度：MD5 的计算速度较快。虽然MD5能够对数据加密，但已被证明存在多种破解方式。常见的破解方法有和。所以不建议单独使用 MD5 进行加密。彩虹表是一种预计算的哈希值与明文密码的映射表。
2025-06-15 20:22:48
532
原创 0到1搭建前端Vue2项目
1.1 打开 cmd 命令提示符进入到存放项目的目录，在命令提示符上使用 “ vue create 项目名” 命令创建项目。1.2 之后可以选择 vue 版本，虽然现在 vue2 已经停更，但是还是值得学习的。1.3 等待初始化 vue 脚手架后，会出现蓝色的两条命令，依次执行它们即可启动 vue。vue脚手架启动成功后会出现蓝色的两个网址，无论是哪个网址都可以打开页面。1.4 浏览器输入网址后界面如下。
2025-06-05 17:23:13
2528
原创 JWT 认证
JWT （Json Web Token）,通过数字签名的方式，以JSON 对象为载体，在不同的服务端之间安全的传输信息。说白了JWT就是一种密钥,用于授权认证，如果没有密钥，或者密钥失效了，你就不能访问核心信息。
2025-05-31 21:21:53
434
原创 SpringBoot 自定义输出控制台图标
对于控制台输出的这个图标大家都不陌生吧，不仅在SpringBoot中有这种图标，在docker 、 nginx 启动时都有自身独特的图标，这是怎么实现的呢。）， 将图标粘贴到新建文本文件(banner.txt)中，将文本文件放在springBoot 项目中的 resources 目录下即可。启动项目后就会发现原来的图标已经替换成了自定义的图标了。需要利用一个网站生成 banner 图标（
2025-04-13 16:20:19
355
原创 网页布局汇总
容器大小 = 内容大小 + 内边距(padding) + 边框大小在 css 中加入下列代码，盒子便不会被撑大。box-sizing 有三个值：content-box(默认)、border-box、inherit。也叫标准盒模型，默认是该值。。如果盒子宽度为 100 px, padding 为 10px , border 宽度为 5 px。那么盒子大小是 100 + 10 * 2 + 5 * 2 = 130 px也叫 IE 盒子模型。。
2025-04-12 20:05:29
1103
原创 Vue 组件命名及子组件接收参数命名
首字母大写。如 <School></School>。在 vue 开发者工具中默认使用的是该种方式。： 首字母小写。如 <school></school>
2025-04-02 20:26:16
356
原创 AOP面向切面编程
假设有四个方法，需要在每个方法中都输出一个日志，传统发放就需要在每个方法中写一条输出语句，如果有一万个方法，就需要将该输出语句写一万次，那这种方法显然是不可行的。所以需要将这条打印语句抽离封装好，需要用的的方法调用封装好的打印语句就好了。上图所示，将长的椭圆形看成一个个方法，然后在方法上横切一刀，每个椭圆形就会有个横切面，这个横切面就是我们需要抽取出来的业务。我们把全部的横切面都集成一个大的横切面，就类似于将公共模块封装，需要用的时候直接调用即可。
2025-04-02 10:10:17
1175
原创 vue 组件之间传递参数
并将数据传递给父组件。父组件可以通过在子组件标签上监听这个自定义事件来接收数据。1. 子组件通过 $emit 定义触发事件，并传递数据。
2025-03-31 20:20:39
1915
原创 vue 自定义指令
定义指令// 注册一个全局自定义指令 `v-focus`// 当被绑定的元素挂载到 DOM 中时...// 聚焦元素el.focus()})使用指令指令定义时不加“v-”，但使用时要加“v-”指令名如果是多个单词，要使用kebab-case(-)命名方式，不要用camelCase(驼峰)命名如果想注册局部指令，可在组件中配置 directives 属性来注册局部指令focus: {// 指令的定义el.focus();如下所示。
2025-03-31 14:56:35
467
原创 vue 路由
query 传参跳转：to="/path?参数名=值&参数名2=值"获取：$route.query.参数名param 传参配置动态路由：path: "/path/:参数名"跳转：to="/path/参数值"获取：$route.params.参数名注意：1. 动态路由也可以传多个参数，但一般只传一个。2.使用param 对象写法传参，跳转路由要使用 name 属性，不能使用 path 属性。3.需要在路由配置中设置占位参数。
2025-03-31 14:02:53
2094
原创 基于 vue 做数字滚轮效果
如果某个中间属性为null或undefined，表达式会直接返回undefined，而不会抛出错误。修改start-val 和 end-val 的起始值即可。在需要使用的位置写 <count-to></count-to> 标签。use-easing：是否使用缓动效果，默认为 true。decimals：小数点后保留位数，默认为 0。separator：千位分隔符，默认为逗号 ,。start-val：初始值，默认为 0。prefix：前缀，默认为空字符串。suffix：后缀，默认为空字符串。
2025-03-30 12:31:55
599
1
原创 前端 vue 项目上线前操作及项目部署
而通过 CDN 引入，这些库不会被打包到构建文件中，从而显著减少了打包后的文件体积。把大的文件在打包时排除在外，可以缩小打包的大小，保证 js 的加载速度，排除的包可以采用 CDN 的方式链接引入。这个 externals 里面配置的信息是键值对(key-value)， key 第三方依赖库的名称，同package.json文件中的 dependencies 对象的key一样。之后可以进入到预览页面，我们可以把 mock 相关给去除，因为这是在开发阶段模拟数据用的，在真实的环境中，是用不到mock的。
2025-03-29 19:34:23
1028
原创 封装 axios
封装 Axios 是指将 Axios 这个 HTTP 客户端库进行封装，以便在项目中更方便地使用和管理网络请求。在封装 Axios 时，一般会定义一些公共的配置、拦截器、错误处理等功能，以提高代码的复用性和可维护性。2.请求拦截器，统一注入 token。3. 响应拦截器，结构函数，处理异常。1. 基础地址，超时时间。
2025-03-29 15:06:30
168
原创 vue 脚手架解决跨域问题
一个URL地址是由三部分组成的，分别是域名、端口、协议，只要是两个URL地址有一个部分不是相同的，就是跨域。如下：域名跨域：www.example.com 和 www.anotherexample.com端口跨域：8080 和 8098协议跨域：https 和 http 、 http 和 ftp 等等。
2025-03-29 15:01:10
439
原创 vue 两种路由模式
在vue.js中，路由模式分为两种：hash 模式和 history 模式。这两种模式决定了URL的结构和浏览器历史记录的管理方式。1. hash 模式带 #，#后面的地址变化不会引起页面的刷新。换句话说，hash模式不会将#后面的地址带给服务器。如果是在移动端，带有#地址的链接是无法访问的。2. history 模式，没有#，地址变化会引起页面刷新，这种模式会将整个地址发送给服务器。
2025-03-29 14:07:28
854
原创 layui动态拼接生成下拉框验证必填项失效问题
利用 jQuery 动态拼接下拉框时，lay-verify="required" 失效了，有以下几种原因。2. 由于这是动态添加的元素，所以在初始化的时候元素没有绑定校验规则，所以必填验证失效了。1. <form></form>标签 加入 layui 类，发现 layui-verify 必填验证生效了。3. 需要在下拉框动态拼接option 时，提交按钮上加自动提交，
2024-12-23 19:25:43
625
原创 【Redis】一人一单秒杀活动
秒杀一人一单业务流程图如下实现代码块如下如果是单线程那上面的逻辑是没有问题的，问题是在多并发的情况就会出现一人购买多次的情况。为什么呢？这里不是已经加了判断吗？当有两个线程同时去订单表查询数据时，都发现没有数据，所以这两个线程都会扣减库存，创建订单，所以还是会出现一人购买多单的情况。所以需要加锁，由于乐观锁适合更新数据控制版本号，而插入数据就没有办法控制版本号了，所以需要使用悲观锁操作。我们可以把实现一人一单的逻辑抽取出来封装成一个方法，然后对这个方法进行加锁。
2024-12-16 15:38:48
1098
原创 【Redis】库存超卖问题解决
一、问题分析出现超卖问题一般都是线程安全引起的问题。正常情况下，是先查询库存，如果库存小于等于0就购买失败，接着第二个线程查询库存，如果库存小于等于0就购买失败。时序图如下所示if (voucher.getStock() < 1) { // 库存不足 return Result.fail("库存不足！");}//5，扣减库存boolean success = seckillVoucherService.update() .setSql("stock= sto
2024-12-16 14:20:14
1263
原创 【Redis】Redis 生成唯一 id
我们让异步线程和变量绑定，每调用一次countDown，内部变量就减1，当内部变量为0时，说明异步线程都执行完毕了，此时await就不在阻塞主线程，这样就能够计算出系统运行时间。每个订单业务都需要有一个唯一的id，如果使用数据库自增id就会暴露规律，同时id会有一个最大的阈值，万一订单超过这个阈值，那就会出现问题。雪花算法是世界上知名的全局唯一id生成策略，采用long类型的64位数字，原理和今天的Redis自增原理差别不大，只是雪花算法的自增是当前机器的自增，需要维护机器ID。如图所示，ID分为三部分。
2024-12-15 13:30:27
912
原创 【Redis】Redis缓存击穿
互斥锁就是在缓存重建的过程，让其他线程进行等待，从而确保数据一致性，但线程需要等待，如果锁没有释放，还会导致服务阻塞，甚至不可用的状态。逻辑过期是保证在缓存重建期间服务依然可用，但不能保证数据一致性。
2024-12-13 17:14:24
1270
1
原创 【Redis】Redis 缓存雪崩
例如我们做缓存预热的时候，批量导入数据到缓存中，因为是同一时刻导入的，那么过期时间ttl也是一样的，那么时间一到大量的key就会失效。我们可以设置随机数，在设置过期时间时加上这个随机数，比如设置标准过期时间是30分，随机数的区间是0至10，那么过期时间就可以设置成标准过期时间加上随机数，过期时间就是在30至40分钟这个区间范围内，可以避免大量的key同一时刻失效。：同一时间内缓存中大量的key失效或者Redis服务器宕机，所有的请求到达数据库中。
2024-12-13 11:17:56
345
原创 【Redis】Redis缓存穿透
当布隆过滤器说数据存在，那不一定真的存在，因为可能会出现哈希冲突。但是并不是到这就结束了，既然将空值写到redis了，就会导致我们从redis中命中时，命中的就不一定是商铺信息了，还有可能是空值，因此命中后还需要对结果做判断。：发送一个请求时，会到布隆过滤器中，如果布隆过滤器判断数据不存在，就会直接拒绝请求。如果缓存中没有命中目标，查询就会达到数据库，数据库中也没有目标数据，永远也不会建立缓存，所以每次请求就会到达数据库。之前的逻辑，如果这个数据在书库中不存在，直接就返回404了，这样会有缓存穿透的问题。
2024-12-13 11:05:42
494
原创 【Redis】Redis 缓存更新策略
缓存更新是redis为了节约内存而设计出来的一个东西，主要是因为内存数据宝贵，当我们向redis插入太多数据，此时就可能会导致缓存中的数据过多，所以redis会对部分数据进行更新，或者把他叫为淘汰更合适。：redis自动进行，当redis内存达到咱们设定的max-memery的时候，会自动触发淘汰机制，淘汰掉一些不重要的数据(可以自己设置策略方式)。这种是默认的。这种策略在一定程度上保证了数据一致性，当redis的内存不够时，会自动淘汰一部分的缓存数据。
2024-12-12 19:18:23
1145
原创 【Redis实战】基于Redis保存验证码登录实例
校验手机号是否正确正确，生成验证码。错误 ，给出提示。保存验证码至redis中发送验证码Controller 层service层接口service实现类定义一个类存放常量。
2024-12-09 14:26:30
499
原创 【Redis】Redis基础——Redis命令
方案一：自定义序列化1. 自定义RedisTemplate2. 修改RedisTemplate的序列化器为GenericJackson2JsonRedisSerializer方案二：手动序列化1. 使用StringRedisTemplate2. 写入Redis时，手动把对象序列化为JSON3. 读取Redis时，手动把读取到的JSON反序列化为对象。
2024-12-08 13:56:12
1164
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人