天生我材必有用_吴用-CSDN博客

原创构建安全的Vue前后端分离架构：利用长Token与短Token实现单点登录(SSO)策略

在公司发展初期，公司拥有的系统不多，通常一个两个，每个系统都有自己的登录模块，运营人员每天用自己的账号登陆，很方便，但是，随着企业的发展，用到的系统随之增加，运营人员在操作不同的系统时，需要多次登录，而且每个系统的账号都不一样，这对于运营人员来说很不方便，也是就想到是不是可以在一个系统登陆，其它系统就不用登陆了呢？那么单点登录就是解决这个问题。

2025-05-21 13:25:20 11092 9

原创实战指南：Vue 2基座 + Vue 3 + Vite + TypeScript微前端架构实现动态菜单与登录共享

在当今的前端开发中，微前端架构已经成为了一种流行的架构模式。本文将介绍如何结合Vue 2基座、Vue 3子应用、Vite构建工具和TypeScript语言，利用qiankun微前端框架实现动态菜单和登录共享功能的实战指南。

2024-05-28 16:18:18 1796 2

原创 Vue3+TS+Vite+Pinia最全总结

Vue 3 是一个流行的开源Java框架，用于构建用户界面和单页面应用。它带来了许多新特性和改进，包括更好的性能、更小的打包大小、更好的Type支持、全新的组合式 API，以及一些新的内置组件。

2024-02-02 16:51:42 1707 2

原创前端开发three.js入门超详细学习，一起来学习3D吧

Three.js是一个用于在Web浏览器中创建和渲染3D图形的JavaScript库。它提供了一系列强大的功能和工具，使开发者能够轻松地在网页中创建交互式的3D场景和动画。

2023-11-20 13:26:38 6660 6

原创 vue微前端qiankun框架学习到项目实战,基座登录动态菜单及权限控制

技术无关，独立开发，独立部署，增量升级，独立运行，微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用。

2023-09-22 15:59:07 7814 32

原创 Three.js开发必备：几何体BufferGeometry顶点详解

threejs的而长方体BoxGeometyr、球体SphereGeometry等几何体都是基于BufferGeometry类构建的，BufferGeomerty是一个没有任何形状的空几何体，你可以通过BufferGeomerty自定义任何几何形状，具体一点说就是定义顶点数据。

2025-06-12 15:58:06 548

原创 Three.js开发必备：灯光详解附带实践案例

在学习和使用three.js的时候，灯光是非常重要的元素之一，灯光用于模拟现实世界中的光照，环境光，聚光灯，点光等，使3D场景更加逼真，下面是我在学习灯光的时候进行的一些总结及其夹杂案例强化对灯光的使用。

2025-06-11 16:15:05 301

原创 Three.js开发必备：相机详解

在three.js中，相机用于定义如何从特定角度观察三维场景的关键组件，其中最常用的两种是透视相机和正交相机，他们有不同的特性和应用场景，three.js中相机分为正交相机和透视相机两种。

2025-06-10 15:37:48 685

单例模式（Singleton Pattern）就像‘独生子女，确保某个类在整个系统中只有一个实例，并提供一个全局访问点。简单来说，一个类一辈子只有一个孩子。在 JavaScript 编程世界中，例如 Web 应用中的登录窗口，无论你点击多少次登录按钮，只会弹出一次。为什么需要单例模式想象一下，你是DR钻戒的老板。我们推出一款特殊的钻戒——“单例钻戒”。这款钻戒一生只能购买一次，每位顾客终身仅能拥有一枚。这正是单例模式（Singleton Pattern）的生动写照。

2025-06-09 16:21:39 1173

原创 Three.js开发必备：lil-gui详解

lil-gui（原dat.GUI）简而言之是一个轻量级的前端JavaScript库，它对HTML、CSS和JavaScript进行了封装，专门用于快速构建图形化用户界面（GUI）。在学习和开发Three.js三维应用的过程中，借助该库可以非常方便地创建用于控制3D场景参数的交互式UI面板。

2025-06-05 15:56:13 280

原创深入理解JavaScript设计模式之闭包与高阶函数

2023年的某一天，一场让我印象深刻的面试：面试官： “你了解闭包吗？请说一下你对闭包的理解。”我自信满满地答道： “闭包就是函数里面套函数，里面的函数可以访问外部函数的变量。”面试官点点头，继续问：“那你知道高阶函数吗？”我依旧不慌不忙： “高阶函数嘛，就是能接收函数作为参数，或者返回一个函数的函数，在函数里执行回调的那种。”当时我心里还美滋滋地想：这不都是我看过的八股文嘛，稳了！走出面试室，我仿佛已经收到了 offer，决定先去吃顿大餐犒劳自己。吃完饭回到家，手机一响，是面试来电。电话那头传来...

2025-06-05 09:46:20 900

原创 Vue3 + Vite：我的 Qiankun 微前端主子应用实践指南

