- 博客(152)
- 收藏
- 关注
RSS订阅
原创 构建安全的Vue前后端分离架构：利用长Token与短Token实现单点登录(SSO)策略
在公司发展初期，公司拥有的系统不多，通常一个两个，每个系统都有自己的登录模块，运营人员每天用自己的账号登陆，很方便，但是，随着企业的发展，用到的系统随之增加，运营人员在操作不同的系统时，需要多次登录，而且每个系统的账号都不一样，这对于运营人员来说很不方便，也是就想到是不是可以在一个系统登陆，其它系统就不用登陆了呢？那么单点登录就是解决这个问题。
2025-05-21 13:25:20
11752
9
原创 实战指南：Vue 2基座 + Vue 3 + Vite + TypeScript微前端架构实现动态菜单与登录共享
在当今的前端开发中，微前端架构已经成为了一种流行的架构模式。本文将介绍如何结合Vue 2基座、Vue 3子应用、Vite构建工具和TypeScript语言，利用qiankun微前端框架实现动态菜单和登录共享功能的实战指南。
2024-05-28 16:18:18
2231
5
原创 Vue3+TS+Vite+Pinia最全总结
Vue 3 是一个流行的开源Java框架，用于构建用户界面和单页面应用。它带来了许多新特性和改进，包括更好的性能、更小的打包大小、更好的Type支持、全新的组合式 API，以及一些新的内置组件。
2024-02-02 16:51:42
1910
2
原创 前端开发three.js入门超详细学习，一起来学习3D吧
Three.js是一个用于在Web浏览器中创建和渲染3D图形的JavaScript库。它提供了一系列强大的功能和工具，使开发者能够轻松地在网页中创建交互式的3D场景和动画。
2023-11-20 13:26:38
7180
6
原创 vue微前端qiankun框架学习到项目实战,基座登录动态菜单及权限控制
技术无关，独立开发，独立部署，增量升级，独立运行，微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用。
2023-09-22 15:59:07
9031
47
原创 高项三、项目进度管理
项目进度管理是为了保证项目按时完成，对项目所需的各个过程进行管理，包括规划进度，定义活动，排列活动顺序，估算活动持续时间，指定项目进度计划和控制进度。规划进度管理：是为了规划、编制、管理、执行和控制项目进度而制定政策、程序和文档的过程。定义活动：识别和记录为完成项目可交付成果而采取的具体活动。排列活动顺序：识别和记录项目活动之间的关系。估算活动持续时间：根据资源估算的结果，估算完成单项活动所需工作时间段数。
2025-11-09 23:03:04
875
原创 高项二、项目范围管理
为了记录如何定义，确认和控制项目范围及产品范围，创建范围管理计划。为定义项目范围奠定基础。制定项和产品详细描述。将项目可交付成果和项目工作分解为较小的，更易于管理的组件。正式验收已完成的可交付成果。监督项目和产品的范围状态，管理范围基准的变更。
2025-10-28 08:14:24
756
原创 3D热力图封装组件：Vue + Three.js 实现3D图表详解
在工业互联网中，尤其是对于质量要求很高的领域，比如玻璃加工行业，实时监控分析玻璃质量很重要，比如应力斑，划伤，平整度等等，刚巧这个需求被我碰到了，需要开发一个3D热力图，可以直观地展示某特定区域出现瑕疵的概率，帮助加工厂或者加工师傅快速定位并解决问题。
2025-10-26 01:00:10
978
原创 Vue3 + VitePress 搭建部署组件库文档平台（结合 Element Plus 与 Arco Design Vue）—— 超详细图文教程
由于前端组件数量较多，如果没有一个固定的组件库平台进行统一管理，很容易导致组件被遗忘或不清楚如何使用的情况。为了解决这一问题，我将结合自己在企业项目中的实战经验，分享如何利用 `Vue3` 和 `VitePress` 搭建专属的文档站点，打造个性化的知识库平台，并实现对组件库的二次开发与定制化。该方案不仅结构清晰、维护便捷，还能随着组件库的持续演进，同步更新文档内容，真正做到文档与代码协同发展，提升团队协作效率与项目可维护性。
2025-10-09 17:59:20
975
6
原创 Electron 安装踩坑实录
一时兴起，想将自己的 Vue 项目打包成桌面应用，于是开始接触 Electron。然而刚进入安装环节就遇到了困难，屡次下载失败。经过查阅大量资料，参考多位开发者的经验，终于成功安装了 Electron，迈出了前端转跨平台桌面应用的第一步哈哈哈
2025-09-24 10:08:43
411
原创 Vue3+Node.js 实现大文件上传：断点续传、秒传、分片上传完整教程（含源码）
前端开发中，令人头疼的除了`Canvas`的应用其次就是大文件上传方案了，恰巧最近碰到了令人头疼的大文件上传需求，要求上传压缩包大于`1024MB`的时候进行分片上传处理，可以断点续传，秒传，分片上传，前端左向右想给出解决方案：> 前端在上传前首先调用文件初始化接口，向后端提交文件信息（包括文件大小、文件名、MD5 标识、分片总数等）。后端根据文件指纹（MD5）判断该文件是否已上传或已部分上传，若存在则返回已上传的分片信息，实现断点续传；若无记录，则进入常规分片上传流程。前端按序上传各分片，并通过进度条
2025-09-09 17:50:13
2171
7
原创 一文搞懂 useDark：Vue 项目中实现深色模式的正确姿势
在近期的项目开发中，遇到了一个常见的用户体验需求：实现界面的高亮（亮色）与暗黑主题切换功能。用户通过点击按钮即可自由切换主题，并且系统需记住用户的偏好——将当前主题状态持久化至本地缓存，确保页面刷新或下次访问时仍保持最后一次选择的主题样式。当前项目基于`Vue 3 + Vite` 构建，并使用了 `Arco Design` 作为 `UI` 组件库。在调研了多种实现方案后，结合社区优秀实践与相关技术文档，我最终选择了使用 `VueUse` 提供的响应式 `API useDark`，配合 `SCSS` ...
2025-08-15 10:47:07
1233
1
原创 canvas实现图片标注之Fabric.js从入门学习到实现labelImg矩形多边形标注工具【下】
在计算机视觉和机器学习领域，高质量的图像标注数据是模型训练成功的基石。无论是目标检测、图像分割还是实例识别任务，精确的标注数据都直接影响着模型的性能和准确度。然而，传统的手动标注过程往往存在以下痛点精度问题：人工标注难以保证像素级精度，效率瓶颈：复杂场景标注耗时耗力，工具限制：通用工具难以满足专业需求，协作困难：团队标注缺乏统一标准，数据管理：标注结果难以有效组织和管理，基于这些挑战，我开发了这款基于Vue3和Fabric.js的专业图像标注工具。本工具旨在为开发者和标注团队提供一套高效、精确、易用的...
2025-08-11 15:03:33
2578
2
原创 canvas实现图片标注之Fabric.js从入门学习到实现labelImg矩形多边形标注工具【上】
前端开发中，大大小小的需求，其中有很多关于`canvas`的需求，只要听到`canvas`的需求就非常头疼，因为这通常意味着需要使用原生`JavaScript`去监听鼠标的多种事件，并以此来实现各种各样复杂的功能，整个过程相当繁琐很是头大。接下来介绍一个`canvas`的工具库，`fabric.js`工具，轻轻松松实现各种`canvas`的复杂的需求功能，大大提高前端开发者面对`canvas`需求的开发效率和体验。
2025-08-06 11:43:43
1328
3
原创 Vue3 + WebSocket网页接入弹窗客服功能的完整实现
AI对话发展越来越快，大多数场景应用未AI客服对话，再官网或者介绍网页中插入AI机器人聊天功能，能大大的提升用户的体验，今天就做一个vue3实现一个弹窗客服组件，及其如何接入websocket实时通讯的前期准备的案例。
2025-08-01 13:54:09
636
1
原创 vue3实战九、vue3+vue-cropper实现头像修改
开发客户端或者管理后台的时候，避免不了个人信息的修改，其中就涉及到了头像修改，使用vue3+vite+ts+pinia+elementPlus+cropper实现一个头像裁剪等操作的头像修改功能。
2025-07-29 16:18:47
939
原创 Three.js开发必备：进阶目录包含附件资料
学习three的时候，不知道从哪里学习，如何学习，本文汇总threejs学习流程，防止迷路，一件三联~
2025-07-14 17:30:34
285
1
原创 Three.js开发必备：动画库tween.js最全详解包含案例
在学习Tween.js创建threejs动画使用的总结，其中包括安装和基础语法，重点演示了tween与three.js的结合应用，包括模型的动画，相机飞行动画，以及点击交互动画，点击模型设备自动靠近观察动画，其中使用了相机飞行中动态计算视线方向，封装可复用的相机动画函数，解决OrbitControls与动画的冲突，实现模型标签的淡入淡出的效果，包含了多个实用案例，设备预览动画、相机圆周运动保持注视原点、点击按钮触发相机运动等。通过tween.js的链式调用和回调函数，可以轻松创建流畅的3D交互体...
2025-07-11 11:58:14
588
原创 Three.js实战案例：利用threejs在3D场景中嵌入现有车间大屏含整体代码
在当前的 Web3D场景中，已经有一个通过3D 建模并结合 Three.js技术嵌入到网页中的检测设备。该检测设备还配套了一些附属产品，如大屏显示器、设备状态显示屏、设备检测结果展示屏等。现在的需求是：在该检测设备模型上添加一个可视化模块，用于查看其附带产品的显示内容。实现方式为：使用 iframe 嵌套在 div中，将这些HTML元素转换为Three.js中的CSS3D对象，并渲染到3D场景中，从而实现在三维环境中展示二维网页内容的效果.....
2025-07-09 08:05:59
401
原创 Three.js开发必备：关键帧动画最全详解包含案例
随着三维可视化需求的增长，Three.js成为了构建动态3D场景的重要工具。本指南专注于关键帧动画的学习，通过实例详细讲解其应用。首先介绍关键帧动画基础，了解如何定义模型在特定时间点的状态，实现流畅的动画过渡。接着，我们将一步步创建动画，包括设置模型命名、配置KeyframeTrack和AnimationClip等步骤，并使用AnimationMixer控制播放。此外，还将探讨如何调整动画的循环、速度及暂停等功能，以及如何解析外部模型动画数据。进一步地，我们将学习变形动画和骨骼关节动画的高级应用，...
2025-07-09 00:06:34
958
1
原创 深入理解JavaScript设计模式之命令模式
命令模式也是设计模式种相对于变焦简单容易理解的一种设计模式，在JavaScript中，命令模式用于将一个请求或简单操作封装为一个对象。这使得你可以使用不同的请求、队列请求或者记录请求日志、撤销操作等。命令模式通常用于实现诸如撤销/重做功能、事务系统以及在复杂对象间传递请求等场景。
2025-07-07 10:50:32
661
原创 Three.js开发必备：场景标注标签信息最全详解包含案例
通过CSS2DRenderer将HTML元素作为标签添加到3D场景中，引入扩展库、创建HTML标签、转换为CSS2模型对象及配置CSS2DRenderer等基础步骤详解，分析了利用CSS3DRenderer渲染HTML标签的方法，以及如何解决背面显示和标签偏移等问题。此外，还介绍了使用CSS3DSprite进行精灵模型标签标注的技术，包括设置精灵模型、缩放定位和批量创建标签，使用Sprite作为标签时，如何从canvas画布创建纹理对象并应用于场景标注，提供了处理外部图片资源的方案...
2025-07-07 00:35:16
1537
1
原创 Three.js开发必备：射线拾取模型包含拾取gltf模型案例
本文详细介绍了Three.js中射线拾取模型的应用。首先讲解了射线Ray的基本概念，包括起点.origin和方向.direction的设置方法，以及如何使用.intersectTriangle()方法检测射线与三角形的交叉点。接着介绍了射线投射器Raycaster，它通过.intersectObjects()方法实现模型拾取，返回交叉点坐标、距离和对象信息。
2025-07-03 16:54:11
1096
原创 Three.js开发必备：后处理效果详解包含抗锯齿及高亮案例
Three.js后处理技术为3D场景添加高级特效，如模型高亮发光描边、泛光效果等。本文详解使用EffectComposer和OutlinePass实现模型高亮描边的步骤，包括设置渲染通道、描边样式调整（颜色、厚度、闪烁）。同时介绍组合使用Bloom、抖动等多通道特效，并解决伽马校正和抗锯齿问题。这些技术广泛应用于工业可视化、游戏开发等领域，提升用户交互体验。
2025-07-03 11:51:50
1370
原创 Three.js开发必备：精灵模型Sprite详解包含下雪下雨天气案例
学习创建精灵模型对象，通过学习后实现场景标注点位，下雨下雪效果，控制下雪飘落与旋转状态，实现更为真实的雪花飘落
2025-07-02 16:03:40
1055
原创 深入理解JavaScript设计模式之发布订阅模式
发布订阅模式又叫做观察模式，让一些对象(订阅者)监听另一个对象(发布者)的变化，一旦发布者的状态发生了改变，所有依赖于它的订阅者都会自动收到通知，并作出相应的回调，现实生活中有很多发布订阅模式[订报，移动消息推送...]等等
2025-07-02 09:14:38
1027
原创 Three.js开发必备：点，线，面，体，顶点和颜色详解含案例实践附代码
本篇为本人学习threeJS中的学习实践总结，全面掌握创建复杂3D图形所需的核心元素：点、线、面、曲线及几何体。首先，您将学习如何生成和绘制圆弧顶点数据，为构建精确的几何形状打下坚实的基础。接下来，我们将深入探讨三维样条曲线与贝塞尔曲线的应用，展示如何通过这些曲线将点连成线，并进一步将线转化为面，或通过旋转与拉伸技术形成立体结构，涵盖在3D场景中实现色彩变换的具体方法。
2025-06-25 10:26:12
599
原创 深入理解JavaScript设计模式之迭代器模式
迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，不用关心对象你的内部构造也可以按顺序访问其中的每个元素。
2025-06-23 11:04:31
1268
原创 Three.js开发必备：渲染器和前端UI交互界面含素材
本文详细讲解了 Three.js 与网页 UI 之间的交互实现方式。通过具体的实践案例，演示了如何利用网页中的按钮控件来动态控制三维场景中物体的材质颜色；如何将 Three.js 创建的 3D 模型无缝嵌入到网页界面中；以及如何通过加载进度条实时反馈模型资源的加载状态，提升用户体验。此外，还深入探讨了在多个模型叠加渲染时常见的深度冲突问题（如模型闪烁），并提供了解决该问题的有效解决方案。
2025-06-20 10:52:24
1367
原创 前端Blender硬表面建模篇学习成长记录及收集学习过程中的Demo
在探索数字孪生Web3D技术的学习旅程中，我聚焦于Three.js与Blender的综合应用。本篇文章旨在系统化地整理和介绍在学习Blender 3D硬表面建模过程中的一系列示范案例及其设计思路输出。通过结合Three.js的强大渲染能力和Blender的精细建模技巧，深入学习如何高效创建模型并优化适用于web环境的3D模型。
2025-06-20 08:41:02
442
1
原创 Three.js开发必备：PBR材质与纹理贴图含素材
PBR就是基于物理的渲染，THREE提供了两个PBR材质相关的API，MeshStandardMaterial和MeshPhysicalMaterial，MeshPhysicalMaterial是MeshStandarMaterial扩展的子类，提供了更多的功能属性...### 光照模型光学中又折射，镜面，反射，漫反射等基本光学概念，对于生活中的光学问题，`threeJS`提供了一些光照模型模拟光照的计算方法。`MeshPhysicalMaterial`和`MeshLamb
2025-06-19 15:38:25
920
原创 Three.js开发必备：加载外部三维模型(gltf)及材质，纹理配置详解含素材
为了进一步提升模型的表现能力，引入.gltf和.glb文件形式的模型，以及Blender到处gltf格式时需要注意的细节，针对模型命名及节点选择问题，提供了基于.name属性获取特定节点并修改颜色的方法，并展示了递归遍历层级模型批量调整材质的技术。探讨材质共享问题及解决方案，强调了纹理encoding与渲染器outputEncoding在色彩空间转换中的作用，确保贴图颜色准确呈现...
2025-06-17 14:37:20
1503
原创 深入理解JavaScript设计模式之代理模式
为一个对象提供一个代用品或者占位符，以便控制对他的访问。 你想干一件事，但是你不方便亲自出马，于是你找了个“替身”帮你搞定，这个“替身”就是你的“代理”，再俗一点可以理解为——“媒婆”
2025-06-17 09:30:15
972
原创 Three.js开发必备：几何顶点UV坐标、纹理贴图详解含素材
通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。
2025-06-16 15:47:06
960
1
原创 Three.js开发必备：层级模型详解
场景对象Scene、组对象Group的.add()方法都是继承自他们的同类Object3D，.add方法可以单独插入一个对象，也可以同时插入多个子对象...
2025-06-16 08:41:33
1296
原创 Three.js开发必备：模型对象和材质详解
在`ThreeJS`中，模型对象和材质(`Material`)是创建3D场景的基本组成部分，一个`3D`模型通常由几何体(Geometry)和材质(material)组合而成，并通过mesh对象标识。three支持多种类型的集合体如BoxGeometry立方体、SphereGeometry球体、PlaneGeometry平面、CylinderGeometry圆柱体、TorusGeometry环面等。
2025-06-13 15:47:34
652
原创 深入理解JavaScript设计模式之策略模式
本文我以幽默+实践的方式学习策略模式，通过计算年终奖，表单校验，柯里化策略模式方法校验深入学习总结策略模式，反复学，反复看！
2025-06-13 10:54:39
1685
原创 Three.js开发必备：几何体BufferGeometry顶点详解
threejs的而长方体BoxGeometyr、球体SphereGeometry等几何体都是基于BufferGeometry类构建的，BufferGeomerty是一个没有任何形状的空几何体，你可以通过BufferGeomerty自定义任何几何形状，具体一点说就是定义顶点数据。
2025-06-12 15:58:06
1180
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人