- 博客(1003)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue3 + Qiankun 微前端最佳实践：组件通信与状态共享机制
在微前端架构逐步成为大型前端系统主流方案的背景下，子应用间的通信与状态共享是影响系统协作与扩展能力的核心技术点。本篇我们围绕实际开发中高频出现的通信场景，总结了一系列实用方案，并结合 Vue3 与 Qiankun 实现了高效的通信机制设计。
2025-05-30 19:30:00
956
原创 Vue3 + Qiankun 微前端最佳实践：权限路由动态加载与菜单模块拆分
本篇文章围绕 Vue3 + Qiankun 微前端架构，深入介绍了 RBAC 权限体系下的动态路由与菜单模块化设计。通过主应用集中控制，子应用被动接收的方式，实现了权限数据的统一与解耦。
2025-05-30 14:54:42
716
原创 前端微前端架构实践：基于 Qiankun 的多框架融合与动态加载方案
微前端（Micro Frontends）架构旨在将一个复杂的前端应用拆分为若干自治的子应用，每个子应用由独立的团队负责，甚至可以使用不同的框架。Qiankun 是目前国内应用最广泛的微前端框架之一，其核心优势在于简单易接入、兼容性强、主从解耦明显。Qiankun 是基于 single-spa 的一个封装，提供了更加易用的 API 和主流框架适配能力，尤其适合中国团队所熟悉的 Vue、React 等生态。
2025-05-29 11:08:41
785
原创 Java 中的响应式编程：以 Spring WebFlux 为例
Spring WebFlux 是 Spring Framework 5 中引入的全新响应式 Web 框架，它是为响应式编程模型设计的，基于非阻塞的 Reactor 项目（Project Reactor），并实现了 Reactive Streams 规范，使得 Java 在 Web 编程中具备异步处理高并发请求的能力。
2025-05-28 13:40:42
1047
原创 可视化大屏系列（6）：多端适配-实现智慧工地 PC 端与大屏端的统一设计与适配策略
通过检测设备的屏幕宽度与高度，我们可以动态决定布局方案、字体大小、图片尺寸等。
2025-04-24 07:45:00
1071
原创 可视化大屏系列（5）：设备状态面板与数据分析仪表盘
在这篇文章中，我们将重点讨论如何通过智能化手段提升工地设备的管理效率与维护质量。随着智能工地系统的不断发展，设备监控与维护管理变得尤为重要。本篇将从 设备状态实时监控、自动化维护提醒、设备管理与维修记录 三个方面入手，展示如何通过 Vue3 和 ECharts 构建一个智能化的设备管理平台，实时采集和展示设备运行状态、及时生成维护提醒并记录维修历史，以提高设备的使用效率与安全性。我们还将结合实际代码示例，详细讲解如何实现这些功能，帮助你在智能工地项目中实现设备管理的智能化、数字化和自动化。
2025-04-23 20:00:00
1733
原创 可视化大屏系列（4）：高德地图集成与动态热区渲染
功能项技术点实现建议图层切换checkbox 控制显示使用v-if控制图层组件交互反馈点击 marker 显示弹窗或面板使用@click+ Drawer联动同步地图和图表共享状态使用 Pinia 管理全局 state数据更新定时轮询 / WebSocket 实时刷新配合 loading 动画防抖处理UI 整洁性悬浮图层控制面板 + 动画显示保持右上角常驻入口。
2025-04-23 15:35:24
799
原创 可视化大屏系列（3）：ECharts 实现生产状态、环境监测、告警提醒
适配方式适用场景优点缺点大屏固定比例展示还原设计稿，结构清晰文字随缩放可能模糊rem + vw 单位普通 PC 页面或小屏幕更自然的文字与组件缩放样式调整工作量大自适应布局区域模块化布局、快速搭建需配合缩放或动态计算特性WebSocket双向通信✅ 支持（客户端与服务端双向）⛔ 仅服务端推送通道持久化✅ 支持持久连接✅ 支持持久连接支持断线重连✅ 需手动实现✅ 内置重连应用场景聊天、物联网状态、工地设备告警实时数据推送，如温度、湿度曲线等浏览器兼容性。
2025-04-22 14:45:00
1181
原创 可视化大屏系列（2）：核心模块 - 入场登记、人脸识别与权限控制
动态权限管理：根据用户行为、部门需求等动态调整权限。权限细化：将权限分解为更小的粒度（如查看、编辑、删除权限），从而进行更精细的控制。权限缓存：提高权限校验性能，可以在用户登录后缓存其权限，减少频繁的数据库查询。通过合理设计入场登记系统、人脸识别技术与权限控制模块，智慧工地管理系统能够有效地提高工地的管理效率与安全性。未来，可以根据用户需求进一步优化数据展示与权限管理，结合更多智能技术实现工地管理的智能化与自动化。
2025-04-22 08:38:43
630
原创 可视化大屏系列（1）：基于 Vue3 + ECharts 打造智慧工地大屏： 项目初始化与响应式布局方案
本文介绍了如何通过实现一个智慧工地的实时数据展示大屏，并讲解了如何实现响应式布局，确保适配各种屏幕。通过封装 ECharts 为组件，提升了代码复用性和可维护性。接下来，我们可以进一步扩展功能，增加更多数据可视化形式，并优化性能，以满足项目的需求。
2025-04-21 14:05:03
1429
原创 UniApp + uView UI 系列（三）：智能工地管理系统——统计图表与地图轨迹回放
本篇将进入可视化数据分析与轨迹还原阶段，通过 ECharts 图表展示巡检数据，并借助 腾讯地图 API 实现轨迹回放功能，为项目管理者提供更全面的决策支持能力。
2025-04-21 10:54:13
943
原创 UniApp + uView UI系列（二）智能工地管理系统核心功能开发：地图热区展示、扫码巡检与后台对接
通过与 ERP 系统的集成，用户权限与角色管理，以及数据同步与消息推送功能，我们能够确保系统的高效运作，并为用户提供实时的操作反馈。通过合理的 API 设计与权限控制，不仅提高了系统的安全性和可靠性，也确保了不同角色的用户能够高效协作，实现工地管理的智能化和数据化。在本篇文章中，我们深入探讨了如何为 UniApp + uView UI 构建的智能工地管理系统实现多语言支持，涵盖了 Vue I18n 插件的集成、语言切换的实现、以及跨平台的语言适配与优化。
2025-04-20 17:00:00
991
原创 UniApp + uView UI系列（一）从初始化项目到功能模块开发：构建智能工地管理系统
在智能工地管理系统的开发过程中，选择合适的技术栈至关重要。UniApp 是一款基于 Vue.js 的跨平台开发框架，支持 iOS、Android、Web 等多端统一开发，具有高效的开发体验和优秀的性能。uView UI 是一个为 UniApp 提供的高质量 UI 组件库，提供了丰富的界面元素和功能组件，能够帮助开发者快速构建现代化、高质量的用户界面。
2025-04-20 12:36:14
991
原创 基于 Vue 3 + Element Plus 构建企业级中后台系统实践：从开源框架快速搭建高质量项目
在 Vue3 + 微前端架构下，借助成熟框架（如 Vue-Vben-Admin）与现代工具链（Vite、Pinia、Single SPA 等），我们可以构建出功能完整、性能优越、可持续扩展的企业级中后台系统。本文围绕主题切换、部署实践、状态通信、动态注册、UI 统一等方面进行了深入实战分析，希望为你的项目架构提供借鉴与思路。
2025-04-20 12:10:49
931
原创 从架构到实战：企业级微前端架构深度实践与落地指南（Vue3 + React + Angular）
随着业务复杂度和前端系统体量的不断增长，微前端架构不仅仅是技术选择，更是组织协作效率的体现。它为大型系统提供了模块化拆分、团队独立开发、渐进式迁移与发布的可能性。尤其在 Vue3、React、Angular 等技术并行的企业实践中，模块联邦（Module Federation）与动态注册机制成为实现高扩展性架构的关键。然而，微前端并不是银弹。它带来的系统复杂度、部署与通信协调问题也需要工程团队具备扎实的架构能力、强健的基础设施与完善的团队协作流程。
2025-04-19 21:00:00
994
原创 从混乱到可控：TypeScript 在大型前端项目中的应用实践指南
在前端工程化日趋成熟的今天，TypeScript 已成为大型项目中不可或缺的技术核心。它不仅提升了代码的可维护性和可读性，更为多人协作、复杂业务逻辑提供了强大的类型系统保障。本文结合真实项目经验，分享如何高效在中大型前端项目中使用 TypeScript，提升开发质量与效率。
2025-04-19 16:39:55
658
原创 React 项目工程化实践与性能优化指南（附完整配置与实战经验）
React 项目从开发到上线的过程不仅仅是编写业务代码，更多的是如何在稳定性、性能、可维护性和开发效率之间找到一个平衡点。通过上述的项目结构设计、性能优化、代码规范、测试等策略，可以大大提升项目的质量与开发效率。微前端架构：使用Single SPA或Qiankun实现微前端架构，提升前端应用的可维护性和可扩展性。组件化库：开发符合设计系统规范的 UI 组件库，提升前端代码的复用性和一致性。服务端渲染：通过 Next.js 或自定义 SSR 方案提高 SEO 与首屏加载速度。全面优化打包构建。
2025-04-18 16:15:00
1109
原创 Python 实战：构建可维护的日志系统（支持本地 & 云端）
Python 内置logging多 Handler（控制台 / 文件 / Socket / 邮件等）日志等级：DEBUG、INFO、WARNING、ERROR、CRITICAL自定义日志格式、打标签（logger name）支持日志分模块记录一个完善的日志系统不仅仅是为了记录，更是系统稳定性、安全性和可运维性的核心保障。我们推荐大家在项目初期就构建规范、灵活的日志架构，并随着项目的迭代不断优化。异步日志队列 + Kafka 日志采集架构。
2025-04-18 15:30:00
1779
原创 Java 实战：企业级项目多环境配置管理与自动切换（基于 Spring Boot）
在企业级 Java 后端开发中，“开发、测试、生产”三种或更多环境的切换与配置管理，是保障系统稳定运行的关键。尤其是微服务体系下，配置混乱、误部署生产环境参数往往会引发严重后果。1.如何在 Spring Boot 项目中优雅管理多环境配置；2.如何使用自动激活机制实现环境切换；3.如何结合 Gitlab-CI / Jenkins 做环境部署安全控制；4.配置文件中常见的环境陷阱与优化策略；
2025-04-18 11:11:41
870
原创 构建企业级微前端架构：权限隔离、运行时沙箱与多应用部署实践
微前端架构在大型前端项目中正逐步成为主流选择，尤其在智慧工地、政企中后台、低代码平台等场景下表现出强大的扩展性与模块解耦能力。技术选型需基于业务复杂度与团队协作规模，非必要时不强行上马。真正落地微前端，不能只停留在引入框架层面，更需要权限控制、状态通信、统一样式、部署策略等多维度配合。文章中涉及的动态子应用注册、运行时权限隔离、统一日志监控、CI/CD 自动化部署、主题风格与组件共享等能力，才是构建一个真正可维护、可扩展、可协作的企业级微前端系统的关键所在。架构没有完美方案，只有合适与否。
2025-04-17 18:00:00
902
原创 Vue3 企业级项目实战：国际化、标签页缓存、Mock、接口生成、自动路由配置全攻略
本篇将从以下 5 个维度深入讲解如何构建一个更加完善的 Vue3 企业级项目架构，涵盖：1.国际化方案（i18n）;2.多标签页（Tab）+ 缓存方案;3.Mock 服务与 Swagger 接口同步生成;4.代码规范化 + Git Hooks 自动校验;5.自动路由生成插件 vite-plugin-pages 实战配置;每一节都结合真实项目场景，附上配置步骤与核心代码，方便你在项目中快速集成。
2025-04-17 17:30:00
821
原创 从零构建企业级 Node.js + TypeScript 项目骨架：工程化最佳实践全解析
本篇文章将带你从零构建一个企业级 Node.js + TypeScript 项目骨架，包括：项目结构规划配置分离与环境管理编码规范与 lint 工具路由与控制器模块化设计错误处理机制日志管理与请求追踪单元测试与接口 Mock进程守护与部署
2025-04-17 13:10:36
259
原创 Vue3 + Element Plus 实现企业级多主题切换：从本地配置到远程动态加载
在中大型管理系统、SaaS 多租户系统中，不同客户对“品牌样式”有不同需求。为了提高用户体验和界面一致性，动态主题切换（比如暗黑模式、品牌色变化） 已成为项目中必不可少的功能。本文将从实现原理出发，带你构建一个 支持运行时切换、自动持久化、支持多主题预设 的 Vue3 多主题系统。✅ 推荐：CSS变量 + 切换方式（兼顾运行时性能与灵活性）2. 创建主题切换逻辑3. 在 main.ts 中初始化主题4. 主题切换组件五、组件内使用 CSS 变量六、支持用户自定义主题色（进阶）
2025-04-16 20:46:10
1374
原创 前后端分离项目中的 Token 认证与自动续签机制实践（Vue3 + Node.js）
前端统一封装 Axios 拦截器，自动携带 Token，过期自动刷新。后端中间件统一验证 Token，权限校验与业务解耦。前端全局状态管理存储用户信息与权限，控制菜单、按钮、路由权限。建议将 Token 工具类、权限指令、登录页跳转逻辑封装为可复用模块或插件。
2025-04-16 11:15:38
766
原创 Vue3 实现模块级权限控制的最佳实践
在中大型前端项目中，权限控制是一项不可或缺的功能。无论是按钮级别、页面级别，还是模块级别的权限，合理的设计和高内聚的实现方式，直接影响系统的安全性和可维护性。
2025-04-15 15:15:16
810
原创 模块化与构建优化实践：提升大型前端项目可维护性与性能
本篇文章将围绕大型前端项目的模块化设计与构建优化展开，涵盖：1.模块化架构实践：业务拆分、共享模块、基础设施封装2.构建优化策略：按需加载、预编译、分包打包3.实战工具链：Vite、Webpack、ESBuild 配置技巧4.示例：Vue3 项目结构优化 + Vite 构建提速
2025-04-15 08:59:34
1180
原创 构建高可用前端性能监控系统：原理、设计与实战指南
本文将深入讲解前端性能监控系统的设计原理，并通过 Vue3 + Node.js 实现一个实战版本，覆盖：性能指标采集（FCP、TTFB、LCP、FID 等）；JS 异常/资源异常监控；页面卡顿监控（长任务识别）；自定义上报机制与后端存储；数据可视化看板接入（Echarts、Grafana）；
2025-04-11 10:35:12
1024
原创 深入理解前端中的模块化体系：ESM、CommonJS、AMD 对比与应用场景
技术选型场景推荐模块体系现代前端项目（React/Vue）ESM微前端架构后端 Node 项目纯 ESM（推荐）或 CommonJS（兼容旧项目）npm 组件开发UMD + ESM + CJS 打包统一模块系统 = 提升团队协作效率 + 提高打包性能 + 减少模块混乱问题。
2025-04-11 09:20:55
1219
原创 构建可维护的 Angular 企业级项目架构实践指南
Angular 相较 Vue、React，更倾向于“全栈式前端框架”：1.内置路由、表单、HTTP 模块2.强类型系统（TypeScript）3.强架构约束（NgModule、DI机制）4.适合多人协作 + 长期维护
2025-04-10 20:15:00
1480
原创 从 IIFE 到 ES Modules：前端模块化演进与实战解析
模块化方案适用场景加载方式状态IIFE/命名空间小项目/早期脚本全局挂载❌淘汰CommonJSNode.js同步加载✅ 服务端主流AMD浏览器脚本异步加载❌淘汰ES Modules浏览器/工程化构建静态分析 + 动态支持✅ 推荐。
2025-04-10 15:59:54
689
原创 深入理解 JavaScript 事件循环（Event Loop）与异步编程机制
JavaScript 是单线程语言，主线程负责执行所有的任务，但它并不会阻塞异步操作。这一切都依赖于“事件循环”机制。事件循环是浏览器和 Node.js 的核心调度器，负责将任务从任务队列（Task Queue）中调度到主线程执行。
2025-04-09 19:30:00
948
原创 Python 装饰器高级应用与工程实践：从函数封装到架构设计
函数即对象：可以被赋值、作为参数传递。闭包：函数在其外部作用域中引用了变量，返回新的函数。高阶函数：函数接收函数作为参数或返回函数。
2025-04-09 15:15:40
420
原创 深入讲解：HTTP 缓存机制的高级应用与优化
Service Worker 是一种浏览器的独立线程，用于处理网络请求、缓存、推送通知等后台任务。它与浏览器的主线程完全隔离，因此不会阻塞页面的渲染。缓存穿透是指在缓存机制下，即使资源未更新或过期，客户端仍然会重新请求服务器。请求资源的 URL 中带有动态参数（如时间戳、UUID 等）缓存设置不当，导致缓存始终失效CDN（内容分发网络）通过将静态资源分发到全球各地的服务器上，提高资源加载的速度。CDN 缓存资源可以减少用户请求的延迟，加速页面的加载。
2025-04-07 16:45:13
723
原创 深入浅出：如何构建高性能的 Vue3 单页应用（SPA）
在 SPA 架构中，整个应用只有一个 HTML 页面，所有的交互和内容更新都通过 JavaScript 来实现，避免了传统多页面应用的频繁刷新。在开发过程中，通过合理的代码分割、懒加载、图片优化等策略，能够显著提升用户体验和应用性能。在本节中，我们将使用 Vue3 构建一个简单的单页应用，并应用前述的性能优化策略，如代码分割、懒加载、图片优化等。通过代码分割，我们可以将不同页面和模块的代码拆分成小块，按需加载，减少首屏加载的时间。，这可以让我们的应用在服务器端预渲染页面，减少首屏加载的时间。
2025-04-07 11:20:13
793
原创 微前端架构实战：Vue3、React、Angular + Spring Boot 数据共享与通信方案详解
本篇文章将介绍如何使用 Vue3、React、Angular 作为前端微应用，并结合 Spring Boot 作为后端服务，打造一个高效、可扩展的前后端分离架构。
2025-04-03 10:55:29
950
原创 前端微应用（Vue3、React、Angular、Svelte）与 Single SPA 集成配置详解
不同前端微应用（Vue3、React、Angular 和 Svelte）的配置方式。每种微应用在与 Single SPA 集成时，都需要做一些特定的配置，如 Webpack、Rollup 配置、路由管理以及主入口文件的处理。这些配置确保了每个微应用的独立性、可维护性和可扩展性，同时也能通过 Single SPA 将它们无缝集成到主应用中。在前端微应用架构中，每个微应用都是一个独立的、可单独部署的模块，能够拥有自己的配置文件和技术栈。，它允许 Vue 应用与其他微应用进行集成。
2025-04-03 08:15:00
794
原创 前端微应用架构实践：智慧工地项目构建灵活、高效的前端架构
随着前端技术的不断发展和应用的复杂化，传统的单体前端架构逐渐暴露出许多问题，特别是在大型应用中，团队协作、模块开发、部署与维护的复杂度日益增加。为了解决这些问题，**前端微应用（Micro Frontends）**应运而生，成为了解决复杂前端架构问题的一种有效方案。本文将深入探讨 前端微应用的概念、设计模式、实现方法及其优势与挑战，并通过一个实际的 智慧工地项目，展示如何应用前端微应用架构解决实际问题。
2025-04-02 17:18:15
1644
原创 深入理解微服务架构：设计、实践与常见挑战
微服务架构（Microservices Architecture）是一种将应用程序拆分成多个小型、独立的服务的方法，每个服务通常围绕着特定的业务功能构建，能够独立部署、升级和扩展。微服务架构能帮助我们更好地分解系统，提升可维护性、扩展性，同时也需要解决诸如服务间通信、数据一致性、容错性等挑战。首先，我们使用 Spring Boot 创建一个简单的微服务应用。通过上述代码示例，我们演示了如何构建简单的微服务应用，并涉及了微服务之间的。为了避免在服务调用过程中某一服务不可用时，整个应用受到影响，我们可以使用。
2025-04-02 16:41:24
960
原创 软考是什么？考试科目、等级划分及报名指南
软考是 IT 行业的权威认证之一，对技术人员的职业发展、职称评定、薪资提升有很大帮助。不同等级的软考适合不同人群，考生可以根据自己的职业规划选择合适的考试科目。，旨在对从事计算机技术和软件开发、信息系统管理等领域的人员进行专业技术资格认证。（http://www.ruankao.org.cn/） 进行在线报名。软考的报名流程较为简单，考生可以在。：软考证书由国家颁发，可作为。（身份证、照片、联系方式等），任何人都可以报考，适合。，通过考试后可获得相应的。等），持有软考证书可以。（各地收费不同，一般。
2025-04-02 15:24:59
877
原创 深入解析 HTML 与 CSS：构建高效、响应式 Web 界面
在 Web 开发中，HTML 负责页面结构，CSS 负责页面样式。随着 Web 发展，如何编写 语义化的 HTML 和 高效、响应式的 CSS 变得至关重要。本文将围绕 HTML 结构优化、CSS 高级特性、响应式布局技巧、动画优化、代码复用 展开深入探讨，并提供大量示例代码，以帮助开发者构建高效、美观、易维护的 Web 页面。
2025-04-02 13:56:05
622
Python编程实战指南，个人总结，项目实战，避坑指南，包含： 基础语法、面向对象编程、数据结构、算法、网络编程、Web 开发、自动化任务、数据分析、机器学习
2025-03-18
Python编程入门到实践：涵盖基础核心知识、代码示例、练习题
2025-03-18
HTML5 前端开发代码实例与项目资源合集
2024-10-16
通过什么技术可以实现如图所示的效果？
2024-11-21
前端=美工+UI？当裁员来临，我们前端开发还有未来吗？
2024-10-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人