随着前端工程化和应用复杂度的不断提升，微前端架构逐渐成为大型项目中实现模块解耦与团队协作的重要解决方案。Qiankun 作为目前社区成熟度较高的一款微前端框架，为我们提供了良好的主子应用集成能力。在过去的技术实践中，我主要基于 Vue2 搭建 Qiankun 主应用（基座），并成功接入多个子应用。然而，随着 Vue3 在公司项目的广泛应用，以及 Vite 在开发构建速度、模块热更新等方面的显著优势，我们决定尝试将主应用全面升级为 Vue3 + Vite 技术栈，并在此基础上重构整个微前端架构。

2025-06-03 17:24:18 972

原创深入理解JavaScript设计模式之call,apply,this

想象一下，this就像是一个四处旅行的人，他总在寻找它的“家”，但是问题来了，这个人(this)的家并不固定，取决于他是怎么被邀请这个地方的，在javaScript中，this就是一个旅行者，他的指向完全依赖于函数的调用方式...

2025-05-28 11:05:00 892

原创深入理解JavaScript设计模式之原型模式

在 JavaScript 的世界里，你不靠“类”吃饭，你靠“原型”混江湖。遇事不懂？先问问你爹再说！

2025-05-26 13:31:31 1648 1

原创 ArkTS双向绑定从基础到进阶：核心概念与实践案例全面解析

鸿蒙开发中，实际上也满足mvm的思想，也就会有model数据模型。 view页面视图viewmodel试图和模型映射对象，需要在页面中基于表单元素来实现一个双向绑定。表单的数据渲染来源于我们组件内部的状态，组件内部状态数据产生变化，表单更新，表单数据也反过来影响我们内部状态。`$$`运算符为系统内置组件提供`TS`变量的引用，使得TS变量和系统内置组件的内部状态保持同步。内部状态具体指什么取决于组件。例如，TextInput组件的text参数...

2025-05-26 08:35:56 406

原创前端不再怕离线！IndexedDB 教你搞定本地大数据存储

IndexedDB是浏览器提供的一种本地数据库，用于在用户浏览器中存储大量的结构化数据，包括文件二进制数据。它是一个异步的，基于事务的noSQL数据库，适用于需要脱机访问，数据缓存，大型数据集存储等场景。非关系型数据库(NoSql)，indexedDB是非关系型数据库，主要以键值对的形式存储数据。。。

2025-05-21 16:36:40 1085

原创 Harmonys多Module设计机制详解：构建高效的应用模块体系

通过将项目拆分为多个模块，开发者可以实现模块化开发，支持多设备适配。Module分为Ability和Library两种类型，其中Ability模块可独立运行，Library模块则用于代码和资源共享。文章还详细介绍了HAP、HSP和HAR模块的特点及其创建和使用步骤，帮助开发者构建高效的应用模块体系，提升项目的可维护性和扩展性。

2025-05-19 08:49:53 772

原创从单线程到多线程：项目实战web Worker线程使用总结

在最近的开发过程中，我频繁地遇到了需要处理大量列表数据、大屏展示的数据以及Canvas数据的任务。在这些情况下，JavaScript的单线程特性成了一个瓶颈——每当执行复杂的数据处理任务时，网页就会出现堵塞，必须等待数据处理完毕才能继续加载页面。这不仅导致了其他DOM元素在此期间无法操作，还使得整个网页变得卡顿，严重影响了用户体验。

2025-05-15 17:37:14 1013

原创 Vue使用scale方法实现响应式自适应大屏缩放通用组件详解（附完整代码）

在开发数据大屏项目时，我们经常会遇到一个“甜蜜的烦恼”：如何让页面内容随着浏览器窗口大小灵活缩放，适配各种分辨率的设备。以前我总是靠 `rem` 单位配合动态设置 `html` 的 `font-size` 来实现响应式布局，妥妥的“老司机操作”。但在刷博客、写总结的过程中，频频看到有人激情安利 `scale` 布局，仿佛它是什么“前端黑科技”。于是我就想，与其在一棵树上吊死，不如换个姿势试试看。这次干脆大胆使用 `scale` 实现一次响应式大屏，既是为了项目需求，更是为了给自己的知识库“充个电”，拓...

2025-05-12 17:15:58 1747

原创深入鸿蒙开发：掌握ArkTS中的关键装饰器

在鸿蒙应用开发中，ArkTS作为基于 TypeScript 扩展的声明式语言，是构建现代 UI 的核心工具。而装饰器（Decorators）在 ArkTS 中扮演着至关重要的角色，它们不仅帮助开发者管理状态、优化组件通信，还能提升代码的可维护性和复用性。

2025-05-12 09:16:12 1179

原创从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

