- 博客(90)
- 收藏
- 关注
RSS订阅原创 【无界】微前端技术应用
例如下面的案例，我们在React子应用的请求拦截器上从props获取vue2应用传递过来的token，然后再每次请求时都携带这个token，实现鉴权信息共享。直接使用 WujieVue 标签，传入一个 name 名称，子应用的URL，:sync=“true” 表示同步子应用的路由，页面刷新仍可以保持子应用的地址。我们可以通过props给子应用传递参数，在子应用中，通过下面的方式获取参数。接着就可以像在主应用中一样，在需要的地方直接添加其他子应用的地址。然后在主应用的根目录添加 start.js 脚本文件。
2025-01-17 10:02:37
786
原创 天下苦取件码久已，超好用的取件码APP。支持自定义匹配规则，越过平台限制，一键获取所有取件码，让取件更方便。开源，无广，安全
快递取件助手是一款专注于快递取件场景的实用工具。它能够自动识别并提取快递短信中的取件码，让您不再记忆繁琐的取件码。
2025-01-14 16:40:45
298
原创 使用 Spring AOP 实现日志记录
开发中，就不用为每个接口都去处理日志信息，通过aop切片即可自动的实现日志记录功能。编写完成后，重启项目，当我们访问一个接口时，就会有对应的日志输出了。新建 ControllerLogAspect 类 ，编写如下代码。因为接口中有json输出，所以需要额外引入一个fastjson。结合 logback，查看记录的日志文件。测试访问，查看日志输出结果。额外使用了两个工具类。
2024-12-02 13:05:14
900
原创 使用vue3实现element-plus的主题切换特效
通过调用 API，让浏览器为新旧两种不同视图分别捕获并建立了快照 (即 ::view-transition-old(root)旧快照 和 ::view-transition-new(root) 新快照)，而后新旧两快照在 ::view-transition-image-pair(root) 容器中完成转场动画的过渡。了解了这些，现在想点击按钮，实现一个扩散圆来实现主题切换效果，只需要根据按钮位置，计算圆的半径，然后设置。接收一个函数参数，再函数内部写上操作DOM的逻辑代码即可实现一个默认的过度效果。
2024-11-29 10:19:22
719
原创 SpringBoot logback.xml日志配置常用配置
文件，然后复制下面的内容，和 application.yml 文件平级放即可。该文件主要定义了如下配置。
2024-11-22 13:58:24
370
原创 使用node+prisma+socket+vue3实现一个群聊功能，拓展功能：使用lottie实现入场动画
使用node+prisma+socket+vue3实现一个群聊功能，拓展功能：使用lottie实现入场动画
2024-10-08 17:29:59
1159
原创 实现一个优雅的轮循代码
这段代码会监听 visibilitychange 事件，当页面不显示时，会自动停止轮循，再次进入该页面时会重新进行轮询，然后跳转到其他页面时也会销毁定时器，这样就避免了没必要的请求。// 获取当前时间，格式YYYY-MM-DD HH:mm:ss。// 设置标志变量为 false。// 如果已经在轮询，直接返回。// 设置标志变量为 true。// 组件销毁时，清除定时器。// 定时器，每秒执行一次。// 定义一个标志变量。// 定义一个计时器。
2024-09-23 09:57:48
287
原创 pm2 + linux + nginx
有如下两个文件index.jsres.json({code:200,})});});});这是当我们想把这两个项目同时启动时，通常情况下需要开启两个黑窗口这是我们就可以通过使用pm2来管理多个node项目。
2024-08-31 22:20:40
1231
原创 巧用scss实现一个通用的媒介查询代码
- `$breakpoints` 用作定义一个map，代码中我们定义了不同屏幕的尺寸，如果值是一个数组，也用小括号包裹起来- `map-get($breakpoints,$name)` 从map中获取指定的value，第一个参数时map，第二个参数是key- `type-of` 用于判断一个值的类型，如果是数组类型则返回 list- `nth($bp,1)` 从数组中获取第一项- `@content` 类似与插槽，在 `@include` 的方法体中编写的样式会被用于这里
2024-08-31 11:07:54
890
原创 Axios取消请求，以及全局取消请求封装
这个文件中定义了一个变量，一个数组，cancelTokenList 用于存放每一次请求所对应的 cancelToken。是一个浏览器提供的 API，用于取消正在进行的异步操作，如 Fetch 请求或 Axios 请求。在请求拦截器中添加取消请求的配置，相应拦截器中判断错误类型是否为取消请求。是 Axios 自带的一个类，用于实现请求取消功能。实例，并在 Axios 请求配置中通过 signal 属性传递它。首先编写一个测试接口，模拟接口延迟返回，请求5秒后再返回结果。// 组件销毁前取消所有未完成的请求。
2024-08-12 11:00:27
591
原创 Win系统下使用Docker安装RabbitMQ及延迟插件
访问：https://github.com/rabbitmq/rabbitmq-delayed-message-exchange/releases，找到与之对应的版本，点击下载。首先docker ps -a 显示正在运行的容器，记录下对应的rabbitmq的CONTAINER ID。访问 http://localhost:15672/，默认账号密码为：guest / guest。发现有 x-delayed-message 选型说明延迟队列插件安装成功。然后拷贝插件到容器中。查看插件是否安装成功。
2024-08-11 11:37:57
480
原创 React + SpringBoot实现图片预览和视频在线播放，其中视频实现切片保存和分段播放
实现播放视频的需求时，往往是前端直接加载一个mp4文件，这样做法在遇到视频文件较大时，容易造成卡顿，不能及时加载出来。播放一点加载一点，这样同一时间内只会加载一小部分的视频，不容易出现播放卡顿的问题。当点击视频时，前端会拿到当前的文件ID请求上面定义好的接口，此时 fielId 肯定不是以 ts 结尾，所以会根据这个 fileId 查询数据库中保存的这条记录，然后调用。文件夹中对视频进行了分片处理，每一片都是以文件ID开头，方便加载分片时找到分片对应的位置。对视频切片使用的是 ffmpeg，可查看我的。
2024-06-08 12:21:40
1677
原创 Ffmpeg安装和简单使用
以下是几个基本的例子，涵盖常见的压缩场景。进入官网 (https://ffmpeg.org/download.html)，选择 Window。在处理视频在线播放时可以将一个大的ts视频文件切成多个小的ts文件，并生成一个m3u8索引文件。在下面的例子中，我将向你展示如何从视频中生成一张或多张缩略图。运行这些命令时，请确保输入文件路径正确，并且你有输出目录的写入权限。
2024-06-06 14:24:53
5817
原创 封装一个websocket，支持断网重连、心跳检测，拿来开箱即用
首先使用node编写一个后端服务，用于 WebSocket 连接。，用于美化控制台打印的，这个文件在其他地方也通用。至此一个 WebSocket 就封装好了。然后我这里编写了一个简单的demo页面。关闭连接后，消息就无法发送了。
2024-05-31 10:12:49
697
原创 大屏表格实现无限滚动效果
首先固定最外层的高度，并且设置超出高度后隐藏设置每一行的高度为固定35PX，默认显示10行，所以最外层高度就是 35 * 10 + 表头的高度遍历时克隆一份表格数据，用于视差效果显示设置滚动动画，让表格行所在的父元素 tableTr 不断往上移动，当移动到末尾数据时，此时定义的移动距离 position 刚好时总高度的一半然后重置 position 的距离为0，因为我们克隆了一份数据，此时便不会有闪跳的情况，给人的感觉就是继续往上滚动，从而实现无限滚动的效果
2024-05-28 11:04:15
1301
原创 Java操作Word文档，根据模板生成文件
官方文档：https://deepoove.com/poi-tl/poi-tl（poi template language）是Word模板引擎，使用模板和数据创建很棒的Word文档。在文档的任何地方做任何事情（）是poi-tl的星辰大海。方案移植性功能性易用性Poi-tlJava跨平台Word模板引擎，基于Apache POI，提供更友好的API低代码，准备文档模板和数据即可Apache POIJava跨平台Apache项目，封装了常见的文档操作，也可以操作底层XML结构。
2024-05-23 15:36:12
3688
2
原创 Ant Design Pro 实现动态菜单
当我们使用了动态返回的菜单时，图标就不出现了，这时需要手动映射icon图标，可参考。中不存在的路由信息，页面将会无法访问，具体问题可参考（最终实现的效果，先给管理员和普通和用户分配不同的菜单。前提说明：实现动态路由时，所有的路由都必须提前在。的 layout 方法，在配置中添加。切换登录不同角色的用户，会显示不同的菜单。实现过程中遇到的问题以及解决方法。接口返回的data菜单格式和。这里二级菜单的图标没有，官方是。中注册好，如果动态返回了。属性即可实现动态菜单。
2024-05-21 17:22:22
1314
1
原创 React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
2024-05-18 21:57:13
679
原创 前端使用Compressor.js实现图片压缩上传
在使用ElementUI或者其他UI框架的上传组件时，都会有上传之前的钩子函数，在这个函数中可以拿到原始file，这里我用VantUI的上传做演示。afterRead 函数是上传之前的钩子，可以获取到原始file。可以看到压缩前的图片大小3.29M，压缩后343KB。下面是前后的图片对比。
2024-05-10 14:18:13
1352
原创 鸿蒙开发HarmonyOS4.0入门与实践
鸿蒙开发者官网：https://developer.huawei.com/consumer/cn/develop/打开 HUAWEI DevEco Studio和SDK下载和升级 | 华为开发者联盟 网站，选择对应的文件点击下载安装即可安装好之后，选择一个空白项目创建等待工具加载完成，打开这个 pages/Index.ets 文件这个文件是一个入口文件，点击工具的右侧 Previewer 按钮，会出来预览界面，我们在左侧改动代码会实时的在这里显示上面我们修改了文字的颜色，并且给文字添加了一个点击事件，点击之
2024-04-24 10:17:06
1042
原创 Java实现短信发送并校验，华为云短信配合Redis实现发送与校验
sms4j使用使用sms4j可以非常简单的实现短信发送功能，并且适配了主流的云平台官方文档地址accessKey、accessKeySecret等可以在华为云控制台，短信服务-我的应用查看template-id、sender 在短信模板审核通过后可以获知更多配置可见：https://sms4j.com/doc3/config.html新建一个 ，这里编写了两个接口，一个用于发送短信，一个用于验证短信。这里用到了Redis做验证码有效期缓存，缓存5分钟还用到了 生成一个6位数纯数字的随机数，这个 是
2024-04-14 18:18:42
1995
原创 使用 vue3-sfc-loader 加载远程Vue文件， 在运行时动态加载 .vue 文件。无需 Node.js 环境，无需 (webpack) 构建步骤
它是Vue3/Vue2 单文件组件加载器。在运行时从 html/js 动态加载 .vue 文件。无需 Node.js 环境，无需 (webpack) 构建步骤。import()
2024-04-11 09:57:14
4885
1
原创 巧用CSS的clamp函数
函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。参考文章：https://mp.weixin.qq.com/s/CsKXJhHOQQzfVEyD0ghiTw。参考文章：https://zhuanlan.zhihu.com/p/512566727。
2024-03-14 10:26:05
1299
原创 仿ElementUI首页滑动图片变色效果
通过分析ElementUI官网，发现是用两张图片结合滚动条的位置来实现图片变色的效果。我们通过监听当前滚动条的位置，来控制第二张图片的高度，覆盖到第一张图片上。
2024-02-26 16:58:02
613
原创 手写Vue3源码
Monorepo是管理项目代码的一种方式，只在一个仓库中管理多个模块/包一个仓库可以维护多个模块，不用到处找仓库方便版本管理和依赖管理，模块之间的引用和调用都非常方便缺点：仓库的体积变大，打包和安装依赖都会变慢例如Vue3源码、element-plus 等都已经采用这种方式来管理项目了解更多可以查看这个文档：https://www.modb.pro/db/626876。
2024-01-19 22:43:37
1095
1
原创 获取代码中所有的中文并排除注释代码
这种代码，但是一个一个找中文比较麻烦，而且容易遗漏，于是就有了下面的代码，可以快速的帮我们找出对应文件中的所有中文，并且把中文放在一个对象中，我们直接复制就可以使用。而且排除了html注释和JS注释，只匹配真正需要的中文。在给项目添加国际化适配时，需要吧代码中的中文一个一个替换成。里面有HTML注释和JS注释，然后使用上面的方法执行一遍。可以看到非常方便的就获取到了真正需要替换的中文。现在我们有一个代码文件，内容如下。// 这是JS注释中文。
2023-11-08 15:47:19
452
3
原创 前端的几种网络请求方式
SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。**定义：**跨站点脚本攻击，简称XSS，是指攻击者利用网站存在的漏洞，通过在网站中注入恶意脚本代码，从而使得用户在访问该网站时受到攻击。
2023-11-05 22:55:24
482
原创 前端接口请求支持内容缓存和过期时间
首先封装一下 axios，这一步可做可不做。但是在实际开发场景中都会对 axios 做二次封装，我们在二次封装的 axios 基础上继续封装，增加支持缓存功能。，当我们想用接口缓存时，就用 catchAjax 方法，不想用时还用上面的 request 文件，互不影响。我们在 1 分钟内连续点击按钮，发现只会走一次接口，但是控制台可以打印多次数据。支持用户自定义缓存时间，在规则时间内读取缓存内容，超出时间后重新请求接口。
2023-10-30 18:15:27
935
原创 vue3-vite-ts-pinia
Vue3 + vite + Ts + pinia + 实战 + 源码 +electron仓库地址：https://gitee.com/szxio/vue3-vite-ts-pinia视频地址：小满Vue3（课程导读）_哔哩哔哩_bilibili课件地址：Vue3_小满zs的博客-CSDN博客初始化Vue3项目方式一npm init vite@latest生成的目录结构vite-demo├── .vscode│ └── extensions.json├── public│
2023-10-30 13:31:30
467
原创 vue3-vite-ts-pinia
watchEffect不需要传入任何参数，它是一个函数，当依赖变化时，这个函数就会执行，它内部会根据响应式数据的依赖关系，自动执行监听函数left: 50%;top: 50%;bottom: 0;left: 0;right: 0;console.log("宽高变化")// 声明一个局部自定义指令，必须以v开头created(){},},},},
2023-10-28 16:22:51
421
原创 Vue3 + Echarts(5.x) 实现中国地图
下载地址：https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/china.js，下载到本地使用即可。在echarts5.x版本中，已经不再提供地图数据，所以需要我们自己手动下载，我这里已经提供好了下载地址。文件代码，这个文件主要是通过省份名称获取经纬度。在这个版本中的引入方式必须是下面这种方法。默认安装的是 5.x 版本。然后下面是地图实现源码。
2023-10-19 20:29:49
3909
9
原创 生成Android证书
D:\mygitee\keyStore\szxApp.jks是证书要生成的位置。D:\mygitee\keyStore 这个目录必须存在。然后可以看到证书指纹，有MD5、SHA1、SHA256…输入一个秘钥，然后一直回车，最后输入一个y。前提：确保本机安装好了java1.8。szxApp.jks 是证书名称。
2023-10-13 17:48:43
367
原创 vue3自定义全局Loading
如果完整引入了 Element Plus，那么上会有一个全局方法$loading，同样会返回一个 Loading 实例。名称说明类型默认targetLoading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入以获取到对应 DOM 节点stringbody同v-loading指令中的body修饰符booleanfalsefullscreen同v-loading指令中的fullscreen修饰符booleantruelock同。
2023-09-25 17:38:51
3481
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人