自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

不怕麻烦的鹿丸的博客

麻烦死了~~

  • 博客(107)
  • 收藏
  • 关注

原创 自定义滚动条样式vue组件

模拟mac系统的滚动条样式,鼠标滚动显示,不滚动则消失。

2024-03-27 18:56:14 234

原创 js读取本地 excel文件、txt文件的内容

一个可以解析获取本地excel文件和txt文件的按钮组件,可以自定义插槽内容。

2024-03-20 16:20:49 394

原创 前端流式(stream)请求,获取持续响应的方式

在网络请求中,流(stream)表示持续接收数据的过程。使用流,可以逐步获取服务器响应,而不是等待整个响应完成后一次性获取。通过监听响应对象的 data 事件,可以实现流式请求,主要的写法有直接 pipe 流和手动监听事件两种。使用流可以实现大文件或数据的流传输,有效管理内存,提高传输效率。但需要注意正确处理流事件。

2024-03-18 09:51:53 1372

原创 前端实现双token的无感刷新技术方案

在一些项目中,登录机制是双token机制,即有一个短期token(一般设置为30分钟过期),还有一个刷新token(过期时间比较长,可能1天或多天),用于去重新获取新的短期token。前端的无感刷新技术实现原理主要是,通过axios的拦截器,在响应拦截里获取到后端接口的返回码,根据返回码判断短期token是否过期。若短期token过期,则去请求判断刷新token是否过期的接口,如果刷新token过期,则返回登陆页面。

2024-03-13 11:09:54 613

原创 前端在浏览器端播放直播流协议的方式

直播流协议2种:.flv后缀是http-flv协议,.m3u8后缀是hls协议。

2024-03-11 16:30:42 974

原创 WebRTC简介及实战应用 — 从0到1实现实时音视频聊天等功能

简单来说,RTCDataChannel 就是在点对点连接中建立一个双向的数据通道,从而获得文本、文件等数据的点对点传输能力。它依赖于流控制传输协议(SCTP),SCTP 是一种传输协议,类似于 TCP 和 UDP,可以直接在 IP 协议之上运行。但是,在 WebRTC 的情况下,SCTP 通过安全的 DTLS 隧道进行隧道传输,该隧道本身在 UDP 之上运行。另外总的来说 RTCDataChannel 和 WebSocket 很像,只不过 WebSocket 不是 P2P 连接,需要服务器做中转。

2024-03-07 19:11:16 1036

原创 前端缓存使用规范

cookie的存储空间非常有限且会携带在请求头中会浪费不必要的流量,如果仅仅是为存储数据,可以采用其他替代方案,例如 webStorage,

2024-03-05 10:33:24 949

原创 如何开发npm依赖包,并发布到npm

若连接上xxx后就可以通过引入node_modules中的依赖的方式引用xxx进行测试,xxx本地修改后,测试项目中也会实时更新。如果希望打包的文件具有命名空间如@vue,只需修改pacakge.json的name,在前面加上命名空间,再执行打包命令即可。注:上传的npm包,在72小时后不可删除,如果是测试用的包,记得72小时内删除。此处如果有错误,有可能是因为你的npm用的是淘宝镜像,才导致的无法登录成功。输入自己的用户名,密码和邮箱(输入密码时是正常输入的,只是自己看不到)

2024-02-29 10:02:44 994

原创 vue3 使用 postcss-pxtorem 实现自适应

