- 博客(34)
- 收藏
- 关注
RSS订阅
原创 深入理解若依RuoYi-Vue数据字典设计与实现
1. 核心管理类：Dict.js 作用：提供字典数据的加载、缓存、刷新等核心功能。使用 Vue 的响应式特性，动态更新字典数据。设计思路：利用 DictMeta 定义每种字典的元数（如类型、字段映射、请求方式）。动态加载字典数据并缓存到本地，避免重复请求。支持懒加载，只有在需要时才发起请求。2. 元数据类：DictMeta.js 作用：定义字典的元数据（如类型、请求方法、字段映射规则等）。解析字典配置并生成对应的 DictMeta 实例。设计思路：将字典的配置与实现解耦，支持灵活的扩展和修改。
2025-01-26 14:00:01
2611
原创 Vue Flow 交互式流程图和图形世界的桥梁
vue-flow流程化开发 vite 版本最低 3.0.9 node 版本 18.2.0注意事项为了确保 Vue Flow 的显示正确，请确保包含必要的样式。
2024-08-06 16:25:44
3692
3
原创 vue快速集成word在线编辑
金格插件WebOffice2015、chrome浏览器插件、only-office非常功能强大，word、ppt、excel都支持在线编辑预览，还支持协同，又有免费开源版。最后选择了canvas-editor
2024-05-06 13:43:01
14407
9
原创 基于Promise链式调用的多层级请求性能优化
代码优化-循环嵌套关联请求。async await，promise all，Promise.allSettled。文中代码已进行脱敏处理，关键路径和参数均为示例数据
2025-03-28 16:21:35
1065
原创 uniapp 微信小程序 手机号快速验证组件 解密 encryptedData 获取手机号
该能力旨在帮助开发者向用户发起手机号申请，并且必须经过用户同意后，开发者才可获得由平台验证后的手机号，进而为用户提供相应服务。以下是旧版本组件使用指南，注意使用旧版本组件时，需先调用wx.login接口。建议开发者使用新版本组件，以增强小程序安全性。详情新版组件使用指南。因为需要用户主动触发才能发起手机号快速验证，所以该功能不由 API 来调用，需用 button 组件的点击来触发。
2025-03-21 15:59:30
956
原创 使用Trae 生成的React版的贪吃蛇
他生成的代码不完全正确，比如没有引入Game.jsx文件,需要详细的描述，他在根据描述修改代码。我使用的是builder模式,虽然是Alpha.还是可以用。首先你想用这个贪吃蛇，你需要先安装Trae。下面就是游戏核心Game.jsx文件的内容。他有两种模式 chat builder。接下来就是按着需求傻瓜式的操作生成代码。
2025-03-19 15:30:55
334
原创 实现重定向到多种方式与第三方登录、支付宝支付、微信支付大致流程介绍
通用实现方案及主流平台的技术。1. 创建订单(商品信息)5. 支付结果(前端)6. 异步通知(后端)
2025-03-19 11:17:46
746
原创 Vue3一个组件绑定多个 v-model，自定义 prop 和 event 名称
使用参数名 语法实现多个绑定子组件通过接收参数通过参数名 事件触发更新参数名会自动转换为kebab-case（如支持任意数量的v-model绑定可以组合使用普通props和v-model参数。
2025-03-18 17:24:27
410
原创 【自定义微信小程序拉下选择过滤组件】searchable-select
点击输入框获取焦点，输入内容，自动匹配搜索结果，点击搜索结果，自动填充搜索结果。
2025-03-17 16:03:22
516
原创 弹性布局和网格布局
优点：缺点：适用场景：示例：2.网格布局（Grid）优点：缺点：适用场景：示例：对比总结：选择哪个布局？使用 ：当你的布局较简单，且只是要处理元素在一个方向上的排列时（如水平或垂直排列），并且需要快速响应式调整时， 是更好的选择。使用 ：当你的布局较复杂，涉及多个行列，并且你需要对元素的排列和位置进行精细控制时， 更加合适，特别适用于完整的页面布局（如布局区域划分、卡片展示、复杂的网格设计等）。后话：有时候可以结合两者使用，例如使用 grid 布局来划分主要结构，再在每个区域内使用 flex 来处理
2025-02-13 17:00:26
747
原创 继承的几种方式
寄生继承是通过创建一个新对象并将其返回，从而将父类的属性和方法“复制”到子类对象中。在这种模式下，子类并不直接继承父类的属性和方法，而是通过某种形式将请求委托给父类来实现行为复用。虽然它不是传统意义上的继承，但它提供了一种代码复用的方式，可以在多个对象之间共享功能。通过 Object.setPrototypeOf() 方法动态设置对象的原型，从而实现继承。结合了原型链继承和构造函数继承，既能继承父类的实例属性，又能继承父类的方法。通过将子类的原型指向父类的实例，来实现继承。
2025-02-08 14:44:50
734
原创 http缓存(复习)
HTTP 缓存的核心思路强缓存： 尽量减少与服务器的交互，优先使用缓存资源。协商缓存： 在资源可能更新的场景下验证资源的有效性。灵活使用缓存策略： 根据静态资源、动态资源以及敏感数据的不同需求，配置合适的缓存头。
2025-01-21 15:41:00
661
原创 CSP Content Security Policy（内容安全策略）
CSP 前端中的 CSP 指的是 Content Security Policy（内容安全策略），是一种用于提升网站安全性的浏览器功能。CSP 主要用于防止 XSS（跨站脚本攻击） 和 数据注入攻击，通过限制网页中的内容来源（如脚本、样式、图像、媒体等）来降低被恶意代码利用的风险。
2025-01-21 11:32:46
1176
原创 【vue2父组件调用子组件方法之slot的使用】
具体功能需求：一个页面，点击按钮，打开一个弹窗。弹窗有自定义表单和公共表单，提交的时候要获取两个表单的数据以及复显表单数据为什么使用插槽了，因为我需要在弹窗中复用公共表单，而自定义表单是不固定的，所以需要动态加载。
2024-12-24 15:37:50
682
原创 前端javascript模块化有哪些
ES6 模块是现代 JavaScript 的标准模块系统，具有静态分析和优化的优点，适用于大部分场景。CommonJS 是 Node.js 的标准模块系统，适用于服务器端应用。AMD 适合浏览器端异步加载模块，尤其是在早期的单页面应用中。UMD 是一种通用的模块格式，适用于跨平台使用的场景。SystemJS 是一个多功能模块加载器，支持多种模块格式和动态加载。全局变量 是最原始的方式，适用于简单脚本，但不推荐在大型应用中使用。
2024-12-19 14:20:13
1100
原创 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
584
原创 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
699
7
原创 深入理解 vue3 watch 与 watchEffect 的区别
在 Vue 3 中， 和 是两种用于监听和响应数据变化的工具。虽然它们都可以用于追踪数据的变化并执行相应的回调函数，但它们在使用方式和应用场景上有所不同。以下是对这两者的深入理解和比较。 函数用于监听一个或多个响应式数据源，并在这些数据变化时执行回调。它适用于需要明确指定需要监听的响应式数据的场景。1.3 参数source：要监听的响应式数据，可以是一个函数（返回值为要监听的数据）或一个数组（包含多个数据源）。callback：当监听的数据发生变化时要执行的回调函数。回调函数接收两个参数，分别是新
2024-11-07 15:19:40
345
原创 递归深拷贝
递归深拷贝是指通过递归的方法创建一个对象的深拷贝，即复制一个对象及其所有嵌套对象，而不只是复制引用。这样，原对象和拷贝对象之间不会共享任何数据。以下是递归深拷贝的一些要点和示。
2024-10-30 17:59:26
317
转载 Vue3的Teleport
转载官方文档链接Teleport是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
2024-10-28 18:07:13
98
原创 給后端同事培训 vben 列表表格（增、删、改、查）业务 对话框 表单提交 的基本使用
主要是vue引入 列表组件 对话框组件 的注册 和 列表增加、删除、编辑业务的逻辑。
2024-09-11 15:47:15
593
原创 我通过ChatGpt复习Vue第四天
Vue 3 引入了 Teleport 组件，可以将子组件的内容传送到 DOM 树中的其他位置，这在需要全局弹窗或模态框时非常有用。Vue 3 中可以使用全局的 app.config.globalProperties 对象来注册和触发全局事件。虽然 Vue 3 中不再默认支持全局事件总线，但可以通过创建一个独立的事件总线来实现兄弟组件之间的通信。provide 和 inject 允许祖孙组件之间进行通信，而无需通过中间的父组件传递数据。
2024-08-21 17:45:58
156
原创 我通过ChatGpt复习Vue第三天
第三天的学习内容涵盖了 Vue.js 的虚拟 DOM 和模板编译的深层理解，以及生命周期管理与 Vue Router/Nuxt.js 的高级应用。这些知识点对于构建高性能、高可维护性的 Vue 应用至关重要。
2024-08-15 11:48:04
634
原创 我通过ChatGpt复习Vue第二天
Vue 3 的响应式系统相比 Vue 2 更加高效和灵活，主要通过 Proxy 实现，能够更好地处理深度嵌套的对象和数组。它通过 track 和 trigger 函数来实现依赖收集和视图更新，具有更好的性能和更简洁的 API。
2024-08-12 17:47:24
835
原创 我通过ChatGpt复习Vue第一天
使用配置对象组织组件逻辑，适合简单到中型组件，逻辑分散在不同选项中，如datamethods和computed。: 提供更高的灵活性和逻辑复用性，适合复杂组件和应用，通过setup函数来组织组件逻辑。Vuex: 传统的状态管理库，适用于跨组件状态管理。Pinia: 新一代状态管理库，与 Composition API 兼容，提供更现代的状态管理方式。
2024-08-08 18:17:35
765
原创 【this arguments 对象 apply() 方法 bind() 方法 call()】
JavaScript 的 this 总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。
2024-03-07 23:07:41
1474
原创 【数据双向绑定 发布订阅者模式】
这个方法来实现数据的响应式和数据双向绑定的。通过这个方法，Vue可以劫持数据的getter和setter,从而在数据发生变化时通知视图更新。在子组件中使用 .sync 修饰符可以简化父子组件之间数据的双向绑定。在Vue.js中，实现数据双向绑定有几种方式。:Vue内部实际上是通过。
2024-03-01 19:49:24
390
原创 MVVM软件设计模式
这个例子中，我们创建了一个Vue实例（ViewModel），通过 el 属性指定了挂载点为 #app，然后使用 data 属性定义了一个名为 message 的数据属性。在Vue实例的 methods 中定义了这个方法，当按钮被点击时，它会修改 message 的值，由于数据绑定的存在，视图会自动更新以反映这个变化。当我们使用Vue.js时，通常会创建一个Vue实例，它充当MVVM模式中的ViewModel,而Vue框架则版主我们处理数据绑定，将Vue实例中的数据自动同步到视图（DOM）中。
2024-02-19 00:29:03
1500
原创 freemarker + vue + element ui 树结构菜单 + 多选框
freemarker + vue + element ui + 树table菜单 + 多选框
2022-05-26 16:04:55
869
vue3项目如何安装引入，实现预览ofd文件，ofd.js开源js文件，注意作者使用的是Apache License开源协议
2024-12-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人