- 博客(111)
- 收藏
- 关注
RSS订阅原创 前端项目依赖包中的依赖包漏洞解决方案
一般情况下，如果是package.json文件中的依赖包出现漏洞，我们可以直接到最新版本或者指定版本即可。还有一种情况就是依赖包中的子依赖包甚至更深层级的包存在漏洞，这个时候改最外层包的版本并不能解决这个问题。
2024-09-26 11:44:43
544
原创 判断GIF类型并使用ImageDecoder解析GIF图
在JavaScript中，判断用户上传的文件是否为GIF文件类型时，通常可以通过检查文件的type属性或文件的拓展名来判断，但是由于文件拓展名可以轻易被用户修改，type属性是由浏览器根据文件拓展名猜测得出的，因此这种判断方式并不总是准确的。为了更准确的判断文件类型，需要读取文件的头部字节，并检查这些字节是否符合GIF文件的规范。
2024-05-29 11:01:15
662
1
原创 自定义canvas的roundRect方法，以兼容低版本浏览器
在部分低版本的浏览器中，HTML5的canvas中，并没有可以直接使用的roundRect方法，所以我们可以使用CanvasRenderingContext2D API中的其他方法来手动绘制带圆角的矩形。
2024-04-23 16:34:08
474
原创 前端流式(stream)请求，获取持续响应的方式
在网络请求中，流(stream)表示持续接收数据的过程。使用流，可以逐步获取服务器响应，而不是等待整个响应完成后一次性获取。通过监听响应对象的 data 事件，可以实现流式请求，主要的写法有直接 pipe 流和手动监听事件两种。使用流可以实现大文件或数据的流传输，有效管理内存，提高传输效率。但需要注意正确处理流事件。
2024-03-18 09:51:53
4545
原创 前端实现双token的无感刷新技术方案
在一些项目中，登录机制是双token机制，即有一个短期token（一般设置为30分钟过期），还有一个刷新token（过期时间比较长，可能1天或多天），用于去重新获取新的短期token。前端的无感刷新技术实现原理主要是，通过axios的拦截器，在响应拦截里获取到后端接口的返回码，根据返回码判断短期token是否过期。若短期token过期，则去请求判断刷新token是否过期的接口，如果刷新token过期，则返回登陆页面。
2024-03-13 11:09:54
998
原创 WebRTC简介及实战应用 — 从0到1实现实时音视频聊天等功能
简单来说，RTCDataChannel 就是在点对点连接中建立一个双向的数据通道，从而获得文本、文件等数据的点对点传输能力。它依赖于流控制传输协议（SCTP），SCTP 是一种传输协议，类似于 TCP 和 UDP，可以直接在 IP 协议之上运行。但是，在 WebRTC 的情况下，SCTP 通过安全的 DTLS 隧道进行隧道传输，该隧道本身在 UDP 之上运行。另外总的来说 RTCDataChannel 和 WebSocket 很像，只不过 WebSocket 不是 P2P 连接，需要服务器做中转。
2024-03-07 19:11:16
4314
原创 前端缓存使用规范
cookie的存储空间非常有限且会携带在请求头中会浪费不必要的流量，如果仅仅是为存储数据，可以采用其他替代方案，例如 webStorage，
2024-03-05 10:33:24
1098
原创 如何开发npm依赖包，并发布到npm
若连接上xxx后就可以通过引入node_modules中的依赖的方式引用xxx进行测试，xxx本地修改后，测试项目中也会实时更新。如果希望打包的文件具有命名空间如@vue，只需修改pacakge.json的name，在前面加上命名空间，再执行打包命令即可。注：上传的npm包，在72小时后不可删除，如果是测试用的包，记得72小时内删除。此处如果有错误，有可能是因为你的npm用的是淘宝镜像，才导致的无法登录成功。输入自己的用户名，密码和邮箱（输入密码时是正常输入的，只是自己看不到）
2024-02-29 10:02:44
1292
原创 vue3 使用 postcss-pxtorem 实现自适应
if(/%/ig.test(px)) { // 有百分号%，特殊处理return px} else {// 144 为设计图尺寸1440除以10。
2024-02-20 16:45:49
3136
原创 vue3版本的录制视频上传案例
HTML5 提供了一种简单而强大的方式来实现视频录制和上传功能。通过使用 HTML5 的video元素和接口，我们可以在浏览器中录制视频，并将其上传到服务器。
2024-02-01 17:05:12
1109
原创 解决webpack或vite项目无效依赖以及子孙依赖安全漏洞升级与兼容性问题的方法
一旦执行升级操作，因为会忽略各依赖间的联系性并统一升级到最新版本，所以可能会出现升级失败的情况，此时会询问用户是否确定并加上 --force 强制升级，如果你仍然想升级，直接输入强制升级即可。根据组件库无风险版本，在 package-lock.json 文件中指定间接依赖的大版本或具体版本号，使用npm update 升级指定依赖。安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。
2024-01-26 10:02:46
1437
原创 关于实现在canvas里使用鼠标拖动图层进行旋转的思路
利用平面向量的叉乘若结果为 —— 正：b在a的逆时针方向；负：b在a的顺时针方向；0：a与b共线注：两向量之间的夹角以小于180度计算。
2023-10-31 15:12:12
488
原创 使用canvas实现时间轴上滑块的各种常用操作（仅供参考）
使用canvas，模拟绘制时间轴区域，有时间刻度标尺，时间轴区域上会有多行，每行都有一个滑块。1、时间刻度标尺可以拖动，会自动对齐整数点秒数，最小步数为0.1秒。2、滑块可以自由拖动，当滑块处于选中状态时，左右两边会出现可拖动的按钮，用于拉伸宽度。3、滑块与滑块之间对齐时会出现对齐虚线，滑块与刻度标尺对齐时，刻度标尺会变色用于提醒用户此时已对齐。4、当滑块拉伸到最右侧区域时，右侧空间不足时，会自动增加右侧空间区域。
2023-10-25 17:07:02
1370
原创 关于Blob链接的一些开发应用
Blob链接是一种基于URL.createObjectURL(blob)生成的链接，可以将文件或数据的内容转换为URL的形式，方便进行下载或者展示。Blob链接可以是二进制数据、音频、视频、图像等。
2023-09-28 15:29:22
1449
原创 vite + vue3 的项目中使用 vitest 做单元测试（仅供参考）
打开 vscode 新建一个 components 目录并新增一个button目录，然后再建一个__test__目录放测试文件，elemetn-plus 源码也是这样做的，在里面新建一个xxx.test.ts 或者 tsx 的文件（没安装tsx就建ts文件）。如果没安装c8，运行命令的话，Vitest 会提示安装 c8，默认yes，回车执行安装。vitest默认会检测项目中所有.test.ts或者.test.tsx等之类的测试文件，这个是可以修改的，具体配置可以参考官网去改。在 vitest 中 集成了。
2023-09-15 17:24:34
3055
原创 JS中字体文件的加载和使用
直接在对应的标签上使用 css 中的 fontFamily 赋值你定义的字体名字即可。加载字体文件主要用到 FontFace 这个对象。检测字体文件是否已加载。
2023-09-15 17:06:55
1916
原创 JS如何正确销毁 VIDEO 和AUDIO 元素
销毁 VIDEO 元素意味着停止视频的播放，并释放与其相关的所有资源。一般情况下，我们可以通过调用 VIDEO 元素的 pause() 方法来停止视频播放，然后使用 remove() 方法从 DOM 树中删除元素。但是，仅仅这样做可能并不能完全卸载 VIDEO 元素。如果视频正在播放或者已经加载了部分数据，那么该元素仍然会持有资源，因此可能会导致内存泄漏。为了彻底卸载 VIDEO 元素，我们需要将其赋值为 null，并且同时删除所有相关事件监听器和其他引用。
2023-09-11 10:26:50
3719
原创 vue3使用canvas实现图层的移动、缩放、旋转等其他编辑操作
一些简单有规则的图形，比如矩形，椭圆，多边形......我们可以使用一些数学函数来计算判断。这种方式非常棒，当你的画布上没有大量的图形时，他可能是非常快的。但是这种方式很难处理那些非常复杂的几何图形。比如说，你正在使用具有二次曲线的线。
2023-08-25 11:00:26
4421
原创 获取标签元素在整个页面(包含滚动条)中的相对位置的方法
有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离，是document对象的scrollTop属性；滚动条滚动的水平距离是document对象的scrollLeft属性。scrollTop和scrollLeft属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。另外，element.scrollIntoView()方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角。
2023-08-24 17:40:12
767
原创 canvas中计算文本的宽度和高度的方法
canvas有text的measureText方法可以获取TextMetrics对象中包含了text的文字信息。通过TextMetrics我们可以直接获得文字的width值，但是却不能直接获得height值。
2023-08-24 17:19:11
4117
原创 Vue组件间的通信方式
子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值父组件绑定监听器获取到子组件传递过来的参数# 父组件# 子组件。
2023-07-12 14:52:20
254
原创 vue项目中实现标签元素的拖动，缩放，旋转等操作
mousedownmouseupmousemovemouseleave用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。会在mousedown、mouseup、click之后触发。都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。都是鼠标进入一个节点时触发。
2023-07-12 11:19:28
3426
原创 微信小程序内实现图层的移动、缩放、旋转等其他编辑操作
图层有3种1、不可操作，只能替换，不可改变层级（最底层）2、可移动，缩放（支持双指缩放），旋转，可改变层级3、可移动，缩放（会改变文字大小，支持双指缩放），旋转，文字编辑区域拉伸长度和宽度（不会改变文字大小），可编辑更改文字属性（内容，字体大小，字体颜色，描边大小，描边颜色，编辑框背景色），可改变层级我们以720*1280的设计图为准，先获取设备上编辑区域的尺寸（实际宽高的像素），然后用编辑区域的宽高和设计图的宽高，就可以得出它们之间的dpi，之后就可以用这个dpi进行转换。
2023-07-03 16:07:09
3963
1
原创 HTML5 2d canvas 库 —— Fabric.js 和 Konva.js
原生 canvas 的操作主要基于上下文，需要使用者自己从0开始去实现一些基本功能，比较复杂。而 canvas 库文件则封装好了许多便利的对象，使得用户可以在比较高级的层面上进行绘制。
2023-06-30 16:38:08
2295
原创 关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式
点击登录按钮，先去检查用户授权信息，会弹出用户授权弹窗（首次），用户点击同意授权之后，调用 wx.login 方法获取登录凭证（code），把code传给后端写的登录接口进行解析登录，这时候用户的头像和昵称可以根据具体项目的需求自己传一个默认的头像图片和昵称给后端登录接口进行初始化。，点击之后可以从bindchooseavatar回调中获取到用户头像信息。之后我们就可以把获取到的微信头像和昵称通过后端接口保存到用户信息里。昵称输入键盘，直接获取到昵称填写进去。
2023-06-30 16:12:00
1841
1
原创 MySQL常见问题的原因及解决方法
为了提供更安全的密码加密方式，从 MySQL 8.0版本开始，默认的密码加密方式是：caching_sha2_password，这个加密的方式在node中不支持，所以需要去修改密码为旧版本。还有一些情况会造成自增不连续，比如事务回滚导致的自增键不连续、自增锁优化带来的不连续等。在这之后，在插入新数据时，自增 id 就是 3，这样就出现了自增字段值不连续的情况。执行下面代码，会发现由于唯一键冲突导致自增不连续的数据表的id字段的自增连续了。由于name字段有唯一键约束，当插入相同内容的字段时，会报。
2023-06-05 15:02:34
718
原创 关于antd-react使用Select组件的defaultValue踩坑及解决方案
在有些项目中，使用antd里的Select组件初始化下拉选项之后，我们可能会有多个tab的切换需求，每一次切换都要改变Select组件的下拉选项数据，以及默认选项，但这时候就可能会出现一种情况就是，我们切换了tab之后，下拉选项的数据是更新了，但是输入框里的默认选项却是我们上一个tab里选中的值，而不是我们切换后的tab的默认的值，即。在Select组件里添加一个key，key值可以设置为tab切换的变量（关于这点，官方API文档好像没有提到）。
2023-05-24 11:22:12
1895
基于SSM/Layui框架的火影忍者风格学生宿舍管理系统
2023-05-14
web/H5前端的简历模板
2023-04-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人