if(/%/ig.test(px)) { // 有百分号%,特殊处理return px} else {// 144 为设计图尺寸1440除以10。

2024-02-20 16:45:49 1351

原创 vue3版本的录制视频上传案例

HTML5 提供了一种简单而强大的方式来实现视频录制和上传功能。通过使用 HTML5 的video元素和接口,我们可以在浏览器中录制视频,并将其上传到服务器。

2024-02-01 17:05:12 544

原创 使用vue3自定义指令实现Tooltip

【代码】使用vue3自定义指令实现Tooltip。

2024-01-31 09:23:55 551

原创 自定义vue通用左侧菜单组件(未完善版本)

传入一个菜单数组数据,自动生成一个左侧菜单栏。菜单栏可以添加、删除、展开、重命名,拖动插入位置等。

2024-01-29 15:32:48 556

原创 关于前端脚手架的依赖升级和去风险版本可能遇到的问题

根据组件库无风险版本,在 package-lock.json 文件中指定间接依赖的大版本或具体版本号,使用npm update 升级指定依赖。安装时忽略所有peerDependencies,忽视依赖冲突,采用npm版本4到版本6的样式去安装依赖,已有的依赖不会覆盖。的情况,此时会询问用户是否确定并加上 --force 强制升级,如果你仍然想升级,直接输入强制升级即可。执行完后,如果之前没安装,会提示安装 npm-check-updates 插件,输入 y 同意。

2024-01-26 10:02:46 1097

原创 js修改浏览器地址栏里url的方法

【代码】js修改浏览器地址栏里url的方法。

2023-11-23 14:18:21 654

原创 JS数组里任意2个元素交换位置的方法

/ 传入数组,以及要交换位置的2个元素的下标return arr。

2023-11-16 14:48:35 324

原创 小DEMO:css制作圆滑梯形按钮

【代码】小DEMO:css制作圆滑梯形按钮。

2023-11-15 17:09:26 249

原创 小DEMO:在vue中自定义range组件

【代码】小DEMO:在vue中自定义range组件。

2023-11-15 16:08:10 237

原创 关于实现在canvas里使用鼠标拖动图层进行旋转的思路

利用平面向量的叉乘若结果为 —— 正:b在a的逆时针方向;负:b在a的顺时针方向;0:a与b共线注:两向量之间的夹角以小于180度计算。

2023-10-31 15:12:12 344

原创 使用canvas实现时间轴上滑块的各种常用操作(仅供参考)

使用canvas,模拟绘制时间轴区域,有时间刻度标尺,时间轴区域上会有多行,每行都有一个滑块。1、时间刻度标尺可以拖动,会自动对齐整数点秒数,最小步数为0.1秒。2、滑块可以自由拖动,当滑块处于选中状态时,左右两边会出现可拖动的按钮,用于拉伸宽度。3、滑块与滑块之间对齐时会出现对齐虚线,滑块与刻度标尺对齐时,刻度标尺会变色用于提醒用户此时已对齐。4、当滑块拉伸到最右侧区域时,右侧空间不足时,会自动增加右侧空间区域。

2023-10-25 17:07:02 643

原创 关于Blob链接的一些开发应用

Blob链接是一种基于URL.createObjectURL(blob)生成的链接,可以将文件或数据的内容转换为URL的形式,方便进行下载或者展示。Blob链接可以是二进制数据、音频、视频、图像等。

2023-09-28 15:29:22 841

原创 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 1796

原创 JS中字体文件的加载和使用

直接在对应的标签上使用 css 中的 fontFamily 赋值你定义的字体名字即可。加载字体文件主要用到 FontFace 这个对象。检测字体文件是否已加载。

2023-09-15 17:06:55 1196

原创 JavaScript中获取屏幕,窗口和网页大小

【代码】JavaScript中获取屏幕,窗口和网页大小。

2023-09-14 17:55:22 470

原创 JS 中 RGBA 四通道颜色的叠加计算方法

【代码】JS 中 RGBA 四通道颜色的叠加计算方法。

2023-09-14 17:32:17 233

原创 JS如何正确销毁 VIDEO 和AUDIO 元素

销毁 VIDEO 元素意味着停止视频的播放,并释放与其相关的所有资源。一般情况下,我们可以通过调用 VIDEO 元素的 pause() 方法来停止视频播放,然后使用 remove() 方法从 DOM 树中删除元素。但是,仅仅这样做可能并不能完全卸载 VIDEO 元素。如果视频正在播放或者已经加载了部分数据,那么该元素仍然会持有资源,因此可能会导致内存泄漏。为了彻底卸载 VIDEO 元素,我们需要将其赋值为 null,并且同时删除所有相关事件监听器和其他引用。

2023-09-11 10:26:50 1784

原创 vue3使用canvas实现图层的移动、缩放、旋转等其他编辑操作

一些简单有规则的图形,比如矩形,椭圆,多边形......我们可以使用一些数学函数来计算判断。这种方式非常棒,当你的画布上没有大量的图形时,他可能是非常快的。但是这种方式很难处理那些非常复杂的几何图形。比如说,你正在使用具有二次曲线的线。

2023-08-25 11:00:26 1917

原创 获取标签元素在整个页面(包含滚动条)中的相对位置的方法

有了绝对位置以后,获得相对位置就很容易了,只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离,是document对象的scrollTop属性;滚动条滚动的水平距离是document对象的scrollLeft属性。scrollTop和scrollLeft属性是可以赋值的,并且会立即自动滚动网页到相应位置,因此可以利用它们改变网页元素的相对位置。另外,element.scrollIntoView()方法也有类似作用,可以使网页元素出现在浏览器窗口的左上角。

2023-08-24 17:40:12 480

原创 canvas中计算文本的宽度和高度的方法

canvas有text的measureText方法可以获取TextMetrics对象中包含了text的文字信息。通过TextMetrics我们可以直接获得文字的width值,但是却不能直接获得height值。

2023-08-24 17:19:11 2283

原创 Vue组件间的通信方式

子组件通过$emit触发自定义事件,$emit第二个参数为传递的数值父组件绑定监听器获取到子组件传递过来的参数# 父组件# 子组件。

2023-07-12 14:52:20 159

原创 vue项目中实现标签元素的拖动,缩放,旋转等操作

mousedownmouseupmousemovemouseleave用户在同一个位置先完成mousedown动作,再完成mouseup动作。因此,触发顺序是,mousedown首先触发,mouseup接着触发,click最后触发。会在mousedown、mouseup、click之后触发。都是鼠标进入一个节点时触发。两者的区别是,mouseenter事件只触发一次,而只要鼠标在节点内部移动,mouseover事件会在子节点上触发多次。都是鼠标进入一个节点时触发。

2023-07-12 11:19:28 2576

原创 微信小程序内实现图层的移动、缩放、旋转等其他编辑操作

图层有3种1、不可操作,只能替换,不可改变层级(最底层)2、可移动,缩放(支持双指缩放),旋转,可改变层级3、可移动,缩放(会改变文字大小,支持双指缩放),旋转,文字编辑区域拉伸长度和宽度(不会改变文字大小),可编辑更改文字属性(内容,字体大小,字体颜色,描边大小,描边颜色,编辑框背景色),可改变层级我们以720*1280的设计图为准,先获取设备上编辑区域的尺寸(实际宽高的像素),然后用编辑区域的宽高和设计图的宽高,就可以得出它们之间的dpi,之后就可以用这个dpi进行转换。

2023-07-03 16:07:09 2890 1

原创 HTML5 2d canvas 库 —— Fabric.js 和 Konva.js

原生 canvas 的操作主要基于上下文,需要使用者自己从0开始去实现一些基本功能,比较复杂。而 canvas 库文件则封装好了许多便利的对象,使得用户可以在比较高级的层面上进行绘制。

2023-06-30 16:38:08 1661

原创 关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式

点击登录按钮,先去检查用户授权信息,会弹出用户授权弹窗(首次),用户点击同意授权之后,调用 wx.login 方法获取登录凭证(code),把code传给后端写的登录接口进行解析登录,这时候用户的头像和昵称可以根据具体项目的需求自己传一个默认的头像图片和昵称给后端登录接口进行初始化。,点击之后可以从bindchooseavatar回调中获取到用户头像信息。之后我们就可以把获取到的微信头像和昵称通过后端接口保存到用户信息里。昵称输入键盘,直接获取到昵称填写进去。

2023-06-30 16:12:00 1427 1

原创 从0到1使用NodeJS编写后端接口的实战案例(仅供参考)

基于vue和node.js来开发的一个在线商城管理系统。

2023-06-18 13:58:18 4767 3

原创 MySQL常见问题的原因及解决方法

为了提供更安全的密码加密方式,从 MySQL 8.0版本开始,默认的密码加密方式是:caching_sha2_password,这个加密的方式在node中不支持,所以需要去修改密码为旧版本。还有一些情况会造成自增不连续,比如事务回滚导致的自增键不连续、自增锁优化带来的不连续等。在这之后,在插入新数据时,自增 id 就是 3,这样就出现了自增字段值不连续的情况。执行下面代码,会发现由于唯一键冲突导致自增不连续的数据表的id字段的自增连续了。由于name字段有唯一键约束,当插入相同内容的字段时,会报。

2023-06-05 15:02:34 541

原创 关于antd-react使用Select组件的defaultValue踩坑及解决方案

在有些项目中,使用antd里的Select组件初始化下拉选项之后,我们可能会有多个tab的切换需求,每一次切换都要改变Select组件的下拉选项数据,以及默认选项,但这时候就可能会出现一种情况就是,我们切换了tab之后,下拉选项的数据是更新了,但是输入框里的默认选项却是我们上一个tab里选中的值,而不是我们切换后的tab的默认的值,即。在Select组件里添加一个key,key值可以设置为tab切换的变量(关于这点,官方API文档好像没有提到)。

2023-05-24 11:22:12 1392

原创 Node.js 连接 mysql 数据库

mysql的兼容升级npm包mysql2,mysql2兼容mysql的api语法。默认情况下,驱动程序会将 mysql 类型转换为原生 JavaScript 类型。可以使用 navicat premium 等数据库可视化工具进行查看操作数据库。使用起来没有太大的差别,但是mysql2在性能上面提升很大。使用 express-generator 来快速搭建一个项目。可以使用浏览器或 postman 来调用接口查看返回的情况。server是入口文件 index.js 的文件夹的名字。

2023-05-17 14:32:21 4392

原创 基于SSM/Layui框架的火影忍者风格学生宿舍管理系统

本项目是一套基于SSM+Layui的高校宿舍管理系统,主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的Java学习者。包含:项目源码、数据库脚本等,以及项目运行所必须安装的软件和系统环境配置,该项目可以直接作为毕设使用。项目经过严格调试,可打包部署搭建,确保可以运行!基于SSM+Layui框架开发的高校宿舍管理系统。系统的主要用户分为系统管理员、宿舍管理人员和学生用户。

2023-05-14 19:37:38 700 1

原创 关于使用SSM框架搭建的项目的运行方法

​一 运行环境JDK8、Tomcat8、MySQL5.7、IntelliJ IDEA、Maven一 相关技术Spring、Spring MVC、MyBatis、layui、jQuery运行环境配置1、安装 IDEA 开发工具官网下载:下载 IntelliJ IDEA – 领先的 Java 和 Kotlin IDEIDEA新版本已经支持 官方中文版和JDK 直接下载中文版设置中文版的支持需要借助 JetBrains 官方提供的 Chinese (

2023-05-10 21:49:17 3439

原创 vue项目使用echart实现动态心电图效果

通过requestAnimationFrame的方法,不断循环调用echart对象的setOption方法,每次改变一下series里面的data数据(即每次在data数组最后push一个数据,如果数组总数达到设置的一屏最大数,则先shift开头的一个数据,再结尾push一个数据),达到动态更新曲线图,实现心电图动画效果。

2023-04-27 15:57:28 2073 1

基于SSM/Layui框架的火影忍者风格学生宿舍管理系统

基于SSM/Layui框架的火影忍者风格学生宿舍管理系统 1、项目简介 本项目是一套基于SSM+Layui的高校宿舍管理系统,主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的Java学习者。 包含:项目源码、数据库脚本等,以及项目运行所必须安装的软件和系统环境配置,该项目可以直接作为毕设使用。 项目经过严格调试,可打包部署搭建,确保可以运行! 2、使用技术 使用框架:Spring,SpringMVC,Mybatis 数据库:MySQL 加密:MD5加密 前端框架:jsp,Layui框架 开发工具:IDEA(推荐) / MyEclipse / Eclipse 3、功能介绍 基于SSM+Layui框架开发的高校宿舍管理系统。 系统的主要用户分为系统管理员、宿舍管理人员和学生用户。 实现的主要功能: 1. 管理员的登录与登出 2. 管理员,班级,学生,宿舍,卫生,访客各模块的增删改查 3. 个别模块关联查询 4. 各个模块数据导出Excel 5. 通过MD5对数据进行加密,保证安全性

2023-05-14

web/H5前端的简历模板

web/H5前端的简历模板 该简历模板比较简洁,适合有意向从事web/H5前端工作的毕业生或想要入门前端的各行各业的新手参考,求职写简历,基本涵盖简历所需的各个方面。

2023-04-25

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除