- 博客(41)
- 收藏
- 关注
RSS订阅原创 前端可视化-----svg学习笔记
SVG是一种基于XML的矢量图形格式，通过代码描述图形，可无限放大不失真。其工作原理是浏览器解析SVG代码后渲染显示。创建SVG文件只需在文本编辑器中编写代码，如绘制圆形的基本语法。SVG支持7种基本图形元素（矩形、圆形、椭圆等）和路径绘制，并可通过CSS和JavaScript实现样式美化、动画效果及交互功能。此外还支持文本处理、分组管理和元素复用。SVG可直接嵌入HTML或Vue等框架使用，适用于各种场景的矢量图形绘制需求。
2025-12-18 10:43:44
271
原创 前端直播开发入门：搞懂推流拉流，掌握播放器核心
摘要：前端直播开发的核心是拉流播放，不涉及主播端推流流程。HLS协议因其兼容性好、CDN友好和移动端支持成为首选方案。代码示例展示了一个基于Vue的HLS播放器实现，包括自动检测浏览器支持、动态加载hls.js库、错误处理和资源清理等功能。该方案支持Safari原生播放和其他浏览器通过hls.js播放，并考虑了自动播放限制和不同浏览器的兼容性问题，为前端直播播放提供了完整的解决方案。
2025-12-16 09:55:04
294
原创 vue3+ant design vue实现表单验证失败后，自动滚动到失败的位置（scrollToField）
摘要：本文介绍了使用Ant Design实现表单验证失败后自动定位到错误字段的方法。通过formRef的scrollToField方法，配合smooth滚动效果实现定位功能。代码示例展示了表单结构、验证规则及提交处理逻辑，重点演示了如何捕获首个错误字段并平滑滚动定位。同时指出了常见错误"scrollToField is not a function"的排查思路：首先检查formRef是否暴露该方法，而非盲目升级AntD版本。该方法适用于Vue3+AntD技术栈的表单验证场景。
2025-12-01 14:25:51
193
原创 vue3+three.js的理解与简单使用~
本文介绍了使用tres.js创建3D场景的方法。首先说明three.js的基本概念：场景(Scene)、相机(Camera)、渲染器(Renderer)和物体(Object)。然后展示tres.js的简化实现方式，通过TresCanvas组件自动创建这些元素。文章详细演示了两个示例：一个简单的立方体场景和一个iPhone 3D模型展示，包括相机控制、光源设置和交互功能。特别说明了iPhone模型的加载、居中处理和动画控制方法，并提供了完整的Vue组件代码和样式设置。最后提到模型文件需要放置在public/m
2025-11-21 16:55:32
415
原创 vue3 + antd + print-js 实现打印功能（含输出PDF）
摘要：本文介绍了使用print-js库实现中后台系统合同打印功能的方法。通过Vue3+Ant Design实现了一个员工信息表打印示例，包含安装print-js、定义打印按钮、设置打印区域等步骤。关键点包括：1)使用printJS函数指定要打印的DOM元素；2)通过@media print媒体查询优化打印样式；3)处理Ant Design组件的打印样式。该方案支持HTML内容打印，并可自定义打印页面的边距、字体等样式参数。
2025-11-13 08:56:51
292
原创 uniapp微信小程序+vue3基础内容介绍~（含标签、组件生命周期、页面生命周期、条件编译（一码多用）、分包））
视图容器类标签名说明<view>视图容器，相当于 HTML 中的div可滚动视图区域<swiper>滑块视图容器，用于轮播图swiper的子项，每个滑块项可移动的视图容器的移动区域覆盖在原生组件之上的文本视图覆盖在原生组件之上的图片视图基础内容类标签名说明<text>文本标签，支持长按选中富文本标签，支持 HTML 节点<progress>进度条<icon>图标<button>按钮表单类标签名说明<form>表单<input>输入框<textarea>多行输入框<checkbox>复选框复选框组。
2025-10-16 15:00:46
1054
原创 HBuilder实现uniapp微信小程序项目到发布（超级详细）
本文详细介绍了微信小程序开发全流程：1. 准备工作：注册小程序获取AppID，安装HBuilderX和微信开发者工具；2. 项目创建与配置：包括manifest.json配置、pages.json页面路由设置；3. 开发实践：封装网络请求、引入uViewPlus组件库；4. 发布流程：编译上传、提交审核。重点讲解了项目结构、环境变量配置、请求封装和UI框架集成，并提供了开发模式配置、TabBar设置等实用技巧。
2025-10-15 09:17:42
2844
原创 day.js的简单使用~
Day.js是一个轻量级JavaScript日期处理库，提供简洁的API用于日期操作。安装后可通过dayjs()创建日期对象，支持从字符串、时间戳、数组等多种方式初始化。它提供.year()、.month()等方法获取日期各部分，支持.add()、.subtract()进行日期运算，并能通过.format()自定义日期格式。比较方法包括.isBefore()、.isSame()等，还包含.startOf()、.endOf()等常用操作。Day.js具有链式调用特性，所有操作都返回新的Day.js对象，保持不
2025-10-11 09:29:57
170
原创 BigInt()的简单使用~
，这远远超出了 JavaScript Number 类型的安全整数范围（±9007199254740991，即16位）。BigInt()计算正常+-*/计算即可，只是有几点注意事项。转换成 Number 类型而不丢失精度是不可能的。1、不能与 Number 混合运算。2、BigInt 除法总是向下取整。
2025-09-24 14:25:51
262
原创 VScode实现uniapp小程序开发（含小程序运行、热重载等）
虽然HBuilder x是uniapp官网推荐的编辑器，但是对于习惯于vscode开发的人来说，会感觉hbuilder没有vscode便捷，包含不限于，git图形化操作不便捷（虽然有插件实现，但是也不是很好用）、修改文件记录查看不清晰、卡顿、等等，总之不太习惯，所以这里介绍的是vscode如何写uniapp小程序。首先命令我们刚刚说过了，下面说一下配置，连插件都不需要安装，只需要打开微信开发者工具，点击设置=》编辑器设置=》勾选修改文件时自动修改、保存时自动编译小程序即可。此时就可以实现热重载了。
2025-09-18 15:18:35
690
原创 HBuilder x如何实现像VScode一样的图形化操作git
一、安装Git插件（注意这里是HBuilder核心插件，不需要去插件市场，直接下载即可）二、安装TortoiseGit（不知道网址的话，可以在项目中右击Git(G)进去之后选择切换分支，此时就会弹出弹窗提示按照TortoiseGit。一直next即可。）三、安装easy-git Git源代码管理工具（这个需要在插件市场直接下载就好（注意是导入，可能需要微信扫码看广告）,下载好后直接安装即可）四、此时就可以使用图形化操作git了，虽然还是没有VScode好用。聊胜于无。
2025-09-17 16:32:50
249
原创 小知识：简单介绍下主项目（门户）+ 子项目（自己的开发项目）的情景下如何在乾坤框架下增加全局样式~
首先有两个项目,主项目与子项目，二者通过乾坤进行耦合，这里介绍的是本地调试时怎么将本地子项目挂载到本地主项目中。以及怎么在本地子项目中写乾坤全局样式。
2025-09-17 16:01:24
182
原创 vue3+js+antd实现数据脱敏的简单理解（含前端脱敏、后端脱敏、脱敏数据切换）
【代码】vue3+js+antd实现数据脱敏的简单理解（含前端脱敏、后端脱敏、脱敏数据切换）
2025-09-11 09:41:51
296
原创 单向数据链接SSE的使用（机器人聊天、大屏可视化、热点文章推送...）
之间建立一条持久化连接（长链接），并通过这条连接实现服务器向客户端的实时数据推送，而客户端不能发送数据给服务端。而客户端想向服务器发送数据还是通过axios发起请求即可。SSE（Server-Sent Events）是一种基于HTTP的服务器推送技术，它在客户端与。
2025-09-10 15:02:05
286
原创 移动端响应式px转换插件PostCSS的使用~
在移动端开发中，我们通常使用 viewport 来适配不同的屏幕尺寸。在移动端，视口通常等于设备屏幕宽度；在桌面端，视口随浏览器窗口大小变化。指用户当前可见的网页区域（不包括浏览器工具栏、滚动条等）。2、在高分辨率屏幕上，元素过小或过大。3、使用 rem 单位存在兼容性问题。1、在不同屏幕尺寸下显示效果不一致。
2025-09-10 14:04:26
277
原创 Vue3 中后台管理系统权限管理实现
通常有效期较短（如 2 小时），过期后用户需重新登录，体验差。 的机制，它的核心作用是 。，保持用户持续登录状态。
2025-09-04 14:05:16
395
原创 事件循环中的宏任务与微任务的简单理解
还是有事件A、B、C，D其中B是异步任务耗时较大，此时主线程先执行A，然后当A执行成功后，开始处理B，但是因为B是异步任务，此时会将B交给浏览器的 Web APIs（如网络线程、定时器线程）处理，主线程继续执行 C。首先我们要知道js是单线程的，比如现在有如下事件A、B、C，单线程的处理顺序是A=>B=>C,看起来挺正常的，但是一旦其中某几个是异步任务耗时较大的，就只能傻等上一个完成了。此时因为A、C、D都是宏任务，B是微任务，此时执行结果是A → C → B → D。，如果有微任务，则。
2025-09-01 14:25:53
193
原创 Promise的简单理解~
与Promise.all不同，即使有 Promise 失败，它仍然会等待所有 Promise 完成。1、如果Promise数组中所有的参数全部是成功状态则返回一个新的Promise数组对象。一旦有一个 Promise 完成（无论成功或失败），Promise.race立即返回，不再关心其他 Promise 的状态。并返回一个新的 Promise。Promise.reject用于创建一个成功状态的Promise对象。2、当所有的Promise都是失败状态时，返回的 Promise 。
2025-09-01 10:41:37
732
原创 Echarts的基本使用（含双Y轴柱状图）
本文介绍了在Vue项目中使用Echarts图表库的实现方法。主要内容包括：1）通过npm安装Echarts；2）创建图表容器并初始化图表实例；3）实现响应式布局，使用防抖函数优化窗口resize事件处理；4）配置图表选项，包括双Y轴、柱状图样式和数据格式化；5）添加数据变化监听和性能优化措施；6）提供组件卸载时的资源清理方法。特别说明了防抖处理的必要性，可避免频繁重绘导致的性能问题。
2025-08-27 11:02:42
216
原创 小知识--数组去重（基本数据类型、复杂数据类型）
原因在于set()使用的是全等（===）,不止比较堆内存中的数据，还比较栈内存的指针，假设obj与obj2的值相同，虽然obj1和obj2指向的堆内存内容相同，但它们在栈内存中的，所以 Set 认为它们是不同的元素。
2025-08-25 09:34:50
158
原创 vue3.4中的v-model的用法与defineModel语法糖~
1.首先以前我们针对父子组件传参是不是通过defineProps与defineEmits来实现的，首先父组件通过defineProps传递参数a给子组件，然后子组件处理后又通过defineEmits再重新传给父组件，父组件再接受子组件的参数，比较繁琐，因为他是单向传参，而不是双向的，这里我们要介绍的是vue3.4的v-model来实现双向数据传递。实现真正的双向绑定，而不仅仅是单向数据流。符合 Vue 3 的组件通信规范。使组件可以像原生表单元素一样工作。保持组件状态与父组件同步。
2025-07-06 22:12:15
299
原创 vue3+ant design vue实现下拉框绑定对象
1、一般情况下，下拉框只能接受字符串，但是有时字符串不满足需求，此时就可以使用下面方法来实现。
2025-06-05 14:06:04
229
原创 git 如何解决分支合并冲突（VS code可视化解决+gitLab网页解决）
发布时会将各自的开发分支合并至发布分支上,但此时有个复杂情况就是分支A是第二次迭代的时候合并至1.1.1上了，此时分支B是第三次迭代的开发分支，是需要合并到1.1.2上的，此时有人就会问了，为什么B分支不在1.1.1的基础上创建呢？此时就会报代码冲突。# 3. 尝试将 develop 合并到临时分支(触发冲突):（这里也可以merge1.1.1分支，只是develop是调试分支，所有的开发分支都需要合并至develop分支验证通过才会合并至1.1.2上），这里解决的是B分支与develop分支合并冲突。
2025-06-01 23:51:25
2006
原创 decimal.js库处理js浮点数精度误差问题
1、经常遇到前端计算金额的时候出现精度误差问题，导致前后端计算的金额不一致导致校验过不去的情况，相信有不少人写过Math.floor(e*100)/100来实现保留2位小数，但是这么写就会出现上面的精度问题。这里使用的是decimal.js库。6、获取计算结果：使用toNumber()方法将Decimal对象转换为JavaScript原生的Number类型，以便在Vue组件中使用。4、创建Decimal对象：可以使用Decimal构造函数创建一个Decimal对象，并传入要进行计算的数字。
2025-05-27 10:23:20
434
原创 vue3+ant design vue + Sortable实现多级表格列拖动
1、最近遇到个需求，需使用vue3+ant design vue +Sortable实现多级表格的表头允许用户拖拽移动。即当用户拖拽一级表头时，其对应的子级表头及数据应同步移动，并且只允许一级非固定表头允许拖拽。2、拖拽一次之后就不能继续拖拽了：解决方法通过监听动态销毁Sortable 实例，同时避免了内存泄漏。1、子级表头变化了，一级表头本身页面未变化：解决方法通过key来强制刷新页面。3、Sortable 未正确挂载，拖拽不动：解决方法正确设置挂载范围。
2025-05-08 15:13:33
536
原创 大文件上传的解决办法~文件切片、秒传、限制文件并发请求。。。
1、项目背景：针对大文件上传，如果将文件作为一个请求去发送给后端，会有以下几种问题，首先是上传时间长，用户不能进行其他操作，包括页面刷新等操作，其次有的接口会设置响应时间限制，可能大文件还没上传完就触发响应限制了，这样对用户很不友好，那么怎么解决呢？2、首先前端针对大文件使用文件切片技术，将大文件切成多个小文件，然后再将多个小文件传给后端，由后端进行组合即可。3、依据文件内容生成唯一的hash值，可以避免文件改名后重复上传的问题。来根据文件的二进制内容计算文件的。
2025-01-16 15:45:23
874
原创 vue3+ ant design vue实现表格展示文件链接，并支持下载
【代码】vue3+ ant design vue实现表格展示文件链接，并支持下载。
2024-11-13 11:03:35
472
原创 针对一些需要登录鉴权的接口使用postman测试接口方法
1、在谷歌浏览器中进行接口测试时，如果遇到需要登录的情况，可以先进行登录操作并获取登录状态的cookie。通过浏览器的开发者工具（F12）抓取cookie，然后将这些cookie复制到请求头（Headers）中，确保请求方式正确（GET或POST），即可完成带cookie的接口测试。这种方式允许在不重新登录的情况下访问受保护的接口资源。
2024-10-08 13:22:58
472
原创 代码管理工具——git及JenKins的使用（包含git的图形化操作及命令行操作以及JenKins的使用）
本文介绍了Git和VSCode的协同开发流程，包括：1）配置Git用户名和邮箱；2）通过git clone拉取远程仓库；3）使用VSCode图形化界面进行分支管理、代码提交和合并；4）Git命令行操作详解（分支切换、提交、推送、合并等）；5）GitLab中回退分支到指定提交的方法；6）Jenkins作为部署工具的基本使用。文章提供了从代码拉取到提交部署的完整工作流程指南，包含常用命令和图形化操作说明。
2024-09-10 15:21:08
2542
原创 vue3项目npm i安装依赖一直转圈或安装失败解决方法~
方法三：根据提示信息检查node版本，并切换node版本，然后重新npm i即可。方法一：清除npm本地缓存，有时缓存也会造成npm安装缓慢。提示信息如下：（这里就明确告知你node版本不支持）方法四：在方法三的基础上，如果问题仍然存在，尝试删除。文件（如果有），然后重新运行。方法二：切换至国内镜像源。
2024-09-05 15:49:02
5385
1
原创 node版本切换的2种方法~
1、使用nvm实现node版本切换。首先需要卸载node.js,然后安装nvm。2、查看nvm版本。nvm -v3、在nvm安装的位置打开cmd。4、此时就可以安装node了。查看最近可下载的 nodejs 版本有时会出现node安装报错，此时只需找到nvm安装路径，一直找到settings.txt文件打开settings.txt文件最下面两行更改镜像地址为下方代码即可。
2024-08-28 20:34:50
2328
原创 Vite 从零到发布：完整配置与最佳实践指南
Vite作为新一代前端构建工具，通过原生ESM模块和按需编译解决了传统工具Webpack的痛点，实现秒级启动和毫秒级热更新。本文详细介绍了Vite的完整发布流程、基础配置（包括base路径、环境变量设置）、开发优化（路径别名、代理配置）以及打包优化策略（压缩配置、分包策略）。同时还讲解了高级优化技巧，如CDN加速、图片压缩等。通过合理配置Vite，开发者可以显著提升项目开发效率和运行性能，同时降低配置复杂度。
2024-08-10 11:12:25
7333
2
原创 轮询与长轮询的理解和简单代码实现
1、轮询的实现原理：开发人员在客户端使用定时器，每隔指定时间向服务器发起一次请求，服务器收到请求后检查是否有新数据或事件，并将其返回给客户端作为响应。客户端收到响应后，处理数据或事件，并随后发送下一个请求。3、长轮询的实现原理：客户端发送一个HTTP请求给服务器，并保持连接打开，直到服务器有新的数据或事件时才返回响应给客户端。在这期间，服务器会一直保持连接打开，直到超时或有新数据或事件。
2024-07-29 11:16:22
577
原创 WebSocket的理解与简单实现
实时性：WebSocket提供了实时双向通信的能力，允许服务器主动推送数据给客户端，而不需要客户端不断发起请求。相比之下，轮询是通过客户端定期发送请求来获取最新数据，因此响应延迟较高，无法实现真正的实时通信。效率：WebSocket在连接建立后使用长连接保持通信，而轮询每次请求都需要建立新的连接。这导致WebSocket比轮询更高效，因为它减少了请求和连接建立的开销，减少了网络流量。而WebSocket使用长连接，只需要在有新数据时才发送数据，减少了不必要的资源消耗。
2024-07-29 10:57:59
199
原创 uniapp-scroll-view滑动限制
2、技术点：scroll-view、uni.getSystemInfo(OBJECT)、uni.upx2px()查询当前设备的屏幕高度-去导航栏高度，将其赋值给scroll-view的height。1、需求：scroll-view滑动时，不应将导航栏卷上去。
2024-07-20 18:04:51
930
原创 uniapp-实现左侧菜单栏与右侧功能区联动~（保姆级）个人思路，需求实测实现啦~
1、需求1：实现左侧菜单栏与右侧功能区联动~。当点击切换左侧菜单栏时需变色同时需将其对应右侧功能区节点滑动至顶部。2、需求2：实现滑动右侧功能区，当其所处的功能区节点刚刚触顶时，需切换左侧菜单栏与之对应。炒毛豆也是刚刚接触小程序。后续会将学习心得不定时记录~（仅做个人笔记使用）5、需求实测实现啦~
2024-07-19 23:03:01
2060
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人