- 博客(108)
- 收藏
- 关注
RSS订阅原创 再聊一聊老生常态的虚拟滚动（大列表滚动优化）
本文介绍了虚拟滚动技术的应用场景和实现方法。适用于需要处理大数据列表但性能要求高的场景，如后台管理系统、电商平台等。实现原理是通过只渲染视口可见部分的DOM元素，使用占位容器模拟完整列表高度，根据滚动位置动态计算并更新显示项。文章提供了完整的Vue实现代码，包括关键计算逻辑（总高度、可见项数量）、滚动事件处理和样式设置，并演示了如何在实际组件中使用该虚拟滚动列表。这种技术能显著提升大数据列表的渲染性能。
2025-08-18 22:15:00
147
原创 【大文件上传】分片上传+断点续传+Worker线程计算Hash
摘要 该代码实现了一个文件分片上传管理器，主要功能包括： 分片上传：将大文件按指定大小（默认5MB）切分为多个分片 并发控制：支持配置最大并发上传数（默认3个并发） 断点续传：记录已上传分片，支持从断点处继续上传 文件哈希校验：使用Web Worker计算文件哈希，实现秒传功能 错误处理：包含重试机制和详细的错误上报 核心流程包括：计算文件哈希→检查秒传→获取上传进度→并发上传分片→最终完成上传。该方案适用于大文件上传场景，提高了上传效率和可靠性。
2025-08-14 23:45:00
154
原创 【element树组件】el-tree实现连接线及hover编辑效果
这段代码实现了一个带操作按钮的树形组件，使用Vue+ElementUI开发。主要功能包括： 白色背景的可滚动容器，内置el-tree组件展示层级数据 每个节点显示名称(带悬浮提示)和操作按钮(编辑、删除、添加) 通过CSS自定义了树形连接线样式，使用伪元素实现垂直和水平连接线 添加了节点点击事件和按钮操作事件处理 限制添加按钮在层级超过6级时禁用 样式部分通过SCSS覆盖了ElementUI默认样式，实现了按钮悬停变色和树形结构的美化展示。
2025-08-12 23:15:05
427
原创 Vue 3 版本的 JWT 单点登录 (SSO) 实现
单点登录(SSO)系统技术实现摘要（148字） 本文展示了基于JWT令牌的SSO系统前端实现方案。核心流程包括：1）应用入口组件通过Token验证用户状态，未认证时重定向至统一登录页；2）登录页面处理认证请求，成功后携带Token回调至原应用。系统采用Vue3框架实现，关键点包括：Token存储于localStorage、认证状态管理、错误处理机制及安全回调URL处理。代码示例完整呈现了SSO的客户端交互流程，包括登录验证、Token传递和登出处理，体现了"一次认证，多系统通行"的设计理
2025-08-04 14:12:00
222
原创 记一次v-if和key错误使用，导致vue2的内存爆炸修复！
摘要：文章分析了Vue开发中常见的两个性能问题：1) 错误使用v-for的key值（如index+900）导致虚拟DOM计算量激增，通过对比有无key的diff过程说明合理key值的重要性；2) v-for与v-if共用导致重复计算，建议改用computed预先过滤数据。最终方案是使用item.code作为key，并通过computed返回过滤后的activeList，有效解决了性能问题。这两个优化点对Vue性能优化具有普遍参考价值。
2025-08-03 23:16:10
502
原创 ECMAScript 2025 发布了，你再也不需要try catch了！
JavaScript新特性改进摘要：1) 异步处理新增Promise.try()简化错误处理；2) Set集合增强7个数学运算方法，支持交集/并集等操作；3) 迭代器扩展链式操作方法(filter/map等)，支持惰性求值和流处理；4) 正则表达式新增RegExp.escape()安全转义；5) 模块系统优化支持JSON等非JS资源导入；6) 数值类型新增16位浮点数支持，优化AI/图形计算场景。这些改进提升了异步编程、数据处理和数值计算的便利性与性能。
2025-07-01 11:47:57
372
原创 【前端】二进制文件流下载（get、post）再谈一次
本文介绍了前端处理二进制文件流下载的完整方案。通过设置请求header（Content-Type为application/json）和responseType为blob，获取后台返回的二进制数据。然后使用Blob对象转换文件流，根据文件类型指定对应MIME类型（如Excel为application/vnd.ms-excel），最后通过创建a标签模拟点击实现下载。文章提供了完整的代码示例和常见文件类型的MIME对照表，解决了前端文件下载的常见问题。这种方法适用于GET/POST请求的各种文件下载场景。
2025-06-20 15:05:16
262
原创 国际化i18n-不生效排查及响应式方案（以vue2为例）
文章摘要： 本文针对Vue2国际化切换语言不响应的问题，分析了常见错误写法（在data中直接使用this.$t）并提供了三种解决方案：1)在模板中使用$t；2)在computed中处理翻译；3)采用函数式配置项。通过代码示例展示了每种方案的具体实现，包括表格配置项、搜索表单和公共组件的处理方式。文章强调实际测试的重要性，建议开发者根据场景选择合适方案，避免国际化切换失效问题。
2025-06-16 17:00:18
261
原创 【数据大屏】大屏多尺寸屏幕兼容方案（适配任何屏，包括手机）scale
本文介绍了一个基于Vue3的屏幕适配解决方案，主要通过CSS3的scale方法实现。方案包含了一个drawMixin.js文件，提供屏幕比例计算、窗口大小调整和时间格式化功能。使用时通过计算当前窗口与设计稿尺寸的比例，动态调整scale值实现适配。代码示例展示了如何在Vue组件中使用该mixin，包括初始化调用、窗口resize事件监听以及样式设置等关键实现。该方案适用于1920×1080等大屏场景，能够保持设计比例在不同屏幕尺寸上的显示效果。
2025-06-11 13:42:30
270
原创 小程序通用弹窗组件封装（各大厂家小程序原生写法）
组件采用模块化设计，包含index.js逻辑层、index.wxml视图层、index.less样式层和index.json配置文件，可直接在其他页面引用使用
2025-05-30 10:23:39
164
原创 【uniapp】 iosApp开发xcode原生配置项（iOS平台Capabilities配置）
将 XCode 工程中的 .entitlements 文件 和 Info.plist 文件 分别配置到UniApp.entitlements和Info.plist。本来这种配置就是在Xcode的平台中选中即可，他们的信息会存储在XCode工程的.entitlements和Info.plist文件。同时要注意，UniApp.entitlements配置文件增加后需要同步更新 profile的描述文件。如果你需要配置诸如：Access Wi-Fi Information。HBuilderX4.18及以上版本。
2025-05-23 10:50:08
593
原创 【nestjs】一般学习路线
文章摘要： 作者分享了自己学习NestJS的心得，通过参考开源项目nest-admin并深度阅读代码，逐步理解了NestJS的模块化设计。学习过程中，作者通过打console和添加注释来熟悉每个模块的功能。接着，作者细致阅读了NestJS的中文文档，并将文档内容与实际代码进行类比，进一步加深理解。最后，作者通过新增test模块，实践了NestJS的增删改查功能，并总结了entities、dto、service、controller和module等核心模块的作用。通过这一系列的学习和实践，作者对NestJS有
2025-05-09 19:22:00
563
原创 为什么 Vite 速度比 Webpack 快？
ES Modules是指通过export和import语句，允许再浏览器端导入导出模块。开发者实际上构建了一个依赖关系图，主流浏览器是直接支持的，vite正是利用这点。首先看两张图，可以清晰的看到，上面的图是webpack编译过的，而下面的图是vite直接使用工程内文件。
2025-04-29 14:05:08
519
原创 【js面试题】new操作做了什么？
prototype是函数都会有的一个属性（对象），它包含了通过这个构造函数创建的实例可以拥有的属性和方法，new对象时，新对象的__proto__（原型）会指向Animal（构造函数）的prototype
2025-04-10 19:18:40
518
原创 记一次flex布局的问题，抬升底部浏览器，flex布局不跟随上升
后来查询代码，发现是flex：1；的外层div高度设置有误，应该设置的矮一些。浏览器底部抬升，滚动条没有及时展示，导致部分信息被隐藏。最后改为如下，就可以了。
2025-04-10 11:33:55
237
原创 【qiankun】简易前端微应用搭建
一般场景是对已有应用进行改造，比如接入两个新的工程，但是工程不适合整体嵌入现有应用，那就以当前应用为基座，增加微应用路由，通过router-view，将子应用接入，且这种方式可以共用登录信息。
2025-04-07 16:57:18
497
原创 【接口重复请求】axios通过AbortController解决页面切换过快，接口重复请求问题
AbortController是一个Web API，它提供了一个信号对象（AbortSignal），该对象可以用来取消与Fetch API相关的操作。在接口封装层按照如上进行，可以满足接口重复请求时，取消重复的操作。需要注意一点，config.data，从request层获取的是Object，但是从response层获取的是一个JSON化的String。处理网络请求时，我们经常会遇到需要中途取消请求的情况，比如用户在两个tab之间反复横跳的场景，如果每个接口都从头请求到结束，那必然会造成很大的服务压力。
2025-04-02 17:22:59
403
原创 【indexedDB】以web端多语言存储为例
假设web项目中需要存储大量的缓存数据，通过sessionStorage和localStorage可能存在溢出，那么indexedDB就可以用用了，比如我们项目中存在多语言翻译，但是大量的翻译数据放到资源包内又不合适，需要后端接口请求的话又怕接口某次异常，导致系统bug。
2025-03-28 10:29:55
303
原创 【vue3】实现pdf在线预览的几种方式
今天一天对当前可用的pdf预览插件做了测试，主要需求是只能预览不能下载，但对于前端来说，没有绝对的禁止，这里只罗列实现方式。目前采用vue3版本为：3.2.37。
2025-02-13 19:00:08
2046
原创 【Docker】让前端也能用Docker部署，以ruoyi（若依）为例，极简部署流程
打包中，如果报错可以查看镜像源设置是否有误，大概率是类似failed to resolve source metadata for docker.io/library/node:16.19.1这种报错，其实就是国内镜像源失效，从docker hub拉取，但是受限网络导致失败。按照开文所述，我们其实是把ruoyi的静态资源跟nodejs，打包成一个完整的镜像(Image)，然后在容器(Container)中运行，保证所以拉取镜像的个体，都能顺利运行。，如果看到下图，就说明成功了。
2025-02-11 16:40:45
2062
原创 【虚拟滚动】vue2 element el-table组件虚拟滚动效果
首先，虚拟滚动的场景是什么？项目中可能会遇到一些通用情况，它要求列表不能分页处理，也不能懒加载，必须一次性展示“所有数据”，且不能有过分的卡顿等问题。这次就以第二种情况来说明如何处理，接上一篇博客 一文搞懂web端国际化方案（以vue2+elementUI为例，包含远程获取国际化）为了给多语言提供一个可供展示和修改的页面，前端自己实现了一个虚拟滚动且能修改多语言的页面。直接上代码：
2025-02-11 16:31:40
1982
原创 一文搞懂web端国际化方案（以vue2+elementUI为例，包含远程获取国际化）
开发项目不可避免的有国际化需求，本文将从本地国际化，到elementUI国际化，以及远程国际化三个方向切入，完整实现一套多国语言web国际化方案，另外，最好有一个国际化录入界面，界面上可以直接输入保存，也可以导入导出，我们目前还没时间搞，等实现了再来同步。至此，我们基本实现了web端国际化方案。
2025-01-23 11:18:53
716
原创 【echarts多y轴】通过接口获取参数后渲染echarts多y轴图
【代码】【echarts多y轴】通过接口获取参数后渲染echarts多y轴图。
2025-01-17 11:37:32
264
原创 el-col和el-row结合el-form,位置错乱问题
问题：明明el-col 都给了span 12的余量，但是总有一项自己独占一行。对el-row,进行简单样式设置即可。
2025-01-02 17:06:23
431
原创 【vue2自定义指令】v-disabled 实现el-switch，el-button等elementUI禁用（disabled）效果
如果你搜过类似的功能，肯定看到过千篇一律的但是这个方案明显对el-switch，不起作用，所以我这边直接把方案贴出来，不想了解具体原理的可以拿着走人了。
2024-12-06 09:33:18
957
原创 vue2老项目改动态路由router.addRoute使用（vue2.6.14）
依旧是话不多说，直接上干货（整体参考若依思路）依赖项先摆出来为什么摆出来呢，因为踩过坑，较早版本的vue2是支持router.addRoutes的，我这个版本不支持，所以贴出来警示大家。确认好vue和vue-router的版本。
2024-12-05 19:19:13
944
原创 autocomplete=“off“不起作用，终极解决方案
最终采用隐藏一个password 输入框的方式，欺骗一下浏览器，让他把不展示的输入框自动填充，从而保证本来的input框不受影响。
2024-10-23 11:28:29
670
原创 【前端模式设计】js订阅发布模式之我见
当函数被调用时，会将函数推入栈内存中，生成一个栈帧（Stack frame），栈帧可以理解为由函数的返回地址、参数和局部变量组成的一个块；然后用到的地方该监听的（on），该触发的(emit)，其实本质都是一个实例在处理自己的方法，且这个单例在内存中不会消失，因为有引用存在。总体来说，对象是存储在堆内存中，并在栈内存里有一个引用，我们其实是一直拿这个引用。在多数情况下，原始类型的数据储存在栈内存，而引用类型的数据（对象）则储存在堆内存。回到单例模式，单例模式其实就是创建了一个对象，他一直在堆内存中。
2024-08-15 16:51:32
431
原创 【qiankun微前端】基座主应用（vue2）+多个微应用(任意框架)
前段时间对我们已有的工程进行了微前端改造，后来思考一下微前端的本质，查询了不少资料，从qiankun微前端示例中学到了不少。
2024-08-03 10:34:23
1511
原创 【qiankun微前端】已有工程改造微前端
之所以采用微前端，是因为我们的工程有太多冗余第三方代码，因此为第三方用户开辟一个单独的工程势在必行，所以说微前端也是为了我们主体仓库代码的干净。最初接触微前端有种高大上的感觉，细细研究了一下，其实也不难，本文就不介绍iframe，single-spa之类的东西了，直奔主题。当前系统有横向一级顶部路由和竖向二级侧面路由，点击一级路由会触发二级路由的切换，从而实现两级路由的切换。
2024-07-23 16:14:08
439
原创 element-plus el-cascader 懒加载实现-省市区街道选择及回显
【代码】element-plus el-cascader 懒加载实现-省市区街道选择及回显。
2024-05-07 17:14:34
2024
原创 uni-app开发微信小程序、支付宝小程序、百度小程序代码混淆加固反编译
整体来说混淆过后，对小程序的反编译和代码混淆都是有帮助的，防止被别人轻易破解后二次开发，或者造成损失。对于支付宝小程序和百度小程序，目前只有1 2 方案可用。
2024-04-28 19:45:34
1727
1
原创 vue3 vite 路由去中心化（modules文件夹自动导入router）
通过路由去中心化可实现多人写作开发，不怕文件不停修改导致的冲突，modules中的文件可自动导入到index.js中。
2024-04-27 13:27:31
861
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人