- 博客(169)
- 收藏
- 关注
原创 3D旋转+霓虹光效!这个登录页面代码我看了十遍
这种3D交互方案特别适合科技类后台系统,给用户带来强烈的视觉冲击。建议在PC端使用,移动端需要做响应式适配。
2025-03-27 15:56:15
139
原创 Vue3 实战:基于 mxGraph 与 WebSocket 的动态流程图构建
本文通过完整的代码示例展示了 Vue3 + mxGraph + WebSocket 的组合应用,实现了动态流程图的实时更新功能。mxGraph 的 Vue3 集成方法WebSocket 的状态管理与重连机制数据驱动的画布更新逻辑通过这种技术组合,我们可以构建出具有实时交互能力的可视化应用,适用于流程监控、在线协作等场景。后续可以进一步扩展节点样式、布局算法和交互事件等功能。
2025-03-24 11:10:45
537
原创 Vue 3 中使用 vue - pdf - embed + vue3 - pdfjs 在线预览 PDF
在许多 Web 应用程序中,需要实现 PDF 文件的在线预览功能。Vue 3 作为流行的前端框架,配合 vue - pdf - embed 和 vue3 - pdfjs 库,可以轻松实现这一需求。本文将详细介绍如何在 Vue 3 项目中使用这两个库进行 PDF 在线预览。
2025-03-19 16:01:10
955
原创 Vue 项目配置文件独立部署方案:无需重新打包的动态配置管理
配置修改即时生效多环境差异化部署降低发布风险简化运维流程该方案特别适合需要频繁调整配置的中台系统、数据看板等应用场景。实际使用中可结合服务端配置中心进一步提升管理效率。
2025-03-13 14:21:40
462
2
原创 Vue 3 中搭建菜单权限配置界面的详细指南
在现代 Web 应用开发中,菜单权限配置是一个至关重要的功能,它确保不同角色的用户能够访问特定的功能模块。Vue 3 作为一款流行的 JavaScript 框架,为我们提供了高效且灵活的方式来构建这样的界面。本文将通过实际代码示例,详细讲解如何在 Vue 3 中搭建一个菜单权限配置界面。
2025-03-11 14:56:55
1049
2
原创 在Uniapp中实现特殊字符弹出框并插入输入框
功能描述:在父组件中放置一个键盘图标,点击后弹出特殊字符集,用户点击字符后,字符将被插入到输入框中。技术栈:Uniapp + Vue3 + uni-popup组件。通过封装组件,我们实现了在Uniapp中点击键盘图标弹出特殊字符集,并将选中的字符插入到输入框中的功能。这种方式不仅提升了用户体验,还使得代码结构更加清晰,便于维护。希望本文对你有所帮助,欢迎在评论区留言讨论!
2025-03-07 14:46:27
747
原创 深度剖析与解决 el - radio 点击页面闪动问题
el - radio点击页面闪动问题主要源于transform和transition相关的样式设置与浏览器渲染机制之间的矛盾。通过仔细分析具体代码,针对性地调整transform属性,合理使用transition相关属性,并考虑浏览器兼容性,能够有效解决这一问题,提升页面的稳定性和用户体验。
2025-03-06 17:30:35
433
原创 vue3-pc-template后台管理之角色管理与功能权限配置实践
通过上述步骤,我们在Vue3项目中实现了基本的功能权限配置。这种权限控制方式不仅提高了系统的安全性,还使得代码更加模块化和易于维护。在实际应用中,可以根据具体需求进一步完善和扩展权限管理系统。欢迎 Star 和 Fork 项目,一起构建更完善的权限管理体系!
2025-03-06 14:15:09
421
原创 Vue 3 + Vite 项目配置访问地址到服务器某个文件夹的解决方案
在开发 Vue 3 + Vite 项目时,我们经常需要将项目部署到服务器的某个特定文件夹下。例如,将项目部署到目录下,而不是服务器的根目录。这时,我们需要对 Vite 和 Vue Router 进行一些配置,以确保项目能够正确访问资源和处理路由。本文将详细介绍如何配置 Vite 的base选项以及 Vue Router 的路由模式,解决部署到服务器子文件夹时可能遇到的问题。通过以上配置,我们可以轻松地将 Vue 3 + Vite 项目部署到服务器的某个文件夹下。Vite 配置:通过base。
2025-02-27 15:23:30
1071
原创 手把手教你封装一个uniapp vue3组合式API手写签名组件
在移动端开发中,手写签名功能是一个非常常见的需求。本文将手把手教你如何在uniapp中使用vue3的组合式API封装一个手写签名弹出框组件。通过封装,我们可以在项目中轻松复用该组件,提高开发效率。
2025-02-20 16:43:54
302
原创 Uniapp 中如何将 Radio 组件圆框改为方框的方法(小程序端)
在使用 Uniapp 进行应用开发时,我们常常会遇到需要对组件样式进行定制化的需求。其中,将默认的圆形 radio 组件改为方框样式,就是一个常见的需求。本文将详细介绍如何通过 CSS 样式来实现这一效果。
2025-02-19 14:08:17
721
原创 解锁uniapp页面间通讯的N种姿势,你知道几个?
在 uniapp 开发中,页面间通讯是一项极为重要的功能。随着应用规模的不断扩大,各个页面之间往往需要进行数据传递和状态共享 。本文将详细介绍 uniapp 中常用的页面间通讯方式,帮助我们更好地进行 uniapp 项目开发。在 uniapp 中,url 传参是一种简单直观的页面间通讯方式。当我们使用uni.navigateTo、uni.redirectTo等方法进行页面跳转时,可以在url中携带参数。例如,我们要从A页面跳转到B页面,并传递一个id和name参数,就可以这样写:在目标页面B中,可以在
2025-02-17 16:19:04
940
原创 用Canvas+AI打造惊艳情人节网页:程序员专属浪漫指南
情人节将至,作为程序员的你是否也想用独特的方式表达爱意?与其送花送巧克力,不如亲手用代码打造一个专属的浪漫网页!本文将带你使用Canvas和AI技术,实现一个充满爱意的动态网页,让你的TA感受到程序员的浪漫。
2025-02-14 09:52:23
615
原创 Vue3按钮权限控制:解锁前端安全交互新姿势
自定义指令是 Vue3 实现按钮权限控制的核心机制。通过自定义指令,我们可以在 DOM 元素挂载或更新时,根据用户的权限数据来判断是否显示该按钮。if (!// 如果没有权限,隐藏或移除按钮},if (!} else {在上述代码中,mounted钩子函数在指令绑定元素挂载到 DOM 时被调用,它会检查当前按钮的权限标识是否在用户的权限列表中,如果不在,则隐藏按钮。
2025-02-14 09:28:42
1206
原创 解锁UniApp新姿势:巧用阿里巴巴字体图标库
在UniApp开发中,图标是构建用户界面不可或缺的元素。一个简洁美观的图标,能够让应用的界面更加生动直观,提升用户体验。然而,在众多的图标资源中,如何选择合适的图标库并正确使用,成为了开发者需要面对的问题。阿里巴巴字体图标库,作为国内知名的图标资源平台,拥有丰富多样的图标资源,涵盖了各种场景和行业,为开发者提供了极大的便利。本文将详细介绍在 UniApp 中使用阿里巴巴字体图标库的方法和具体步骤,帮助大家快速掌握这一技能,提升开发效率。
2025-02-13 10:15:06
923
原创 微信小程序邂逅Echarts:从入门到避坑全攻略
Echarts 是一个基于 JavaScript 的开源可视化图表库,能够流畅地运行在 PC 和移动设备上。它提供了丰富多样的图表类型,如折线图、柱状图、散点图、饼图、雷达图、地图 、漏斗图等,每种图表类型都有其独特的数据展示方式和适用场景,开发者可以根据具体的数据特点和需求来选择合适的图表类型,以最直观有效的方式呈现数据。Echarts 不仅图表类型丰富,还具备强大的交互功能,支持数据区域缩放数据筛选图例切换数据提示等交互操作。
2025-02-12 09:18:53
1440
原创 在 UniApp 中封装并连接 WebSocket 及重连机制实现
在如今的移动应用开发领域,实时通信的重要性不言而喻。WebSocket 凭借其在单个 TCP 连接上实现全双工通信的特性,成为实现实时数据传输的理想选择。UniApp 作为一款强大的跨平台开发框架,支持使用 Vue.js 语法编写一次代码并发布到多个平台。本文将详细阐述如何在 UniApp 中封装 WebSocket,并且加入重连机制,确保在连接断开时能自动尝试重新连接,以保障实时通信的稳定性。通过以上步骤,我们成功在 UniApp 中封装了带有重连机制的 WebSocket。
2025-02-11 20:57:28
1275
2
原创 Uniapp中使用Vue3开发微信小程序的全局状态管理实践
在开发微信小程序时,状态管理是一个非常重要的环节。随着项目规模的增大,组件之间的状态共享和通信变得复杂,传统的props和event方式已经无法满足需求。Uniapp作为一个跨平台开发框架,支持Vue3语法,并且提供了多种状态管理方案。本文将介绍如何在Uniapp中使用Vue3的结合Pinia进行全局状态管理,以提升开发效率和代码可维护性。通过本文的介绍,我们了解了如何在Uniapp中使用Vue3和Pinia进行全局状态管理。Pinia的简洁API和强大功能使得状态管理变得更加轻松和高效。
2025-02-11 20:48:42
800
原创 【10】深入解析 Three.js 中的 WebGL 交互射线投射点示例代码(webgl_interactive_raycasting_points.html)
在 WebGL 开发领域,Three.js 是一个非常强大且流行的 JavaScript 库,它简化了在网页上创建和操作 3D 图形的过程。本文将深入解析 Three.js 官网中webgl_interactive_raycasting_points.html的示例代码,帮助大家更好地理解其功能和实现思路。
2025-01-22 17:05:31
941
原创 基于 Vue 的拖拽缩放卡片组件:实现思路、方法及使用指南
通过上述的实现思路、代码实现和使用方法介绍,我们可以看到这个基于 Vue 的可缩放卡片组件为前端开发中实现可交互的卡片功能提供了一个有效的解决方案。你也可以根据实际需求进一步扩展和优化该组件,以满足不同项目的需求。希望本文能对大家有所帮助。
2025-01-16 20:30:34
980
2
原创 微信小程序:跨页面数据修改全攻略
本文详细介绍了微信小程序中修改其他页面数据的三种常用方法。通过本地缓存,利用wx.setStorage()和wx.getStorage()等方法,实现数据在本地设备的存储与读取,适用于存储相对稳定且对实时性要求不高的数据,但存在存储容量限制、数据一致性和安全性问题;运用app.js全局变量,在globalData中定义变量,方便在各页面间共享和实时更新数据,不过要注意内存占用、数据一致性维护以及对代码可读性和可维护性的影响;巧用页面栈,借助getCurrentPages()获取页面栈,直接操作目标页面实例修
2025-01-15 11:21:41
1319
原创 Vue3 中如何根据路由动态生成侧边菜单
在 Vue3 的项目开发,尤其是后台管理系统这类复杂应用场景中,侧边菜单扮演着举足轻重的角色,它是用户快速导航至各个功能模块的得力助手。而根据路由动态生成侧边菜单,则为系统的灵活性和可扩展性增添了强大动力。接下来,我们将深入探讨如何在 Vue3 中实现这一关键功能。gitCode代码地址:https://gitcode.com/Jiaberrr/vue3-pc-template/overview,gitee代码地址:https://gitee.com/zunyi-gabe/vue3-pc-template
2025-01-10 15:44:23
1203
原创 微信小程序实现手写签名全攻略,看这一篇就够了!
在微信小程序实现手写签名的众多技术方案中,Canvas脱颖而出,成为当之无愧的首选。Canvas是HTML5提供的一个强大的绘图API,它允许开发者使用JavaScript在网页或小程序上绘制图形、图像以及进行各种复杂的可视化操作。在小程序中,Canvas组件提供了类似的功能,为手写签名功能搭建了坚实的技术基石。
2025-01-08 09:21:45
1814
原创 element-plus二次封装搜索组件的详细解析与使用
在 Vue 项目开发中,构建一个灵活且易用的搜索组件是非常常见的需求。本文将剖析项目中基于element-plus二次封装的搜索组件的代码,探讨其设计思路、功能实现以及使用方法,希望在后面的项目中可以复用。
2025-01-04 18:00:14
1363
原创 页面转 PDF 功能的实现思路与使用方法
获取要转换的 DOM 元素,并将其背景设置为白色,同时调整宽度为 190mm,以适配后续的 A4 纸布局。通过以上步骤,就可以轻松实现页面转 PDF 的功能,为用户提供便捷的文档下载体验。首先,确保你的项目中已经安装了 html2canvas 和 jspdf 库,以及 element-plus(用于展示加载状态)。在函数内部,首先使用 ElLoading 组件来显示一个加载提示,让用户知道正在进行下载操作。在 PDF 生成并保存后,关闭加载提示,同时将之前转换的 DOM 元素的样式恢复为原始状态。
2025-01-04 13:58:32
1408
原创 【09】深入解析 Three.js 官网示例:下雪粒子特效与场景渲染的实现(webgpu_compute_particles_snow.html)
通过对这段 Three.js 代码的详细解析,我们了解了如何创建复杂的 3D 场景,包括相机、灯光、物体的设置,如何进行粒子特效的实现,以及碰撞检测、后期处理等功能。希望本文对你有帮助!
2025-01-03 14:19:52
1131
原创 Vue 项目中实现打印功能:基于目标 ID 的便捷打印方案
在 Vue 项目中封装了一个便捷的打印功能。用户只需传入目标 ID,即可实现对特定元素的打印预览和打印操作。这种方法具有良好的可扩展性和维护性,可以根据项目的具体需求进行进一步的优化和定制。希望本文能对大家在 Vue 项目中实现打印功能有所帮助。
2025-01-03 11:01:37
1143
原创 基于 element-plus 的表格组件二次封装:思路与使用指南
我们的目标是封装一个通用的表格组件,它既包含表格展示部分,又包含分页功能,通过对 Element Plus 表格组件的二次封装,我们实现了一个通用的表格组件,提高了代码的复用性和开发效率。在实际项目中,可以根据具体需求进一步扩展和优化该组件。希望本文对你有所帮助,如有任何问题,欢迎在评论区留言。
2025-01-02 20:59:20
1531
原创 【08】基于 Three.js 的鸟类群体模拟代码解析(webgl_gpgpu_birds.html)
通过对以上代码的详细解析,我们了解了如何利用 Three.js 和 GPU 计算来实现一个复杂的鸟类群体模拟。从鸟类的位置和速度计算,到群体行为的模拟,再到最终的渲染,每个部分都紧密协作,共同创造出一个生动的动态场景。
2025-01-02 20:09:06
920
原创 【07】基于 Three.js 的 WebGPU 火焰特效代码解析(webgpu_tsl_vfx_flames.html)
在 Web 开发中,使用 Three.js 库结合 WebGPU 来创建炫酷的图形特效是一件非常有趣且富有挑战性的事情。今天我们就来详细解析一段实现火焰特效的代码,让大家深入了解其背后的原理和功能实现。
2024-12-30 10:29:31
1215
原创 一个超容易上手(简陋更简单)的纯前端框架!基于 Vue3 + JavaScript + Element Plus 的后台管理模板
本项目是一个纯前端的后台管理模板,采用 Vue3、JavaScript 和 Element Plus 进行开发,旨在为开发者提供一个高效、便捷的后台管理系统前端开发基础框架,具备动态路由、面包屑导航以及多页面打开等实用功能,可大大提升开发效率和用户体验。src:components:通用组件目录,如按钮、表格、图标等自定义组件,可在整个项目中复用。router:路由相关配置和逻辑,包括动态路由设置。assets:静态资源,用于存放公共css样式、图片等文件。
2024-12-29 16:22:32
2618
3
原创 【06】基于Three.js下雨粒子特效的代码解析(webgpu_compute_particles_rain.html)
这段 Three.js 代码实现了包含粒子系统模拟、碰撞检测、多种 3D 物体添加以及动画渲染等丰富的功能。希望大家能从中理解相关的实现思路,运用到自己的开发实践中,进一步探索 Three.js 带来的强大 3D 开发能力。
2024-12-26 16:38:43
979
原创 【05】基于Three.js创建动态变化的点集代码解析(webgl_points_dynamic.html)
通过对这段代码的详细解读,我们可以看到它构建了一个包含模型加载、丰富动画效果以及后处理特效的 Three.js 项目。从初始化场景、相机、渲染器,到加载模型创建网格对象,再到通过复杂的动画逻辑更新对象状态以及应用后处理效果进行渲染,每一步都紧密配合,展现出了 Three.js 强大的功能和灵活性。希望这篇文章能帮助大家更好地理解如何利用 Three.js 来开发具有交互性和视觉吸引力的 3D 网页应用程序,大家也可以基于此代码进一步拓展和优化,实现更多个性化的创意效果。
2024-12-25 15:27:13
1137
原创 【04】基于 Three.js 的 3D 地形代码解析(webgl_geometry_terrain_raycast.html)
摘要:本文将对一段使用 Three.js 库构建的 3D 地形场景相关代码进行详细解析,涵盖从基础的场景初始化、对象创建,到交互逻辑以及纹理生成等多个方面,旨在帮助读者更好地理解 Three.js 在创建复杂 3D 地形场景中的应用。Three.js 是一个功能强大且广泛应用于 Web 端 3D 图形开发的 JavaScript 库,它提供了丰富的 API 来创建各种绚丽的 3D 场景、动画以及交互效果。接下来我们要解析的这段代码就是利用 Three.js 构建了一个特定的 3D 场景,并实现了一些交互功能
2024-12-25 09:15:00
868
原创 【03】基于Three.js的炫酷粒子效果代码解析(webgl_points_sprites.html)
通过对这段代码的详细解析,我们可以看到它完整地构建了一个包含粒子效果、可交互界面、性能统计以及自适应窗口大小等功能的3D场景。从初始化各个核心组件(相机、场景、渲染器等),到设置粒子的材质、位置、动画效果,再到处理各种用户交互(鼠标移动、窗口大小改变)以及性能监控,涵盖了使用Three.js进行3D开发的多个关键方面。希望读者能够通过这次解析,深入理解这些代码背后的原理和实现思路,从而能够在自己的项目中灵活运用Three.js来创建出更精彩的3D可视化效果。
2024-12-24 10:04:55
1467
1
原创 【02】基于 Three.js 实现的交互式 3D 场景代码解析(webgl_instancing_raycast.html)
通过对这段代码的详细解析,我们可以看到使用 Three.js 构建一个具有交互功能的 3D 场景需要涉及到多个方面的知识和操作,从基础的模块导入、对象创建,到复杂的鼠标交互、动画更新等逻辑。希望这篇文章能帮助大家更好地理解 Three.js 的使用,在自己的项目中也能创建出炫酷的 3D 效果。
2024-12-24 09:00:00
1484
原创 【01】基于 Three.js 的 WebGL 动画代码解析(webgl_animation_keyframes.html)
在本文中,我们将深入解析一段使用 Three.js 实现 WebGL 动画相关功能的代码。这段代码涵盖了从场景搭建、模型加载到动画控制以及页面响应式处理等多个方面的内容,下面让我们逐步来看。
2024-12-23 15:46:50
1101
原创 解锁 GitBook 的奥秘:从入门到精通之旅
在使用 GitBook 的过程中,还有一些进阶技巧可以让你的电子书更加出色。例如,优化目录显示可以提升读者的阅读体验。通过在book.json文件中配置plugins字段,添加chapter-fold或expandable-chapters等插件,并执行gitbook install命令安装,即可实现目录折叠功能,使目录结构更加清晰,方便读者快速定位到所需章节。自定义页面样式也是提升电子书个性化的重要手段。
2024-12-23 14:36:27
1155
原创 Echarts 神技:打造超炫漏斗图全攻略
通过以上步骤,我们成功地使用 Echarts 实现了一个漏斗图。可以根据实际需求调整数据和样式设置,以满足不同的可视化需求。Echarts 提供了丰富的配置选项,可以让我们轻松地创建各种类型的图表,为数据分析和展示提供了强大的支持。希望这篇博客对你在使用 Echarts 实现漏斗图时有所帮助。
2024-12-19 16:44:28
770
全方位工控组态图库大合集-打造高效工控设计的利器
2025-01-06
《树莓派4B开发入门手册》-开启您的嵌入式计算之旅
2024-12-12
PID控制器的工作原理及其三个关键环节的应用解析
2024-12-12
《TurboPi智能视觉小车-AI视觉基础教程》-探索智能驾驶,开启AI视觉编程新篇章
2024-12-12
《openCV基础PDF教程》-轻松入门计算机视觉与图像处理
2024-12-12
【高效学习伴侣】-软件设计师专属课后习题集,附完整答案版!巩固知识,提升技能,一网打尽!
2024-12-03
精准押题-软件设计师考试必备!独家押题10套及答案详解,助你一臂之力!
2024-12-03
软件设计师2023年、2022年全套真题
2024-12-03
视频直播和屏幕录制软件OBS Studio(Open Broadcaster Software
2024-09-18
原子化css-常用css整理-快速css样式
2024-09-06
乡镇街道级边界JSON文件
2024-09-05
微软雅黑字体包(包含完整版和精简版)
2024-08-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人