- 博客(80)
- 收藏
- 关注
原创 Axios取消请求,以及全局取消请求封装
这个文件中定义了一个变量,一个数组,cancelTokenList 用于存放每一次请求所对应的 cancelToken。是一个浏览器提供的 API,用于取消正在进行的异步操作,如 Fetch 请求或 Axios 请求。在请求拦截器中添加取消请求的配置,相应拦截器中判断错误类型是否为取消请求。是 Axios 自带的一个类,用于实现请求取消功能。实例,并在 Axios 请求配置中通过 signal 属性传递它。首先编写一个测试接口,模拟接口延迟返回,请求5秒后再返回结果。// 组件销毁前取消所有未完成的请求。
2024-08-12 11:00:27 394
原创 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 364
原创 React + SpringBoot实现图片预览和视频在线播放,其中视频实现切片保存和分段播放
实现播放视频的需求时,往往是前端直接加载一个mp4文件,这样做法在遇到视频文件较大时,容易造成卡顿,不能及时加载出来。播放一点加载一点,这样同一时间内只会加载一小部分的视频,不容易出现播放卡顿的问题。当点击视频时,前端会拿到当前的文件ID请求上面定义好的接口,此时 fielId 肯定不是以 ts 结尾,所以会根据这个 fileId 查询数据库中保存的这条记录,然后调用。文件夹中对视频进行了分片处理,每一片都是以文件ID开头,方便加载分片时找到分片对应的位置。对视频切片使用的是 ffmpeg,可查看我的。
2024-06-08 12:21:40 1344
原创 Ffmpeg安装和简单使用
以下是几个基本的例子,涵盖常见的压缩场景。进入官网 (https://ffmpeg.org/download.html),选择 Window。在处理视频在线播放时可以将一个大的ts视频文件切成多个小的ts文件,并生成一个m3u8索引文件。在下面的例子中,我将向你展示如何从视频中生成一张或多张缩略图。运行这些命令时,请确保输入文件路径正确,并且你有输出目录的写入权限。
2024-06-06 14:24:53 1452
原创 封装一个websocket,支持断网重连、心跳检测,拿来开箱即用
首先使用node编写一个后端服务,用于 WebSocket 连接。,用于美化控制台打印的,这个文件在其他地方也通用。至此一个 WebSocket 就封装好了。然后我这里编写了一个简单的demo页面。关闭连接后,消息就无法发送了。
2024-05-31 10:12:49 605
原创 大屏表格实现无限滚动效果
首先固定最外层的高度,并且设置超出高度后隐藏设置每一行的高度为固定35PX,默认显示10行,所以最外层高度就是 35 * 10 + 表头的高度遍历时克隆一份表格数据,用于视差效果显示设置滚动动画,让表格行所在的父元素 tableTr 不断往上移动,当移动到末尾数据时,此时定义的移动距离 position 刚好时总高度的一半然后重置 position 的距离为0,因为我们克隆了一份数据,此时便不会有闪跳的情况,给人的感觉就是继续往上滚动,从而实现无限滚动的效果
2024-05-28 11:04:15 651
原创 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 2236 2
原创 Ant Design Pro 实现动态菜单
当我们使用了动态返回的菜单时,图标就不出现了,这时需要手动映射icon图标,可参考。中不存在的路由信息,页面将会无法访问,具体问题可参考(最终实现的效果,先给管理员和普通和用户分配不同的菜单。前提说明:实现动态路由时,所有的路由都必须提前在。的 layout 方法,在配置中添加。切换登录不同角色的用户,会显示不同的菜单。实现过程中遇到的问题以及解决方法。接口返回的data菜单格式和。这里二级菜单的图标没有,官方是。中注册好,如果动态返回了。属性即可实现动态菜单。
2024-05-21 17:22:22 703
原创 React函数式组件的父子方法互相调用,父组件调用子组件方法,子组件调用父组件方法
子组件需要使用 forwardRef 函数包裹,然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
2024-05-18 21:57:13 489
原创 前端使用Compressor.js实现图片压缩上传
在使用ElementUI或者其他UI框架的上传组件时,都会有上传之前的钩子函数,在这个函数中可以拿到原始file,这里我用VantUI的上传做演示。afterRead 函数是上传之前的钩子,可以获取到原始file。可以看到压缩前的图片大小3.29M,压缩后343KB。下面是前后的图片对比。
2024-05-10 14:18:13 1122
原创 鸿蒙开发HarmonyOS4.0入门与实践
鸿蒙开发者官网:https://developer.huawei.com/consumer/cn/develop/打开 HUAWEI DevEco Studio和SDK下载和升级 | 华为开发者联盟 网站,选择对应的文件点击下载安装即可安装好之后,选择一个空白项目创建等待工具加载完成,打开这个 pages/Index.ets 文件这个文件是一个入口文件,点击工具的右侧 Previewer 按钮,会出来预览界面,我们在左侧改动代码会实时的在这里显示上面我们修改了文字的颜色,并且给文字添加了一个点击事件,点击之
2024-04-24 10:17:06 956
原创 Java实现短信发送并校验,华为云短信配合Redis实现发送与校验
sms4j使用使用sms4j可以非常简单的实现短信发送功能,并且适配了主流的云平台官方文档地址accessKey、accessKeySecret等可以在华为云控制台,短信服务-我的应用查看template-id、sender 在短信模板审核通过后可以获知更多配置可见:https://sms4j.com/doc3/config.html新建一个 ,这里编写了两个接口,一个用于发送短信,一个用于验证短信。这里用到了Redis做验证码有效期缓存,缓存5分钟还用到了 生成一个6位数纯数字的随机数,这个 是
2024-04-14 18:18:42 1691
原创 使用 vue3-sfc-loader 加载远程Vue文件, 在运行时动态加载 .vue 文件。无需 Node.js 环境,无需 (webpack) 构建步骤
它是Vue3/Vue2 单文件组件加载器。在运行时从 html/js 动态加载 .vue 文件。无需 Node.js 环境,无需 (webpack) 构建步骤。import()
2024-04-11 09:57:14 3316 1
原创 巧用CSS的clamp函数
函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。参考文章:https://mp.weixin.qq.com/s/CsKXJhHOQQzfVEyD0ghiTw。参考文章:https://zhuanlan.zhihu.com/p/512566727。
2024-03-14 10:26:05 1241
原创 仿ElementUI首页滑动图片变色效果
通过分析ElementUI官网,发现是用两张图片结合滚动条的位置来实现图片变色的效果。我们通过监听当前滚动条的位置,来控制第二张图片的高度,覆盖到第一张图片上。
2024-02-26 16:58:02 575
原创 手写Vue3源码
Monorepo是管理项目代码的一种方式,只在一个仓库中管理多个模块/包一个仓库可以维护多个模块,不用到处找仓库方便版本管理和依赖管理,模块之间的引用和调用都非常方便缺点:仓库的体积变大,打包和安装依赖都会变慢例如Vue3源码、element-plus 等都已经采用这种方式来管理项目了解更多可以查看这个文档:https://www.modb.pro/db/626876。
2024-01-19 22:43:37 1012 1
原创 获取代码中所有的中文并排除注释代码
这种代码,但是一个一个找中文比较麻烦,而且容易遗漏,于是就有了下面的代码,可以快速的帮我们找出对应文件中的所有中文,并且把中文放在一个对象中,我们直接复制就可以使用。而且排除了html注释和JS注释,只匹配真正需要的中文。在给项目添加国际化适配时,需要吧代码中的中文一个一个替换成。里面有HTML注释和JS注释,然后使用上面的方法执行一遍。可以看到非常方便的就获取到了真正需要替换的中文。现在我们有一个代码文件,内容如下。// 这是JS注释中文。
2023-11-08 15:47:19 337 3
原创 前端的几种网络请求方式
SSE(Server-Sent Events)是一种用于实现服务器主动向客户端推送数据的技术,也被称为“事件流”(Event Stream)。它基于 HTTP 协议,利用了其长连接特性,在客户端与服务器之间建立一条持久化连接,并通过这条连接实现服务器向客户端的实时数据推送。**定义:**跨站点脚本攻击,简称XSS,是指攻击者利用网站存在的漏洞,通过在网站中注入恶意脚本代码,从而使得用户在访问该网站时受到攻击。
2023-11-05 22:55:24 430
原创 前端接口请求支持内容缓存和过期时间
首先封装一下 axios,这一步可做可不做。但是在实际开发场景中都会对 axios 做二次封装,我们在二次封装的 axios 基础上继续封装,增加支持缓存功能。,当我们想用接口缓存时,就用 catchAjax 方法,不想用时还用上面的 request 文件,互不影响。我们在 1 分钟内连续点击按钮,发现只会走一次接口,但是控制台可以打印多次数据。支持用户自定义缓存时间,在规则时间内读取缓存内容,超出时间后重新请求接口。
2023-10-30 18:15:27 858
原创 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 414
原创 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 371
原创 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 2847 8
原创 生成Android证书
D:\mygitee\keyStore\szxApp.jks是证书要生成的位置。D:\mygitee\keyStore 这个目录必须存在。然后可以看到证书指纹,有MD5、SHA1、SHA256…输入一个秘钥,然后一直回车,最后输入一个y。前提:确保本机安装好了java1.8。szxApp.jks 是证书名称。
2023-10-13 17:48:43 248
原创 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 2950
原创 Webpack5入门到原理
Webpack5学习尚硅谷Webpack5新版视频教程B站直达:https://www.bilibili.com/video/BV14T4y1z7sw百度网盘:https://pan.baidu.com/s/114lJRGua2uHBdLq_iVLOOQ 提取码:yyds阿里云盘:https://www.aliyundrive.com/s/UMkmCzdWsGh(教程配套资料请从百度网盘下载)围观尚硅谷前端课程:http://www.atguigu.com/web更多尚硅谷视频教程请访问:ht
2023-09-05 08:55:18 929
原创 快速入门SringCloud
微服务是一种经过良好架构设计的分布式架构方案,微服务的特征有:在这个文件中管理下面子工程的依赖版本号,然后子工程中引入依赖不需要写版本号EureKa注册中心使用场景假如我们的服务提供者user-service部署了多个实例,如图:大家思考几个问题:这些问题都需要利用SpringCloud中的注册中心来解决,其中最广为人知的注册中心就是Eureka,其结构如下:回答之前的各个问题。问题1:order-service如何得知user-service实例地址?获取地址信息的流程如下:问题2:order-se
2023-06-27 09:39:03 522
原创 Java生成Token并添加拦截器校验Token,实现判断用户是否登录
添加 TokenConfig,设置需要过滤的接口信息,不在过滤中的接口都将配拦截校验是否存在token。在不加Token的情况下,或者Token已经过期的情况下, 发起请求,返回401。将得到的Token加在请求头中,再次发起请求。可以看到本次请求正常返回200。现在生成一个Token,
2023-06-25 15:55:16 1687
原创 Java进行公众号开发的常见使用场景及解决方案
本文总结了本人在开发过程中遇到的有关于微信开发的诸多常见功能,这些问题在网上找都是零散的回答,所以再此总结一下,方便后续开发。如果有错误之处,还望批评指出,下面我们开始吧。
2023-06-04 22:41:13 668
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人