- 博客(43)
- 收藏
- 关注
RSS订阅
原创 深入理解若依RuoYi-Vue数据字典设计与实现
1. 核心管理类：Dict.js 作用：提供字典数据的加载、缓存、刷新等核心功能。使用 Vue 的响应式特性，动态更新字典数据。设计思路：利用 DictMeta 定义每种字典的元数（如类型、字段映射、请求方式）。动态加载字典数据并缓存到本地，避免重复请求。支持懒加载，只有在需要时才发起请求。2. 元数据类：DictMeta.js 作用：定义字典的元数据（如类型、请求方法、字段映射规则等）。解析字典配置并生成对应的 DictMeta 实例。设计思路：将字典的配置与实现解耦，支持灵活的扩展和修改。
2025-01-26 14:00:01
4403
原创 Vue Flow 交互式流程图和图形世界的桥梁
vue-flow流程化开发 vite 版本最低 3.0.9 node 版本 18.2.0注意事项为了确保 Vue Flow 的显示正确，请确保包含必要的样式。
2024-08-06 16:25:44
6565
3
原创 vue快速集成word在线编辑
金格插件WebOffice2015、chrome浏览器插件、only-office非常功能强大，word、ppt、excel都支持在线编辑预览，还支持协同，又有免费开源版。最后选择了canvas-editor
2024-05-06 13:43:01
17970
9
原创 vben ruoyi 数据字典解决方案
vben ruoyi数据字典解决方案摘要 该方案提供了一套完整的字典管理系统实现，主要特点包括： 核心功能： 通过store管理字典数据，避免重复请求 提供工具函数getDictOptions获取字典选项 支持表格、表单、描述组件中的字典渲染 技术实现： 使用Map缓存字典请求状态 封装renderDict等渲染方法 通过枚举DictEnum统一管理字典类型 使用示例： 支持在data.tsx中配置表格列、表单项和描述项 提供多种渲染方式：标签、文本、JSON预览等 支持条件显示和自定义渲染逻辑 目录结构清
2025-07-22 17:06:57
321
原创 面向对象与面向过程、函数式编程
本文比较了三种编程范式在Vue3中的应用：面向过程、面向对象和函数式编程。面向过程通过组合式API实现数据和逻辑分离，适合简单场景；面向对象采用类封装数据和方法，适合复杂业务；函数式编程强调纯函数和不变性，通过Vue响应式系统实现状态管理。实际开发中可混合使用这些范式，如用面向过程处理简单逻辑，用面向对象封装复杂业务模型。Vue3的组合式API灵活支持这些范式，开发者可根据需求选择最佳实践。
2025-07-15 17:17:02
447
原创 Typescript 泛型
TypeScript泛型是一种创建可重用组件的重要工具，允许在定义函数、类或接口时使用类型变量，保持类型安全的同时提高代码复用性。文章从基础概念入手，介绍了泛型函数、接口、类的使用方式，以及泛型约束和默认类型等进阶特性。重点阐述了泛型在实际开发中的常见应用场景，包括数据结构实现（如数组、栈、队列）、API响应处理、高阶组件开发、工具函数创建以及接口多态实现等方面。通过具体代码示例，展示了泛型如何为不同类型的数据提供类型安全的解决方案，提升代码质量和开发效率。
2025-07-15 16:03:24
449
原创 事件循环event loop （通俗易懂版）
这是一篇关于JavaScript事件循环机制的通俗讲解。文章首先用餐厅比喻解释了三种数据结构：栈（叠盘子，后进先出）、队列（排队买奶茶，先进先出）和堆（带标签的储物间）。然后详细阐述了事件循环的工作原理：JS引擎是单线程厨师，先处理同步任务，异步任务交给其他"师傅"（如定时器线程），完成后放入任务队列等待处理。最后重点区分了微任务（如Promise）和宏任务（如setTimeout），微任务优先级更高，会在每个宏任务执行后立即处理所有微任务。通过生动的比喻和代码示例，清晰展示了JavaS
2025-07-03 17:48:50
750
原创 Nuxt 2万字全面解析：从基础概念到高级部署与版本演进
Nuxt 是一个免费的开源框架，它以直观且可扩展的方式，基于 Vue.js 创建类型安全、高性能且适用于生产环境的全栈 Web 应用程序和网站(1)。作为 Vue 生态系统中最受欢迎的元框架之一，Nuxt 提供了开箱即用的解决方案，简化了现代 Web 应用的开发流程，同时保持了 Vue.js 的灵活性和表现力。Nuxt 的核心价值在于将 Vue.js 从一个视图层库扩展为完整的应用开发平台统一开发体验：提供标准化的项目结构和约定，减少配置负担全栈能力：无缝集成服务端渲染、静态生成和客户端渲染性能优化。
2025-06-26 11:57:33
778
原创 nuxt2 项目构建发布流程（运维版）
本文档详细介绍了Nuxt2项目从环境准备到服务端部署的完整运维流程。主要内容包括：1) Node.js环境安装与验证；2) 代码获取方式；3) 本地构建步骤（依赖安装和生产环境构建）；4) 服务器环境配置（Node.js安装、PM2进程管理）和项目部署方法。文档提供了完整的命令行操作指南，并附有常见问题排查建议，适用于运维人员快速部署Nuxt2项目。
2025-06-17 13:12:56
496
原创 【普通函数和构造函 new一个对象和{}的区别 实例和对象 副作用】
JavaScript中普通函数主要用于独立功能实现和逻辑封装，使用频率较高；而构造函数通过new创建对象实例，适用于面向对象编程。使用new创建的对象继承构造函数原型，适合复用逻辑；对象字面量{}语法简洁，适合一次性对象。实例是通过构造函数生成的特定对象，继承构造函数的属性和方法，而对象是更宽泛的数据结构概念。二者在创建方式、原型继承和应用场景上存在差异。
2025-06-07 12:23:43
1057
原创 Ant Design Vue 表格复杂数据合并单元格
表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
2025-04-14 16:37:02
1294
原创 基于Promise链式调用的多层级请求性能优化
代码优化-循环嵌套关联请求。async await，promise all，Promise.allSettled。文中代码已进行脱敏处理，关键路径和参数均为示例数据
2025-03-28 16:21:35
1160
原创 uniapp 微信小程序 手机号快速验证组件 解密 encryptedData 获取手机号
该能力旨在帮助开发者向用户发起手机号申请，并且必须经过用户同意后，开发者才可获得由平台验证后的手机号，进而为用户提供相应服务。以下是旧版本组件使用指南，注意使用旧版本组件时，需先调用wx.login接口。建议开发者使用新版本组件，以增强小程序安全性。详情新版组件使用指南。因为需要用户主动触发才能发起手机号快速验证，所以该功能不由 API 来调用，需用 button 组件的点击来触发。
2025-03-21 15:59:30
1717
原创 使用Trae 生成的React版的贪吃蛇
他生成的代码不完全正确，比如没有引入Game.jsx文件,需要详细的描述，他在根据描述修改代码。我使用的是builder模式,虽然是Alpha.还是可以用。首先你想用这个贪吃蛇，你需要先安装Trae。下面就是游戏核心Game.jsx文件的内容。他有两种模式 chat builder。接下来就是按着需求傻瓜式的操作生成代码。
2025-03-19 15:30:55
383
原创 实现重定向到多种方式与第三方登录、支付宝支付、微信支付大致流程介绍
通用实现方案及主流平台的技术。1. 创建订单(商品信息)5. 支付结果(前端)6. 异步通知(后端)
2025-03-19 11:17:46
867
原创 Vue3一个组件绑定多个 v-model，自定义 prop 和 event 名称
使用参数名 语法实现多个绑定子组件通过接收参数通过参数名 事件触发更新参数名会自动转换为kebab-case（如支持任意数量的v-model绑定可以组合使用普通props和v-model参数。
2025-03-18 17:24:27
1021
原创 【自定义微信小程序拉下选择过滤组件】searchable-select
点击输入框获取焦点，输入内容，自动匹配搜索结果，点击搜索结果，自动填充搜索结果。
2025-03-17 16:03:22
632
原创 弹性布局和网格布局
优点：缺点：适用场景：示例：2.网格布局（Grid）优点：缺点：适用场景：示例：对比总结：选择哪个布局？使用 ：当你的布局较简单，且只是要处理元素在一个方向上的排列时（如水平或垂直排列），并且需要快速响应式调整时， 是更好的选择。使用 ：当你的布局较复杂，涉及多个行列，并且你需要对元素的排列和位置进行精细控制时， 更加合适，特别适用于完整的页面布局（如布局区域划分、卡片展示、复杂的网格设计等）。后话：有时候可以结合两者使用，例如使用 grid 布局来划分主要结构，再在每个区域内使用 flex 来处理
2025-02-13 17:00:26
828
原创 继承的几种方式
寄生继承是通过创建一个新对象并将其返回，从而将父类的属性和方法“复制”到子类对象中。在这种模式下，子类并不直接继承父类的属性和方法，而是通过某种形式将请求委托给父类来实现行为复用。虽然它不是传统意义上的继承，但它提供了一种代码复用的方式，可以在多个对象之间共享功能。通过 Object.setPrototypeOf() 方法动态设置对象的原型，从而实现继承。结合了原型链继承和构造函数继承，既能继承父类的实例属性，又能继承父类的方法。通过将子类的原型指向父类的实例，来实现继承。
2025-02-08 14:44:50
811
原创 http缓存
HTTP 缓存的核心思路强缓存： 尽量减少与服务器的交互，优先使用缓存资源。协商缓存： 在资源可能更新的场景下验证资源的有效性。灵活使用缓存策略： 根据静态资源、动态资源以及敏感数据的不同需求，配置合适的缓存头。
2025-01-21 15:41:00
750
原创 CSP Content Security Policy（内容安全策略）
CSP 前端中的 CSP 指的是 Content Security Policy（内容安全策略），是一种用于提升网站安全性的浏览器功能。CSP 主要用于防止 XSS（跨站脚本攻击） 和 数据注入攻击，通过限制网页中的内容来源（如脚本、样式、图像、媒体等）来降低被恶意代码利用的风险。
2025-01-21 11:32:46
1862
原创 【vue2父组件调用子组件方法之slot的使用】
具体功能需求：一个页面，点击按钮，打开一个弹窗。弹窗有自定义表单和公共表单，提交的时候要获取两个表单的数据以及复显表单数据为什么使用插槽了，因为我需要在弹窗中复用公共表单，而自定义表单是不固定的，所以需要动态加载。
2024-12-24 15:37:50
1062
原创 前端javascript模块化有哪些
ES6 模块是现代 JavaScript 的标准模块系统，具有静态分析和优化的优点，适用于大部分场景。CommonJS 是 Node.js 的标准模块系统，适用于服务器端应用。AMD 适合浏览器端异步加载模块，尤其是在早期的单页面应用中。UMD 是一种通用的模块格式，适用于跨平台使用的场景。SystemJS 是一个多功能模块加载器，支持多种模块格式和动态加载。全局变量 是最原始的方式，适用于简单脚本，但不推荐在大型应用中使用。
2024-12-19 14:20:13
1142
原创 nuxt2.0性能优化 ant design vue 组件和图标按需引入
nuxt服务端渲染 按需引入 ant design vue 组件新建一个文件 plugins/antd-ui.js plugins/icons.js最开始全部引入按需引入的组件antd icon 图标 按需加载安装 babel-plugin-import。
2024-12-11 15:19:24
729
原创 vue3项目如何安装引入，实现预览ofd文件
ofd.js 是一个基于 JavaScript 的开源库，用于处理和操作 Open Financial Documents（OFD）文件。OFD 是一种用于电子文档交换和共享的开放标准，它定义了一种结构化的文档格式，用于存储和传输财务、商业和其他领域的文档。在我实现ofd的签署开发 预览开发的时候。所以要单独安装ofd.js所需的依赖。我使用的是vben admin框架。使用的是开源代码ofd.js源码。拷贝源码里边src下的utils。使用utils文件中的方法时报错。修改里边js引入的路径。
2024-11-08 18:06:01
995
7
原创 深入理解 vue3 watch 与 watchEffect 的区别
在 Vue 3 中， 和 是两种用于监听和响应数据变化的工具。虽然它们都可以用于追踪数据的变化并执行相应的回调函数，但它们在使用方式和应用场景上有所不同。以下是对这两者的深入理解和比较。 函数用于监听一个或多个响应式数据源，并在这些数据变化时执行回调。它适用于需要明确指定需要监听的响应式数据的场景。1.3 参数source：要监听的响应式数据，可以是一个函数（返回值为要监听的数据）或一个数组（包含多个数据源）。callback：当监听的数据发生变化时要执行的回调函数。回调函数接收两个参数，分别是新
2024-11-07 15:19:40
389
原创 递归深拷贝
递归深拷贝是指通过递归的方法创建一个对象的深拷贝，即复制一个对象及其所有嵌套对象，而不只是复制引用。这样，原对象和拷贝对象之间不会共享任何数据。以下是递归深拷贝的一些要点和示。
2024-10-30 17:59:26
421
转载 Vue3的Teleport
转载官方文档链接Teleport是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
2024-10-28 18:07:13
197
原创 給后端同事培训 vben 列表表格（增、删、改、查）业务 对话框 表单提交 的基本使用
主要是vue引入 列表组件 对话框组件 的注册 和 列表增加、删除、编辑业务的逻辑。
2024-09-11 15:47:15
843
原创 ChatGpt与Vue第四天
Vue 3 引入了 Teleport 组件，可以将子组件的内容传送到 DOM 树中的其他位置，这在需要全局弹窗或模态框时非常有用。Vue 3 中可以使用全局的 app.config.globalProperties 对象来注册和触发全局事件。虽然 Vue 3 中不再默认支持全局事件总线，但可以通过创建一个独立的事件总线来实现兄弟组件之间的通信。provide 和 inject 允许祖孙组件之间进行通信，而无需通过中间的父组件传递数据。
2024-08-21 17:45:58
172
原创 ChatGpt与Vue第三天
第三天的学习内容涵盖了 Vue.js 的虚拟 DOM 和模板编译的深层理解，以及生命周期管理与 Vue Router/Nuxt.js 的高级应用。这些知识点对于构建高性能、高可维护性的 Vue 应用至关重要。
2024-08-15 11:48:04
662
原创 ChatGpt与Vue第二天
Vue 3 的响应式系统相比 Vue 2 更加高效和灵活，主要通过 Proxy 实现，能够更好地处理深度嵌套的对象和数组。它通过 track 和 trigger 函数来实现依赖收集和视图更新，具有更好的性能和更简洁的 API。
2024-08-12 17:47:24
855
原创 ChatGpt与Vue的第一天
使用配置对象组织组件逻辑，适合简单到中型组件，逻辑分散在不同选项中，如datamethods和computed。: 提供更高的灵活性和逻辑复用性，适合复杂组件和应用，通过setup函数来组织组件逻辑。Vuex: 传统的状态管理库，适用于跨组件状态管理。Pinia: 新一代状态管理库，与 Composition API 兼容，提供更现代的状态管理方式。
2024-08-08 18:17:35
788
原创 【this arguments 对象 apply() 方法 bind() 方法 call()】
JavaScript 的 this 总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。
2024-03-07 23:07:41
1491
原创 【数据双向绑定 发布订阅者模式】
这个方法来实现数据的响应式和数据双向绑定的。通过这个方法，Vue可以劫持数据的getter和setter,从而在数据发生变化时通知视图更新。在子组件中使用 .sync 修饰符可以简化父子组件之间数据的双向绑定。在Vue.js中，实现数据双向绑定有几种方式。:Vue内部实际上是通过。
2024-03-01 19:49:24
414
原创 MVVM软件设计模式
这个例子中，我们创建了一个Vue实例（ViewModel），通过 el 属性指定了挂载点为 #app，然后使用 data 属性定义了一个名为 message 的数据属性。在Vue实例的 methods 中定义了这个方法，当按钮被点击时，它会修改 message 的值，由于数据绑定的存在，视图会自动更新以反映这个变化。当我们使用Vue.js时，通常会创建一个Vue实例，它充当MVVM模式中的ViewModel,而Vue框架则版主我们处理数据绑定，将Vue实例中的数据自动同步到视图（DOM）中。
2024-02-19 00:29:03
1553
vue3项目如何安装引入，实现预览ofd文件，ofd.js开源js文件，注意作者使用的是Apache License开源协议
2024-12-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人