- 博客(117)
- 收藏
- 关注
RSS订阅原创 【微前端】ruoyi系统+qiankun，微前端嵌入layout方案
本文介绍了在Ruoyi系统中实现微前端菜单权限管理的方案。通过改造主应用的store模块，使用mock数据替代权限系统配置，实现了以下功能：1) 新增microApps状态存储微应用配置；2) 在获取用户信息时提取微前端配置；3) 使用qiankun框架注册和启动微应用，并设置预加载、沙箱隔离等参数。关键代码包括路由过滤处理、组件动态加载以及微应用注册逻辑，确保微应用样式隔离和独立运行。该方案为系统集成多个子应用提供了灵活可扩展的实现方式。
2025-11-26 22:30:00
228
原创 构建时自动同步多语言资源？这个 Webpack 插件太香了！
传统方式使用 RemoteLocalePlugin手动维护翻译文件构建时自动同步多人协作易冲突翻译由后台统一管理上线需重新打包文案更新仅需刷新远程数据无兜底机制网络异常仍可构建在 DevOps 和 CI/CD 日益普及的今天，自动化已成为提效的关键。虽小，却能显著优化国际化工作流，让开发更专注业务逻辑，而非繁琐的资源同步。📌建议：将语言包接口纳入测试环境监控，确保构建稳定性。如果你也在维护多语言项目，不妨试试这个方案！欢迎在评论区交流你的 i18n 实践经验～🔗 相关阅读。
2025-11-22 22:15:00
32
原创 前端表单配置的 DRY 实践：一份配置，多模式控制
摘要 针对表单配置在不同模式（新增、编辑、详情）下的状态管理，推荐使用cloneDeep+动态设置disabled的方案。该方案通过维护基础配置模板，根据模式动态修改字段状态，避免了重复代码，提高了可维护性。性能方面，在常规业务场景（10-20个字段）下，cloneDeep的开销可忽略不计（<1ms），仅在字段极多（1000+）或高频调用时才需优化。相比之下，单独维护多套配置会导致代码重复和维护困难，违反DRY原则。因此，cloneDeep方案是企业级项目的标准做法，兼顾了代码简洁性和扩展性。
2025-11-06 22:00:00
996
原创 【vue】记一种实现记录用户搜索项的方式，详情返回列表搜索保持
本文实现了一个全局搜索组件，通过Vuex管理搜索状态并与路由参数同步。主要功能包括： 使用Vuex存储各页面的搜索条件，通过路由name作为命名空间防止冲突 将搜索参数处理为字符串后存入路由query，支持页面刷新后恢复搜索状态 提供参数重置功能，可清除特定页面的搜索条件 搜索组件自动从路由query中恢复表单值，支持数组类型参数的特殊处理 实现特点： 使用路由name作为前缀避免参数冲突 自动处理数组类型参数与字符串的转换 通过watch监听路由变化实现状态恢复 使用防抖函数优化搜索体验 该方案实现了搜索
2025-10-18 15:53:23
199
原创 【升级Cli5】记一次vue2由cli4升级到cli5的实际操作
本文展示了两份Vue.js项目配置文件(package.json)的差异对比，以及相应的vue.config.js配置。主要变更包括：从Vue CLI 4升级到Vue CLI 5，更新了相关依赖版本；新增了TerserPlugin等优化工具；配置了CDN预加载和生产环境压缩优化。vue.config.js文件实现了Gzip压缩、console移除、文件名哈希等功能，并设置了开发/生产环境的不同配置策略。这些修改旨在提升项目构建效率和运行性能。
2025-10-13 22:15:00
225
原创 别写死表单了！el-form 动态化 + 智能全选 + 数据联动，这才是高端操作
本文介绍了一个动态生成多设备表单的实现方案。通过设备数量动态创建表单结构，每个表单包含独立参数设置和容量计算功能。关键实现包括：1）使用嵌套v-for渲染多设备多路PV表单；2）支持全选/单选功能；3）提供批量编辑所有表单数据的入口；4）表单数据双向绑定，实时计算总容量。代码展示了数据结构的动态生成和表单组件的具体实现，包括厂商选择、型号联动、数量输入等表单元素，以及展开/收起更多参数的交互设计。
2025-09-30 21:30:00
250
原创 别再写重复的 `el-table` 了！我们团队用一个组件，干掉了 90% 的表格代码
文章摘要：团队针对Element UI表格组件(el-table)的重复编码痛点，封装了智能表格组件driveTable。通过配置化方式实现表格渲染，将原本80+行代码缩减至5-10行，开发效率提升90%。该组件支持图片预览、时间格式化、按钮权限等常用功能的内置处理，统一管理空状态和分页逻辑，并引入v-adaptive指令自动计算高度。改造后表格相关bug归零，团队协作成本大幅降低。文章强调这不是简单封装，而是通过抽象实现UI与业务解耦的前端工程化实践，并提供了快速接入方案。最终呼吁开发者从重复劳动转向配置
2025-09-17 22:15:00
982
原创 FastGPT docker部署+本地开发方案（fastgpt_sdk_plugin__WEBPACK_IMPORTED_MODULE_0__.default) is not a function）
本文介绍了FastGPT本地开发过程中遇到的数据库连接问题和初始化错误，并提供了解决方案。主要步骤包括：1）下载并修改docker-compose-pgvector.yml文件，注释掉sandbox和fastgpt部分；2）部署PostgreSQL、MongoDB、Redis和MinIO等数据库服务；3）调整配置文件中的账号密码等参数。文章特别强调了生产环境需要注意的安全设置，如不要暴露端口、修改默认账号密码等，并提供了详细的docker-compose配置示例。
2025-08-25 23:15:00
437
原创 最新官网FastGPT部署报错解决（Failed to parse URL from /model/list）
文章摘要 文章记录了在部署FastGPT数据库时遇到的URL解析错误问题。主要错误为"Load models error TypeError: Failed to parse URL from /model/list"，原因是aiproxy的docker镜像中openAIProxyBaseUrl路径配置不正确。解决方案是在docker同级目录下创建fastgpt-data/config.json文件。文章提供了详细的数据库部署步骤，包括如何修改docker-compose-pgvecto
2025-08-25 22:45:00
785
原创 再聊一聊老生常态的虚拟滚动（大列表滚动优化）
本文介绍了虚拟滚动技术的应用场景和实现方法。适用于需要处理大数据列表但性能要求高的场景，如后台管理系统、电商平台等。实现原理是通过只渲染视口可见部分的DOM元素，使用占位容器模拟完整列表高度，根据滚动位置动态计算并更新显示项。文章提供了完整的Vue实现代码，包括关键计算逻辑（总高度、可见项数量）、滚动事件处理和样式设置，并演示了如何在实际组件中使用该虚拟滚动列表。这种技术能显著提升大数据列表的渲染性能。
2025-08-18 22:15:00
213
原创 【大文件上传】分片上传+断点续传+Worker线程计算Hash
摘要 该代码实现了一个文件分片上传管理器，主要功能包括： 分片上传：将大文件按指定大小（默认5MB）切分为多个分片 并发控制：支持配置最大并发上传数（默认3个并发） 断点续传：记录已上传分片，支持从断点处继续上传 文件哈希校验：使用Web Worker计算文件哈希，实现秒传功能 错误处理：包含重试机制和详细的错误上报 核心流程包括：计算文件哈希→检查秒传→获取上传进度→并发上传分片→最终完成上传。该方案适用于大文件上传场景，提高了上传效率和可靠性。
2025-08-14 23:45:00
231
原创 【element树组件】el-tree实现连接线及hover编辑效果
这段代码实现了一个带操作按钮的树形组件，使用Vue+ElementUI开发。主要功能包括： 白色背景的可滚动容器，内置el-tree组件展示层级数据 每个节点显示名称(带悬浮提示)和操作按钮(编辑、删除、添加) 通过CSS自定义了树形连接线样式，使用伪元素实现垂直和水平连接线 添加了节点点击事件和按钮操作事件处理 限制添加按钮在层级超过6级时禁用 样式部分通过SCSS覆盖了ElementUI默认样式，实现了按钮悬停变色和树形结构的美化展示。
2025-08-12 23:15:05
660
原创 Vue 3 版本的 JWT 单点登录 (SSO) 实现
单点登录(SSO)系统技术实现摘要（148字） 本文展示了基于JWT令牌的SSO系统前端实现方案。核心流程包括：1）应用入口组件通过Token验证用户状态，未认证时重定向至统一登录页；2）登录页面处理认证请求，成功后携带Token回调至原应用。系统采用Vue3框架实现，关键点包括：Token存储于localStorage、认证状态管理、错误处理机制及安全回调URL处理。代码示例完整呈现了SSO的客户端交互流程，包括登录验证、Token传递和登出处理，体现了"一次认证，多系统通行"的设计理
2025-08-04 14:12:00
367
原创 记一次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
550
原创 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
486
原创 【前端】二进制文件流下载（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
365
原创 国际化i18n-不生效排查及响应式方案（以vue2为例）
文章摘要： 本文针对Vue2国际化切换语言不响应的问题，分析了常见错误写法（在data中直接使用this.$t）并提供了三种解决方案：1)在模板中使用$t；2)在computed中处理翻译；3)采用函数式配置项。通过代码示例展示了每种方案的具体实现，包括表格配置项、搜索表单和公共组件的处理方式。文章强调实际测试的重要性，建议开发者根据场景选择合适方案，避免国际化切换失效问题。
2025-06-16 17:00:18
478
原创 【数据大屏】大屏多尺寸屏幕兼容方案（适配任何屏，包括手机）scale
本文介绍了一个基于Vue3的屏幕适配解决方案，主要通过CSS3的scale方法实现。方案包含了一个drawMixin.js文件，提供屏幕比例计算、窗口大小调整和时间格式化功能。使用时通过计算当前窗口与设计稿尺寸的比例，动态调整scale值实现适配。代码示例展示了如何在Vue组件中使用该mixin，包括初始化调用、窗口resize事件监听以及样式设置等关键实现。该方案适用于1920×1080等大屏场景，能够保持设计比例在不同屏幕尺寸上的显示效果。
2025-06-11 13:42:30
324
原创 小程序通用弹窗组件封装（各大厂家小程序原生写法）
组件采用模块化设计，包含index.js逻辑层、index.wxml视图层、index.less样式层和index.json配置文件，可直接在其他页面引用使用
2025-05-30 10:23:39
192
原创 【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
768
原创 【nestjs】一般学习路线
文章摘要： 作者分享了自己学习NestJS的心得，通过参考开源项目nest-admin并深度阅读代码，逐步理解了NestJS的模块化设计。学习过程中，作者通过打console和添加注释来熟悉每个模块的功能。接着，作者细致阅读了NestJS的中文文档，并将文档内容与实际代码进行类比，进一步加深理解。最后，作者通过新增test模块，实践了NestJS的增删改查功能，并总结了entities、dto、service、controller和module等核心模块的作用。通过这一系列的学习和实践，作者对NestJS有
2025-05-09 19:22:00
620
原创 为什么 Vite 速度比 Webpack 快？
ES Modules是指通过export和import语句，允许再浏览器端导入导出模块。开发者实际上构建了一个依赖关系图，主流浏览器是直接支持的，vite正是利用这点。首先看两张图，可以清晰的看到，上面的图是webpack编译过的，而下面的图是vite直接使用工程内文件。
2025-04-29 14:05:08
663
原创 【js面试题】new操作做了什么？
prototype是函数都会有的一个属性（对象），它包含了通过这个构造函数创建的实例可以拥有的属性和方法，new对象时，新对象的__proto__（原型）会指向Animal（构造函数）的prototype
2025-04-10 19:18:40
548
原创 记一次flex布局的问题，抬升底部浏览器，flex布局不跟随上升
后来查询代码，发现是flex：1；的外层div高度设置有误，应该设置的矮一些。浏览器底部抬升，滚动条没有及时展示，导致部分信息被隐藏。最后改为如下，就可以了。
2025-04-10 11:33:55
262
原创 【qiankun】简易前端微应用搭建
一般场景是对已有应用进行改造，比如接入两个新的工程，但是工程不适合整体嵌入现有应用，那就以当前应用为基座，增加微应用路由，通过router-view，将子应用接入，且这种方式可以共用登录信息。
2025-04-07 16:57:18
606
原创 【接口重复请求】axios通过AbortController解决页面切换过快，接口重复请求问题
AbortController是一个Web API，它提供了一个信号对象（AbortSignal），该对象可以用来取消与Fetch API相关的操作。在接口封装层按照如上进行，可以满足接口重复请求时，取消重复的操作。需要注意一点，config.data，从request层获取的是Object，但是从response层获取的是一个JSON化的String。处理网络请求时，我们经常会遇到需要中途取消请求的情况，比如用户在两个tab之间反复横跳的场景，如果每个接口都从头请求到结束，那必然会造成很大的服务压力。
2025-04-02 17:22:59
468
原创 【indexedDB】以web端多语言存储为例
假设web项目中需要存储大量的缓存数据，通过sessionStorage和localStorage可能存在溢出，那么indexedDB就可以用用了，比如我们项目中存在多语言翻译，但是大量的翻译数据放到资源包内又不合适，需要后端接口请求的话又怕接口某次异常，导致系统bug。
2025-03-28 10:29:55
341
原创 【vue3】实现pdf在线预览的几种方式
今天一天对当前可用的pdf预览插件做了测试，主要需求是只能预览不能下载，但对于前端来说，没有绝对的禁止，这里只罗列实现方式。目前采用vue3版本为：3.2.37。
2025-02-13 19:00:08
2753
原创 【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
2311
原创 【虚拟滚动】vue2 element el-table组件虚拟滚动效果
首先，虚拟滚动的场景是什么？项目中可能会遇到一些通用情况，它要求列表不能分页处理，也不能懒加载，必须一次性展示“所有数据”，且不能有过分的卡顿等问题。这次就以第二种情况来说明如何处理，接上一篇博客 一文搞懂web端国际化方案（以vue2+elementUI为例，包含远程获取国际化）为了给多语言提供一个可供展示和修改的页面，前端自己实现了一个虚拟滚动且能修改多语言的页面。直接上代码：
2025-02-11 16:31:40
2613
2
原创 一文搞懂web端国际化方案（以vue2+elementUI为例，包含远程获取国际化）
开发项目不可避免的有国际化需求，本文将从本地国际化，到elementUI国际化，以及远程国际化三个方向切入，完整实现一套多国语言web国际化方案，另外，最好有一个国际化录入界面，界面上可以直接输入保存，也可以导入导出，我们目前还没时间搞，等实现了再来同步。至此，我们基本实现了web端国际化方案。
2025-01-23 11:18:53
856
原创 【echarts多y轴】通过接口获取参数后渲染echarts多y轴图
【代码】【echarts多y轴】通过接口获取参数后渲染echarts多y轴图。
2025-01-17 11:37:32
346
原创 el-col和el-row结合el-form,位置错乱问题
问题：明明el-col 都给了span 12的余量，但是总有一项自己独占一行。对el-row,进行简单样式设置即可。
2025-01-02 17:06:23
567
原创 【vue2自定义指令】v-disabled 实现el-switch，el-button等elementUI禁用（disabled）效果
如果你搜过类似的功能，肯定看到过千篇一律的但是这个方案明显对el-switch，不起作用，所以我这边直接把方案贴出来，不想了解具体原理的可以拿着走人了。
2024-12-06 09:33:18
1166
原创 vue2老项目改动态路由router.addRoute使用（vue2.6.14）
依旧是话不多说，直接上干货（整体参考若依思路）依赖项先摆出来为什么摆出来呢，因为踩过坑，较早版本的vue2是支持router.addRoutes的，我这个版本不支持，所以贴出来警示大家。确认好vue和vue-router的版本。
2024-12-05 19:19:13
1043
原创 autocomplete=“off“不起作用，终极解决方案
最终采用隐藏一个password 输入框的方式，欺骗一下浏览器，让他把不展示的输入框自动填充，从而保证本来的input框不受影响。
2024-10-23 11:28:29
789
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人