- 博客(315)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 PDF 与 Markdown 格式下载步骤附完整代码
本文介绍了三种方式（npm/yarn/pnpm）安装PDF生成依赖库（jspdf、html2canvas、marked），并详细讲解了Markdown和PDF两种格式的下载实现方法。对于Markdown下载，使用浏览器原生API通过Blob对象转换文本内容；对于PDF下载，采用Markdown→HTML→Canvas→PDF的转换流程，提供了完整的代码实现和样式美化方案。文章还包含多页PDF处理、清晰度优化等实用技巧，以及专业的CSS样式配置建议。
2025-12-29 18:48:50
398
2
原创 3D地球可视化教程 - 第6篇：蜂巢网格与自定义几何体
本文介绍了基于Three.js和GLSL的程序化几何体生成技术，重点探讨了球面六边形密铺的实现方法。通过分析六边形密铺的数学原理和球面几何挑战，提出了自适应密度、极点特殊处理等解决方案。文章详细讲解了球面网格生成算法和六边形创建技术，包括局部坐标系建立、角度尺寸控制和球面投影等关键点。同时展示了高级着色器编程实现的扫光动画系统，包含线性扫光算法、参数控制系统和拖尾效果。这些技术组合可创造出具有科幻感的视觉效果，适用于游戏开发、数据可视化等领域。
2025-12-26 10:55:00
570
2
原创 3D地球可视化教程 - 第5篇：星空背景与粒子系统
本文介绍了使用Three.js和粒子系统创建3D宇宙星空背景的技术方案。教程分为远景星空和近地轨道星两个系统：远景星空采用球面均匀分布算法生成4000颗星星，通过Canvas纹理创建渐变星光效果，并实现基于正弦波的闪烁动画；近地轨道星则利用实例化渲染技术，在5层不同半径的轨道上分布250颗星星，结合脉动、轨道等多种动画模式。文章详细讲解了粒子系统设计原理、实例化渲染优化、程序化纹理生成以及高级动画算法等技术要点，最终实现了一个层次丰富、性能高效的宇宙星空场景。该技术可广泛应用于3D地球可视化等场景中。
2025-11-14 16:51:28
1213
1
原创 3D地球可视化教程 - 第4篇：云层系统与纹理动画
本教程介绍如何使用Three.js为3D地球添加动态云层系统，提升视觉真实感。主要内容包括：创建稍大于地球的云层几何体，配置MeshPhysicalMaterial物理材质实现透明度与光照效果，设计纹理动画模拟大气环流（云层旋转速度比地球快1.5倍），并提供了脉动和透明度动画等可选增强效果。通过双面渲染、深度写入禁用等技巧解决透明物体渲染问题，最终实现专业级的大气层视觉效果。教程适合已掌握Three.js基础的中级开发者，学习时间约35分钟。
2025-10-27 11:28:31
1019
2
原创 3D地球可视化教程 - 第3篇：地球动画与相机控制
本文介绍了使用Three.js、GSAP和数学几何原理实现3D地球动画系统的技术方案。主要内容包括：1）利用GSAP时间线管理动画序列和时序控制；2）通过二次贝塞尔曲线创建平滑的弧形运动路径；3）设计自动旋转系统实现地球持续转动效果；4）采用分层时序设计实现地球入场、圆环、飞线和UI界面的动画组合。该方案通过动态效果增强视觉吸引力，使用缓动函数提升用户体验，并运用数学原理优化运动轨迹，构建了一个完整的3D动画系统。
2025-10-10 16:28:36
1205
2
原创 3D地球可视化教程 - 第2篇：夜晚纹理与着色器入门
摘要 本教程介绍了使用Three.js和GLSL着色器实现地球夜晚视觉效果的技术方案。通过自定义着色器编程，开发者可以创建包含城市灯光、昼夜过渡等高级效果的地球渲染系统。教程详细讲解了顶点着色器和片段着色器的工作原理，重点介绍了光照计算、纹理混合、透明度处理等核心技术。文章还提供了完整的参数配置系统，包括亮度、对比度、颜色通道等可调节参数，帮助开发者实现逼真的地球昼夜效果。最终效果展示了白天与夜晚纹理的智能混合，以及平滑的昼夜过渡分界线。
2025-09-15 16:31:59
842
1
原创 3D地球可视化教程 - 第1篇：基础地球渲染系统
本教程介绍了如何使用Vue3 + Three.js创建交互式3D地球可视化。主要内容包括： 基础概念：讲解Three.js的核心组件（场景、相机、渲染器）和物体构成原理 地球实现：使用SphereGeometry创建球体，配合Phong材质和多种纹理贴图实现真实感渲染 光照系统：组合方向光、环境光和点光源来模拟太阳光、天空散射和城市灯光效果 交互控制：通过自定义控制器实现流畅的鼠标旋转和缩放功能 项目架构：采用模块化设计，包含场景管理、地球渲染、光照系统和交互控制等组件 最终效果展示了一个可交互的3D地球，
2025-09-08 14:57:01
1039
2
原创 前端RSA加密遇到Java后端解密失败的问题解决
文章摘要： 在企业级Web应用开发中，使用RSA-OAEP加密传输密码时，Java后端解密失败而其他语言（Node.js/Python/Go）成功。经排查发现，Java的MGF1默认使用SHA-1而非SHA-256，导致跨语言不兼容。解决方案是修改前端加密代码，使MGF1也使用SHA-1。该问题源于PKCS#1标准演进与Java的保守默认设置，提醒开发者注意加密实现细节的跨语言差异。
2025-08-28 16:37:18
1349
2
原创 前端RSA加密库优缺点总结
本文对比分析了主流前端RSA加密库的优缺点与应用场景。Web Crypto API性能最优但仅支持HTTPS环境；JSEncrypt兼容性好但安全性较低；Node-Forge功能全面适合内网HTTP环境；NodeRSA和jsrsasign则分别适合Node.js后端和专业安全应用。根据实际项目需求，建议HTTPS环境优先使用Web Crypto API，内网HTTP环境选用Node-Forge，兼容性场景考虑JSEncrypt，并推荐采用多重方案的渐进式降级策略，兼顾性能、安全性和兼容性。
2025-08-26 15:41:47
1362
1
原创 如何在Vue中使用拓扑图功能
本文介绍了一个基于Vue.js和AntV G6构建的网络拓扑图组件，具有以下特点：支持自定义节点图标、智能力导向布局、丰富的交互功能（拖拽、缩放、悬停等）以及详细的漏洞信息展示。实现步骤包括安装依赖、准备图标资源、创建组件、数据获取和拓扑图初始化，并提供了节点和边缘的数据结构说明。组件还支持高级功能如节点状态管理、动态数据更新和搜索筛选。该组件适用于可视化网络结构并展示安全漏洞信息。
2025-08-08 16:00:44
1533
2
原创 SSE（Server-Sent Events）是什么、作用以及如何使用
相比WebSocket，SSE实现更简单但仅支持单向通信。前端通过EventSource API建立连接，后端需设置text/event-stream响应头。SSE支持自动重连…
2025-07-18 15:23:38
968
2
原创 #使用Vanta.js 和 GSAP 制作炫酷登录页的完整指南
本文介绍了使用Vanta.js创建3D动态背景并结合GSAP实现流畅动画效果的技术方案。主要内容包括：1）Vanta.js的基础集成和核心实现代码，详细说明了3D背景的初始化、配置参数和响应式处理；2）GSAP动画系统的分层设计，重点展示了史诗级入场动画序列的实现方法，包括时间线编排和多种动画效果的组合运用。文章提供了完整的代码示例，涵盖颜色配置、交互控制和性能优化等关键技术点，为开发者构建高质量动态背景和复杂动画序列提供了实用参考。
2025-07-02 14:06:49
399
3
原创 GSAP 动画库在 Vue3 项目中的使用总结
本文介绍了如何在Vue3项目中集成GSAP动画库，实现专业级动画效果。首先分析了GSAP的技术优势，包括性能卓越、兼容性强和精确控制等特点，并对比了CSS动画和Web Animation API等方案。详细讲解了安装配置步骤和Vue3 Composition API的最佳实践，强调延迟初始化、资源清理和响应式集成等核心原则。通过实际代码示例展示了数字递增动画和卡片入场动画的实现技巧，包括使用textContent属性、onUpdate回调以及序列延迟等关键方法。文章还提供了完整的Vue3组件代码框架，帮助开
2025-07-01 10:45:47
2329
4
原创 Vue3静态文档资源展示的实现和使用总结
本文介绍如何在Vue3项目中构建静态文档系统，采用三栏布局设计（左侧导航/中间内容/右侧目录）。技术栈包括Vue3、TypeScript和Tailwind CSS。系统实现文档分类管理、Markdown渲染、搜索过滤等功能。核心组件包含搜索框、导航菜单和内容展示区，数据结构采用树形分类组织文档。通过响应式数据管理文档状态，支持动态加载Markdown内容并生成目录导航。整个系统设计简洁高效，适用于各类文档展示需求。
2025-06-30 17:54:54
1271
4
原创 【threejs】VR看房项目经验总结
本文介绍了使用Three.js创建3D全景房间的核心实现步骤以及一些经验技巧的总结，功能已经抽离出来可以拿去复用
2025-06-19 00:11:16
1435
3
原创 Tailwind CSS 快速上手指南
作为一个从未使用过 Tailwind CSS 的开发者，面对满屏的 `text-xl`、`bg-blue-500`、`p-4` 这些类名，你是否感到困惑？别担心，这篇文章将带你彻底理解 Tailwind CSS 的设计哲学和使用方法。
2025-06-18 17:54:44
1266
2
原创 WebSocket心跳机制
WebSocket心跳机制实现稳定实时通信 摘要：本文详细介绍了WebSocket心跳机制的实现方案，解决网络波动、长时间无数据传输和服务器重启导致的连接断开问题。核心原理是通过定时发送ping/pong消息保持连接活跃，设置合理心跳间隔(30-60秒)和超时检测机制。文章提供了完整的JavaScript实现代码，包括基础连接、事件处理、心跳逻辑、智能重连策略，以及在Vue项目中的封装应用。关键功能包括：定时心跳检测、指数退避重连算法、连接状态管理，确保WebSocket通信的稳定性和可靠性，特别适用于实时
2025-06-10 13:58:32
1997
7
原创 封装渐变堆叠柱状图组件附完整代码
渐变堆叠柱状图组件摘要 该组件实现了一个可视化危险级别数据的渐变堆叠柱状图。主要功能包括：使用不同渐变色（红/橙/蓝）区分高、中、低三种危险级别；支持数据悬停显示总数及各分级数据；自动响应窗口大小变化。组件通过三个堆叠的bar系列实现数据分层展示，采用LinearGradient创建色彩渐变效果，并通过深度监听确保数据更新时图表同步刷新。开发者只需传入包含三个级别数据的warningData对象和x轴标签的warningSevenItem数组即可使用，还可自定义色彩、显示顺序和圆角样式。
2025-05-27 13:39:16
557
8
原创 在Electron中实现文件下载、保存和执行功能的完整教程
本文详细介绍了在Electron应用中实现下载更新文件并执行的完整流程。Electron应用分为主进程和渲染进程，出于安全考虑，渲染进程不能直接访问Node.js API和文件系统。因此，核心功能在主进程中实现，并通过预加载脚本安全地暴露给渲染进程。具体步骤包括：在主进程中处理下载请求，确保目录存在并清理旧文件，下载文件到指定路径，设置可执行权限（非Windows平台），并创建版本化副本。下载过程中，主进程会实时更新下载进度并发送给渲染进程。通过这种架构，既保证了应用的安全性，又实现了丰富的功能。
2025-05-14 15:40:06
1378
1
原创 PC端实现微信扫码登录
首先，你需要注册一个微信开放平台账号，并创建一个网站应用。你可以使用Express框架创建一个简单的Node.js服务器来处理微信的回调请求。然后打开你的Vue.js页面，扫描生成的二维码进行测试。在你的Vue.js项目中创建一个登录页面，使用微信提供的QR码接口生成二维码。在创建好网站应用后，你会获得一个AppID和AppSecret，这两个值在后续的开发中非常重要。在微信扫码登录页面轮询服务器端的登录状态，并处理登录成功后的用户信息。替换为你的回调地址，并确保它是URL编码的。// 每5秒检查一次。
2025-04-30 12:57:15
2002
9
原创 Electron中大文件夹加载使用懒加载解决卡顿问题
当用户打开包含大量文件的文件夹时，整个应用会明显卡顿，甚至出现短暂的无响应状态（比如直接打开C盘用户文件夹）这不仅影响用户体验，还可能导致应用崩溃。本文将介绍如何通过懒加载技术解决这一问题，让你的Electron应用在处理大型文件夹时也能保持流畅。通过实施懒加载技术，我们有效解决了Electron应用处理大文件夹时的性能问题。按需加载数据：只在用户实际需要时才加载内容分离关注点：将数据加载逻辑放在主进程，UI渲染放在渲染进程提供反馈。
2025-04-08 21:45:00
1116
2
原创 在Electron+Vue应用中实现文件自动监视与更新功能
通过实现文件监视功能，我们的编辑器能够实时反映文件的外部变更，大大提升了用户体验和工作效率。用户不再需要担心文件在外部被修改后看到的是过时的内容，也不需要手动刷新编辑器。这个功能是现代编辑器的标配，通过本文的步骤，你可以轻松地将它集成到你的Electron+Vue应用中。完整的实现包括了文件监视、变更检测、内容更新以及用户交互等各个方面，确保了功能的实用性和可靠性。
2025-03-28 20:30:00
1392
2
原创 在Electron中实现实时下载进度显示的完整指南
主进程(Main Process)：负责实际的文件下载和进度跟踪预加载脚本(Preload Script)：安全地暴露主进程的功能和事件给渲染进程渲染进程(Renderer Process)：负责显示下载进度界面和用户交互主进程(main.js) ─┐│ IPC通信预加载脚本(preload.js) ─┐│ 暴露API渲染进程(App.vue + DownloadModal.vue)在Electron应用中实现实时下载进度显示是提升用户体验的重要一环。
2025-03-18 22:00:00
1416
4
原创 Electron + Vue 项目如何实现软件在线更新
electron-builder 提供的模块，会在应用启动时自动检查指定的更新服务器（如 GitHub Releases、S3、自定义服务等）。如果检测到新版本，Electron 会在后台下载增量或全量更新包，完成后提示用户“重启并更新”。整个流程对用户来说非常简便。有些项目或团队希望完全掌控更新过程，不依赖，或者只在内网环境下分发安装包。这时可以采用手动更新思路。你在服务器上维护一个简单的“版本信息”接口（或文件），例如，内容包括：{
2025-03-11 20:00:00
2904
1
原创 Electron应用中获取设备唯一ID和系统信息
在现代应用程序开发中，获取设备唯一标识和系统信息是一项常见需求，尤其对于需要设备识别、登录验证和用户行为分析的应用。本文将详细讲解如何在Electron应用中实现设备信息获取功能，并将其与登录流程集成。通过本文介绍的方法，可以在Electron应用中安全地获取设备唯一ID和系统信息，并将其与登录流程集成。这种方式遵循了Electron的安全最佳实践，使用上下文隔离和预加载脚本来安全地暴露主进程API给渲染进程。正确实现后，能够识别用户设备，增强安全性，并提供更好的用户体验。
2025-03-07 17:58:53
2520
2
原创 【vscode源码】如何编译运行vscode及过程中问题解决
在成功编译并运行VSCode后，开发者可以根据自己的需求对VSCode进行二次开发或自定义修改。修改主题：你可以根据需要修改VSCode的界面主题、字体或颜色等样式。添加插件：你可以开发自己的VSCode插件，并将其集成到你的本地版本中。调试功能：如果你需要调试某些功能，可以通过VSCode自带的调试工具进行调试。本文详细介绍了如何编译和运行VSCode源码的步骤，并总结了在过程中可能遇到的常见问题以及解决方法。希望通过这些内容，能够帮助开发者更顺利地进行VSCode源码的编译和二次开发。
2025-02-07 12:08:19
2973
3
原创 实现酷炫粒子背景效果
本文详细介绍了如何使用 particles.vue3 实现动态粒子背景效果，包含安装步骤、配置参数详解以及常见问题的解决方法
2025-01-22 11:19:40
1815
2
原创 如何在 Three.js 地球飞线中间生成卡片
数学公式：利用lon2xyz()将经纬度转换到三维坐标，再结合简单的求出中点，最后归一化到球面半径，从而得到“球面中点”。使用 Sprite 做卡片html2canvas 把 DOM 转成截图；Sprite；设置。可选的交互可以一直显示卡片，也可以悬停时显示；如果要做更多复杂的交互，可以配合事件库或手动管理Raycaster。上述就是在球面飞线中点生成卡片的思路与完整步骤。新手可以直接复制示例代码并替换自己的数据和文本，就能快速跑出一个带有三维地球飞线与卡片标注的场景。
2024-12-27 18:00:10
1072
6
原创 【Three.js】实现天空盒效果
天空盒（Skybox）是 3D 场景中常见的技术，用于模拟环境的背景，如天空、星空、城市、山脉等。它能增强场景的沉浸感，同时对性能友好。天空盒通常是一个虚拟的无穷远盒子。如果需要一个近距离观察的效果，可以创建一个立方体网格作为天空盒。
2024-11-18 19:41:48
2393
2
原创 如何使用 SM4 加密算法保护敏感数据并实现数据解密
在前端开发中，保护用户的敏感信息尤为重要，特别是在处理用户的认证、交易等敏感操作时。在日常开发中，我们常使用 HTTPS 保证传输的安全性，但对于部分数据还需进一步加密，确保在传输过程中的安全。本文将详细介绍如何在前端项目中使用 SM4 加密算法保护敏感数据，并结合 Axios 实现数据在传输中的加密与解密。SM4 是中国国家密码管理局设计的一种对称加密算法。作为国密算法之一，它具有较高的安全性，主要用于保障敏感数据的传输安全。对称加密：即加密和解密使用相同的密钥，密钥需要在通信双方之间安全地共享。
2024-10-25 16:55:30
2633
2
原创 如何在 Three.js 中实现护罩之间的飞线效果
在这篇博客中，我们详细介绍了如何在Three.js中实现护罩与护罩之间的飞线效果。创建护罩：通过随机位置生成护罩，并确保它们不会重叠。生成飞线：使用贝塞尔曲线和自定义着色器，创建动态飞线效果。动画控制：通过动画循环更新uTime，让飞线看起来更加流畅炫酷。
2024-10-18 16:55:31
1604
3
原创 如何在 Three.js 场景中创建可点击展开的标签
在这篇文章中，我们展示了如何使用 Three.js 的为 3D 场景中的对象添加 2D 标签，并实现点击显示或隐藏详细信息的交互效果。这个功能可以应用于各种 3D 数据可视化场景中，为用户提供直观的交互体验。ps:最近的项目使用three.js的地方很多，且拓展了很多功能，我会将一个个的功能点拆分出来。因为之前查找相关博客发现很多都是整个一起的，对于只想要其中一部分而言会增加很多不必要的时间成本，所以我会将功能点拆解出来。想了解更多关于three.js的文章可以看我的three专栏。
2024-09-27 16:40:15
1574
2
原创 封装一个 Vue 3 流程线可视化组件
动态渲染：根据传入的数据，组件可以自动生成节点和箭头。风险等级样式：不同的节点根据风险等级（1-3）呈现不同的视觉效果。炫酷的动画效果：节点和箭头自带动画效果，适合用于大屏可视化项目。灵活的数据传递：通过组件的props传递数据，支持动态更新。接下来，我将带你一步步实现这个组件，并展示如何在项目中使用。通过将这个流程线组件封装成一个独立的 Vue 3 组件，你可以在不同项目中轻松复用它，并根据需求动态更新显示的数据。组件不仅支持动态渲染，还具备动画效果和风险等级区分，特别适合用于大屏数据可视化展示。
2024-09-11 15:04:06
1706
5
原创 【Three.js】控制生成多个护罩(防御罩、金钟罩、护盾)及标签效果
本次实现我们依然依赖 Three.js。位置生成与检测：生成多个护罩的位置，并确保它们之间保持一定的距离，不会重叠。Three.js 场景管理：在场景中添加多个护罩，并保持其动画效果。通过以上步骤，我们成功生成了多个不重叠的护罩，并为每个护罩添加了动态效果。护罩之间保持一定的距离，并且在生成时防止重叠。你可以通过修改护罩的颜色、位置和动画参数来调整效果。在接下来的博客中，我们将探讨如何进一步增强这些护罩的视觉效果，比如添加更多炫酷的飞线特效或是让护罩在受到攻击时产生更具冲击力的视觉反馈。
2024-09-10 14:14:34
1433
2
原创 【Three.js】实现护罩(防御罩、金钟罩、护盾)效果
在这篇博客中，我们将使用 Three.js 从零开始生成一个护罩效果。护罩将使用自定义的 Shader 材质，带有动画效果，最终呈现一个视觉上酷炫的护罩。此篇文章的重点将放在如何生成一个3D护罩，其它功能将在之后的博客中讨论,后续会有很多酷炫的效果~。Three.js: 一个强大的 3D 图形库，简化了 WebGL 的使用。Shader: 我们将用到 GLSL（OpenGL 着色语言）编写自定义着色器，为护罩增添独特的效果，比如渐变、透明度和动态变化。
2024-09-07 15:31:35
1695
2
原创 【可视化】封装滚动菜单列表组件
滚动菜单列表组件是一个适用于大屏可视化项目的自定义组件。它支持自定义表格头部、多种数据格式、自动滚动显示数据，并具有高度的灵活性和可配置性。无论是单列数据还是多列数据，都可以通过简单配置快速展示，并且支持自定义样式以匹配不同的视觉风格。
2024-08-20 08:30:00
1083
4
原创 如何发布自己的NPM包详细步骤
在前端开发中，将自己编写的 Vue 组件或插件打包并发布到 NPM 上，不仅可以方便自己在其他项目中复用，还能分享给更多的开发者使用。本文将从 NPM 注册、登录与发布流程，及如何通过 Vue CLI 打包插件的角度详细介绍如何发布 Vue 插件。通过以上步骤，你可以成功将 Vue 组件打包并发布到 NPM 上。本文详细介绍了从 NPM 注册、登录、发布，到通过 Vue CLI 配置和打包插件的完整流程。希望通过这篇文章，你能够更好地理解 Vue 插件的发布流程，并能够在实际项目中灵活应用。
2024-08-19 15:27:16
3841
2
node.js+express框架+通用的express框架模版+适合做二次开发
2024-01-15
node+vue全栈入门项目 百分百可运行
2022-03-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人