在当今快速发展的`Web`开发领域中，无论是面试还是与同行交流时，“高大上”的技术术语层出不穷。还记得我第一次了解到前端埋点监控是在一家知名大厂的面试过程中。当面试官问及如何实现前端埋点监控时，我感到一阵茫然——脑海中一片模糊，各种概念交织却难以理清头绪。不出所料，那次面试的第三轮我没有通过。这次经历成为我深入学习前端埋点监控的起点。回到家中，我开始查阅大量资料、观看教学视频，逐步摸索出了一套学习路径。本文便是基于这段时间的学习和实践总结而成，旨在为那些刚开始接触前端埋点监控的朋友提供一个详尽的指南...

2025-05-08 14:35:29 2438

原创 ArkTS存储机制深入解析：LocalStorage与AppStorage的高效应用

LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage支持UIAbility实例多个页面间状态共享。可以直接理解为LocalStorage就是内存数据库，你可以往里面存放数据，LocalStorage和AppStorage都是内存级别的存储方案。唯一不同的在于作用范围。

2025-05-06 08:11:37 754

原创鸿蒙开发入门到进阶：从布局基础到组件实战

在鸿蒙开发的世界里，理解如何有效地进行布局是构建美观、响应式应用的关键。本文《鸿蒙开发入门到进阶：从布局基础到组件实战》旨在为开发者提供一个全面的指南，从最基本的单位概念讲起，包括物理像素(px)、逻辑像素(vp)、字体像素(fp)以及视窗逻辑像素(lpx)，这些单位帮助开发者创建适应不同屏幕尺寸的应用界面。文中详细介绍了Column和Row两种基本布局方式，通过实际代码示例展示了如何利用它们来组织页面元素，并调整子元素的位置与对齐方式。此外，文章还深入探讨了使用TaskStatisties和.......

2025-04-28 08:09:19 2122

原创 Vue3实现高仿word自定义颜色选择器组件（支持 v-model）

最近接到一个需求，前端拿到`AI`组通过检测算法得到的瑕疵数据，为了标识每个瑕疵，通过设置瑕疵的颜色进行标志，产品要求仿照`word`的颜色设置来进行设置取色器。

2025-04-25 15:01:53 698

原创主脏canvas双图层实现图片查看组件【流畅、附源码】（支持标注、缩放、拖拽，修改，删除，拖拽移动，修改框框大小）后续优化中

在工业质检领域的智能化转型浪潮中，面临一个典型的可视化需求场景：通过计算机视觉算法检测出产品表面瑕疵后，需要在前端界面高精度还原检测结果，实现瑕疵位置的可视化标注与交互式查验。

2025-04-24 14:33:19 1036 2

原创深入浅出ArkTS：从基础语法到高级特性全面解析

JS属于前端浏览器语言，弱类型语言，灵活，功能强大。TS是微软设计出来的一门编程语言，是JS这门语言的超集，涵盖了JS核心的es5/6的内容，增加静态检擦类型推断等等，可以让开发过程中更加严谨，减少错误。> `ArkTS`：鸿蒙官方主推的开发语言，高级编程语言。在`TS`基础上进行了扩展，推出了全新声明式的开发规范。相当于基于TS开发规则，有进行封装，将核心的内容封装起来次啊用声明式开发模式。

2025-04-21 08:45:50 2172

原创深入鸿蒙OS开发：从环境搭建到真机调试全攻略，创建运行第一个鸿蒙项目

HarmonyOS，中文称鸿蒙系统或鸿蒙OS。鸿蒙系统是华为推出的面向全场景的分布式操作系统。所谓面向全场景是指它将来不光是给予手机、平板搭载，而是会对诸如电脑、车机、手表、电视、音响、眼镜及各种家电家居等等多设备都能搭载的操作系统。这就是华为所宣导的全场景智慧生活战略1+8+N（手机+8种常用设备+万物，共同协作共同参与）。

2025-04-14 10:14:54 2496 2

原创 Vue 3 国际化实战：支持 Element Plus 组件和语言持久化

i18n来源于英文单词internationalization的首末字母`i`和`n`,18为中间的字符数，是"国际化"的简称，在资迅领域，国际化`(i18n)`指产品，出版物，软件，硬件等无需做大的改变就能适应不同的语言和地区的需要，对前端开发来说，在不修改内部代码的情况下，能根据不同语言及地区显示相应的界面，在全球化时代，国际化尤为重要，因为产品的潜在用户可能来自世界各个国家，通常与`i18n`相关的还有`L10n`本地化的简称。

2025-04-10 14:20:47 1031

原创 Vue3实战八、路由权限和动态路由

自定义权限指令，创建/*** 用户权限指令* 1、v-permission="xxx" 单个权限校验* 2、v-permissions="[xxx, xxx]" 多个权限校验，满足其中一个则显示* 3、v-permission-all="[xxx, xxx]" 多个权限验证，全部满足则显示* 注意：vue3 有了片段支持以后，组件可能会有多个根节点。当被应用在一个多根节点的组件上时，指令会被忽略，并且会抛出一个警告。*/// v-permission="xxx" 单个权限校验。

2025-04-07 15:14:24 1290