- 博客(118)
- 收藏
- 关注
RSS订阅原创 Node.js项目开启多进程的2种方案
当node项目只部署一个单进程单实例时，遇到异常发生后程序会崩溃，此时杀掉进程在重启单这段时间会导致服务不能正常使用，这显然会影响用户体验。所以需要以多进程的模式去部署应用，这样当某一个进程发生异常重启时，此时有其他请求被接受后，其他进程依旧可以对外提供服务，当然前提是你的应用不能够异常多的数不过来。
2025-04-14 10:51:21
1018
原创 node.js判断在线图片链接是否是webp，并将其转格式后上传
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。编码规则：把3个字节变成4个字节；每76个字符加一个换行符；最后的结束符也要处理。File 对象通常是用户在网页中的一个 元素上传文件返回的 FileList 对象，或者是拖放操作返回的 DataTransfer 对象，也可以在浏览器中的控制台中自己创建。拿到file数据后就可以通过上传接口把数据上传上去。Blob是一种二进制数据类型，通常表示。、图片、音频或视频等媒体资源。
2025-03-19 18:07:41
630
原创 web前端录制canvas视频和video的声音，并合并成一个文件进行下载
是一个方法，用于捕获指定元素的媒体流。该方法通常用于从、或元素中捕获实时视频流或音频流，以便进行进一步的处理，如直播、录制或分析。方法能够实时捕获视频流，适用于直播、实时监控等场景。它返回一个对象，该对象包含了捕获的视频流数据。相比其他视频捕获方法，提供了较低的延迟和更好的灵活性。canplay。
2025-02-10 17:25:27
730
原创 移动端IOS的H5页面被键盘顶起后，底部有一大片空白区域的解决方法
在移动端开发中，当使用HTML5 (特别是在Vue.js框架下)构建应用时，经常会遇到键盘弹出导致页面内容被顶起的问题。当键盘收起后，页面未能自动恢复到原来的位置。当键盘弹出时，你可以通过JavaScript监听键盘的显示和隐藏事件，并相应地调整页面的滚动位置。
2025-01-23 15:53:58
486
原创 移动端 - IOS的兼容性问题
在iOS中，如果你想通过JavaScript阻止视频在标签中弹出播放器窗口并在内嵌播放器中播放，你可以设置属性并确保你的网页是在移动设备上打开的。还需要允许网站在其浏览器中使用媒体播放器的内联模式。此外，对于iOS 10及以上版本，还需要在页面的部分添加属性。
2025-01-13 17:12:51
283
原创 Vue3自定义组件里数据双向绑定的实现
defineModel()返回的值是一个ref，它可以像其他ref一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用。因为defineModel声明了一个prop，你可以通过给它传递选项，来声明底层prop的选项 1个数据的双向绑定 多个数据的双向绑定1个数据的双向绑定多个数据的双向绑定三、案例 —— 自定义勾选按钮
2024-11-28 10:55:56
1494
原创 前端项目依赖包中的依赖包漏洞解决方案
一般情况下，如果是package.json文件中的依赖包出现漏洞，我们可以直接到最新版本或者指定版本即可。还有一种情况就是依赖包中的子依赖包甚至更深层级的包存在漏洞，这个时候改最外层包的版本并不能解决这个问题。
2024-09-26 11:44:43
1064
1
原创 判断GIF类型并使用ImageDecoder解析GIF图
在JavaScript中，判断用户上传的文件是否为GIF文件类型时，通常可以通过检查文件的type属性或文件的拓展名来判断，但是由于文件拓展名可以轻易被用户修改，type属性是由浏览器根据文件拓展名猜测得出的，因此这种判断方式并不总是准确的。为了更准确的判断文件类型，需要读取文件的头部字节，并检查这些字节是否符合GIF文件的规范。
2024-05-29 11:01:15
915
1
原创 自定义canvas的roundRect方法，以兼容低版本浏览器
在部分低版本的浏览器中，HTML5的canvas中，并没有可以直接使用的roundRect方法，所以我们可以使用CanvasRenderingContext2D API中的其他方法来手动绘制带圆角的矩形。
2024-04-23 16:34:08
676
原创 前端流式(stream)请求，获取持续响应的方式
在网络请求中，流(stream)表示持续接收数据的过程。使用流，可以逐步获取服务器响应，而不是等待整个响应完成后一次性获取。通过监听响应对象的 data 事件，可以实现流式请求，主要的写法有直接 pipe 流和手动监听事件两种。使用流可以实现大文件或数据的流传输，有效管理内存，提高传输效率。但需要注意正确处理流事件。
2024-03-18 09:51:53
6616
原创 前端实现双token的无感刷新技术方案
在一些项目中，登录机制是双token机制，即有一个短期token（一般设置为30分钟过期），还有一个刷新token（过期时间比较长，可能1天或多天），用于去重新获取新的短期token。前端的无感刷新技术实现原理主要是，通过axios的拦截器，在响应拦截里获取到后端接口的返回码，根据返回码判断短期token是否过期。若短期token过期，则去请求判断刷新token是否过期的接口，如果刷新token过期，则返回登陆页面。
2024-03-13 11:09:54
1117
原创 WebRTC简介及实战应用 — 从0到1实现实时音视频聊天等功能
简单来说，RTCDataChannel 就是在点对点连接中建立一个双向的数据通道，从而获得文本、文件等数据的点对点传输能力。它依赖于流控制传输协议（SCTP），SCTP 是一种传输协议，类似于 TCP 和 UDP，可以直接在 IP 协议之上运行。但是，在 WebRTC 的情况下，SCTP 通过安全的 DTLS 隧道进行隧道传输，该隧道本身在 UDP 之上运行。另外总的来说 RTCDataChannel 和 WebSocket 很像，只不过 WebSocket 不是 P2P 连接，需要服务器做中转。
2024-03-07 19:11:16
4960
1
原创 前端缓存使用规范
cookie的存储空间非常有限且会携带在请求头中会浪费不必要的流量，如果仅仅是为存储数据，可以采用其他替代方案，例如 webStorage，
2024-03-05 10:33:24
1178
原创 如何开发npm依赖包，并发布到npm
若连接上xxx后就可以通过引入node_modules中的依赖的方式引用xxx进行测试，xxx本地修改后，测试项目中也会实时更新。如果希望打包的文件具有命名空间如@vue，只需修改pacakge.json的name，在前面加上命名空间，再执行打包命令即可。注：上传的npm包，在72小时后不可删除，如果是测试用的包，记得72小时内删除。此处如果有错误，有可能是因为你的npm用的是淘宝镜像，才导致的无法登录成功。输入自己的用户名，密码和邮箱（输入密码时是正常输入的，只是自己看不到）
2024-02-29 10:02:44
1542
原创 vue3 使用 postcss-pxtorem 实现自适应
if(/%/ig.test(px)) { // 有百分号%，特殊处理return px} else {// 144 为设计图尺寸1440除以10。
2024-02-20 16:45:49
4049
原创 vue3版本的录制视频上传案例
HTML5 提供了一种简单而强大的方式来实现视频录制和上传功能。通过使用 HTML5 的video元素和接口，我们可以在浏览器中录制视频，并将其上传到服务器。
2024-02-01 17:05:12
1386
原创 解决webpack或vite项目无效依赖以及子孙依赖安全漏洞升级与兼容性问题的方法
一旦执行升级操作，因为会忽略各依赖间的联系性并统一升级到最新版本，所以可能会出现升级失败的情况，此时会询问用户是否确定并加上 --force 强制升级，如果你仍然想升级，直接输入强制升级即可。根据组件库无风险版本，在 package-lock.json 文件中指定间接依赖的大版本或具体版本号，使用npm update 升级指定依赖。安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。
2024-01-26 10:02:46
1648
原创 关于实现在canvas里使用鼠标拖动图层进行旋转的思路
利用平面向量的叉乘若结果为 —— 正：b在a的逆时针方向；负：b在a的顺时针方向；0：a与b共线注：两向量之间的夹角以小于180度计算。
2023-10-31 15:12:12
552
原创 使用canvas实现时间轴上滑块的各种常用操作（仅供参考）
使用canvas，模拟绘制时间轴区域，有时间刻度标尺，时间轴区域上会有多行，每行都有一个滑块。1、时间刻度标尺可以拖动，会自动对齐整数点秒数，最小步数为0.1秒。2、滑块可以自由拖动，当滑块处于选中状态时，左右两边会出现可拖动的按钮，用于拉伸宽度。3、滑块与滑块之间对齐时会出现对齐虚线，滑块与刻度标尺对齐时，刻度标尺会变色用于提醒用户此时已对齐。4、当滑块拉伸到最右侧区域时，右侧空间不足时，会自动增加右侧空间区域。
2023-10-25 17:07:02
1679
原创 关于Blob链接的一些开发应用
Blob链接是一种基于URL.createObjectURL(blob)生成的链接，可以将文件或数据的内容转换为URL的形式，方便进行下载或者展示。Blob链接可以是二进制数据、音频、视频、图像等。
2023-09-28 15:29:22
1641
原创 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
3523
原创 JS中字体文件的加载和使用
直接在对应的标签上使用 css 中的 fontFamily 赋值你定义的字体名字即可。加载字体文件主要用到 FontFace 这个对象。检测字体文件是否已加载。
2023-09-15 17:06:55
2367
原创 JS如何正确销毁 VIDEO 和AUDIO 元素
销毁 VIDEO 元素意味着停止视频的播放，并释放与其相关的所有资源。一般情况下，我们可以通过调用 VIDEO 元素的 pause() 方法来停止视频播放，然后使用 remove() 方法从 DOM 树中删除元素。但是，仅仅这样做可能并不能完全卸载 VIDEO 元素。如果视频正在播放或者已经加载了部分数据，那么该元素仍然会持有资源，因此可能会导致内存泄漏。为了彻底卸载 VIDEO 元素，我们需要将其赋值为 null，并且同时删除所有相关事件监听器和其他引用。
2023-09-11 10:26:50
4734
原创 vue3使用canvas实现图层的移动、缩放、旋转等其他编辑操作
一些简单有规则的图形，比如矩形，椭圆，多边形......我们可以使用一些数学函数来计算判断。这种方式非常棒，当你的画布上没有大量的图形时，他可能是非常快的。但是这种方式很难处理那些非常复杂的几何图形。比如说，你正在使用具有二次曲线的线。
2023-08-25 11:00:26
5485
原创 获取标签元素在整个页面(包含滚动条)中的相对位置的方法
有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离，是document对象的scrollTop属性；滚动条滚动的水平距离是document对象的scrollLeft属性。scrollTop和scrollLeft属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。另外，element.scrollIntoView()方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角。
2023-08-24 17:40:12
877
原创 canvas中计算文本的宽度和高度的方法
canvas有text的measureText方法可以获取TextMetrics对象中包含了text的文字信息。通过TextMetrics我们可以直接获得文字的width值，但是却不能直接获得height值。
2023-08-24 17:19:11
5129
原创 Vue组件间的通信方式
子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值父组件绑定监听器获取到子组件传递过来的参数# 父组件# 子组件。
2023-07-12 14:52:20
322
基于SSM/Layui框架的火影忍者风格学生宿舍管理系统
2023-05-14
web/H5前端的简历模板
2023-04-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人