- 博客(75)
- 收藏
- 关注
RSS订阅原创 NestJS 系列教程（十五）：缓存体系设计 —— Redis、接口缓存与缓存三大问题解决方案
本文介绍了在NestJS中设计缓存体系的完整方案。主要内容包括：1）通过ioredis模块实现Redis接入；2）服务层封装接口级缓存；3）解决缓存三大问题（穿透、击穿、雪崩）；4）优雅封装CacheService；5）缓存与限流、traceId等系统组件的联动设计。文章提供了生产级目录结构和缓存策略建议，帮助开发者构建可上线的NestJS架构，有效减轻数据库压力并提升系统稳定性。
2026-03-09 17:42:16
90
原创 NestJS 系列教程（十四）：性能与稳定性 —— 限流、防刷与超时控制
文章摘要 本文是NestJS系列教程的第14篇，重点讲解如何保障后端服务的性能与稳定性。主要内容包括： 限流防刷：使用Guard实现IP级和用户级接口限流，防止恶意请求拖垮服务 超时控制：通过Interceptor设置请求超时，避免慢接口影响整体性能 系统集成：将限流、超时等防护机制与traceId日志体系结合，实现完整的监控链路 最佳实践：推荐基础防护组合（TraceMiddleware+RateLimitGuard+TimeoutInterceptor等） 文章提供了可直接落地的代码示例，帮助开发者构建
2026-03-09 17:33:40
224
原创 NestJS 系列教程（十三）：日志中间件与请求链路追踪（TraceId 实战）
举个平常生活中进行网购的例子，假设线上报错：“用户反馈：刚才下单失败了”[ERROR] 创建订单失败[ERROR] 用户不存在[INFO] 查询订单哪一条日志属于“刚才那个请求”？多个请求同时进来，日志混在一起，怎么定位？
2026-03-04 16:02:08
299
原创 前端国际化（i18n）体系设计与工程化落地
坑后果Key 命名随意后期无法维护文案写死在组件无法扩展一次加载全部语言性能灾难翻译人员直接改代码风险极高没有 Key 校验文案混乱🧱 文案完全解耦📦 支持模块化与懒加载🔁 支持无刷新切换🌍 覆盖语言、日期、货币、方向🛠️ 可维护、可扩展、可协作国际化不是“翻译问题”，而是工程问题。
2026-02-05 14:38:40
574
原创 NestJS 系列教程（十二）：统一异常处理与响应结构封装
/ HTTP 状态仍为 200throw new BusinessException('用户不存在');"message": "用户不存在",
2026-01-22 22:56:12
405
原创 NestJS 系列教程（十一）：集成 Swagger 实现自动 API 文档与接口测试
我会带你一起掌握如何将错误结构、正常响应结构统一成标准格式，配合拦截器 + 异常过滤器提升接口一致性与可维护性。Swagger 是目前最主流的 RESTful API 文档生成与测试标准，Nest 提供了。你会看到熟悉的 Swagger Web UI！这样，Swagger 文档将会显示。
2025-10-29 22:48:02
710
原创 vite启动项目的时候报错，failed to write to output file
经过查找资料发现，这个报错 99% 是 Vite 预打包（esbuild）要把产物写进缓存目录时失败了。默认缓存在（dev 预构建）或./dist（build），常见原因有：权限/只读、磁盘满、被同步盘或杀软占用、容器挂载为只读、路径不存在或被占用、Monorepo 路径混乱等。
2025-10-28 15:17:26
332
原创 NestJS 系列教程（十）：整合数据库 —— 使用 TypeORM 实现实体与增删查改
是 PostgreSQL 驱动，若使用 MySQL 则安装。为例（你也可以选择 MySQL、SQLite 等）。
2025-09-15 21:30:13
649
原创 CSS `:has()` 实战指南：让 CSS 拥有“if 逻辑”
has():has()是让 CSS 更加“智能”的关键一步，它让样式具备逻辑判断能力，能大幅减少 JS 样式控制逻辑，是现代 CSS 架构中不可或缺的新利器。
2025-09-15 21:23:38
385
原创 CSS `:is()` & `:where()` 实战指南：简化选择器，提升可维护性
is():is()和:where()是现代 CSS 的“选择器助手”，让你的样式更简洁、更可维护，合理利用权重差异，还能轻松写出优雅的架构。
2025-09-09 22:41:08
337
原创 WebAssembly 在前端的实践与未来
WebAssembly 是一种可移植、体积小、加载快的二进制指令格式，能在浏览器中运行接近原生的性能。🔥高性能：接近 C/C++/Rust 的执行速度🌍跨平台：浏览器、Node.js、Deno 均可运行🛠多语言支持：C/C++、Rust、Go、AssemblyScript 均可编译到 Wasm🔒安全沙箱：在浏览器安全环境中执行Wasm 是 JS 的“性能外挂”。适合：计算密集型、大型库移植、安全场景优势：高性能、跨语言、安全未来：走向前后端统一执行环境不是替代 JS，而是补充 JS。
2025-09-03 11:56:59
1126
原创 React 18 性能优化实战指南
阶段核心优化加载优化代码分割、依赖按需、资源优化渲染优化memo 缓存、并发渲染、虚拟列表交互优化防抖节流、批处理、Web Worker💡 优化不是一蹴而就的过程，而是架构设计、代码习惯与监控反馈的持续迭代。
2025-09-03 11:45:02
958
原创 `text-wrap: balance` 实战指南：让多行标题自动排版更优美
是一个“低代码”甚至“零代码”的视觉优化神器，让多行文本的排版不再依赖繁琐的 JS 计算，是响应式和内容型网站必备的新武器。
2025-08-18 10:18:22
421
原创 NestJS 系列教程（九）：环境变量与配置管理（ConfigModule 实践）
传统方式（process.env）推荐方式（ConfigService）易错，类型不安全提供类型定义、校验更安全跨文件调用困难注入式调用，依赖更清晰多环境支持繁琐内置多环境文件加载机制配置杂乱无结构可按功能模块化配置管理。
2025-08-15 14:50:11
741
原创 Vue3 项目性能优化实战指南
阶段核心手段加载优化路由懒加载、按需引入、静态资源优化渲染优化合理 v-if/v-show、避免深度代理、虚拟滚动交互优化防抖节流、computed 缓存、Worker 分担计算💡 Vue3 自带很多性能优势，但架构设计 + 代码习惯决定了项目的最终体验。
2025-08-15 14:43:46
752
原创 前端性能优化进阶指南：从 1 秒到 100 毫秒的蜕变
前端性能优化 =加载快 + 渲染快 + 交互快 + 持续监控阶段技术手段加载优化压缩、分割、缓存、图片优化渲染优化减少回流、虚拟列表、SSR交互优化防抖节流、Worker、预加载监控反馈⚡ 性能优化不是一次性任务，而是持续迭代的过程。你要做的，是让用户永远感到「它就是快」。
2025-08-12 15:03:48
933
原创 前端性能监控与埋点全攻略：从零构建高质量体验感知体系！
模块技术手段页面性能web-vitals行为埋点手动绑定事件 / 自动监听 / rrwebJS 错误请求异常fetch 拦截 + 响应状态判断数据上报sendBeaconimagefetch埋点是数据驱动的前提，性能监控是用户体验的守门员。前端不只是“展示层”，更是产品体验的第一线！
2025-08-12 14:40:48
381
原创 NestJS 系列教程（八）：构建模块化服务 —— 子模块拆分与服务复用实践
你将学会：我们来构建两个典型模块：目标：在 中注入 来获取用户信息，实现模块间的解耦复用。users.service.tsusers.controller.ts📦 2. 创建 Orders 模块并依赖 UsersService🚀 3. 修改 OrdersService 使用 UsersService在 中注入 ：修改 orders.controller.ts🧠 模块之间共享服务的关键你需要在 中导出服务：然后在 中引入：🔗 AppModule 汇总配置
2025-08-08 13:06:13
414
原创 Webpack 5 Module Federation 模块共享最佳实践
Module Federation 是 Webpack 5 新增的一项特性，允许多个独立构建的应用之间共享代码（模块），实现“在运行时加载远程模块”。它解决了什么问题？传统方式问题NPM 包共享每次改动都要重新构建 + 发包CDN 引入缺乏依赖管理与模块边界iframe 嵌套用户体验差，通信复杂Module Federation 是“运行时模块共享的终极解决方案能力是否具备跨项目组件共享✅独立构建 + 独立部署✅运行时模块热加载✅不同技术栈兼容（Vue/React）✅。
2025-08-05 13:27:24
1193
原创 NestJS 系列教程（七）：管道（Pipes）详解与参数校验实战
Pipe 是一种可以在方法处理前对数据进行转换或验证的机制。在控制器方法调用前对来自请求的数据（如 query、param、body）进行操作若验证失败，可以抛出异常中断请求自定义 Pipe 要实现接口。功能PipeGuard处理顺序早于 Guard 执行Pipe 执行后最后执行（控制器执行前后）常见用途验证、转换参数鉴权、角色控制响应结构统一、日志、缓存可否修改响应值❌❌✅。
2025-08-05 13:11:47
469
原创 Import Maps 实战指南：无需打包器，浏览器原生模块路径重映射！
是一项由浏览器支持的标准，用来告诉浏览器如何解析 import 的模块路径。// bundler 替你解析成路径然后在 HTML 中声明即可："imports""lodash"</Import Maps 是浏览器原生的模块解析控制器，让前端真正迈入“无构建开发”的新时代，也是 Web 生态更加模块化、可控化的关键桥梁。👍 如果你觉得这篇文章有帮助，欢迎，后续我会努力更新更多的前端实用技术。
2025-07-31 11:05:26
1038
原创 NestJS 系列教程（六）：拦截器（Interceptor）与统一响应封装
控制器方法执行前后拦截调用；修改方法返回值；异步处理逻辑，如日志、缓存、异常封装等。拦截器通过实现接口构建。
2025-07-23 21:20:06
611
原创 如何打造一个通用表单生成器组件系统？
能力是否具备JSON Schema 驱动✅渲染灵活、可插拔✅动态控制（联动/隐藏/禁用）✅校验、格式化、国际化✅可被复用、多项目通用✅易于扩展组件/设计器✅🎯 一个真正优秀的表单系统，是「抽象能力 + 业务理解 + 技术落地」的结合体。👍 如果你觉得这篇文章有帮助，欢迎，之后会为大家带来更多的关于前端使用技术。
2025-07-16 08:00:00
726
原创 Popover API 实战指南：前端弹层体验的原生重构
Popover API 是 HTML 标准中新加入的一种弹出层机制，通过属性popover和方法控制元素显隐，它内置了定位机制、自动焦点处理、遮罩等功能。📌 类似<dialog>，但更通用、轻量、可自由挂载。Popover API 是前端浮层交互的原生化升级，不再需要手搓逻辑或依赖庞大库，拥有更轻、更快、更一致的弹层能力，是真正「组件时代」的基础设施。👍 如果你觉得这篇文章有帮助，欢迎，后续我会努力更新更多的前端样式方面的实用技巧。
2025-07-14 23:40:34
939
原创 NestJS 系列教程（五）：守卫（Guards）与 JWT 用户认证
我们将讲解如何使用拦截器对响应结果统一封装、记录日志、实现响应缓存等能力。（比如 handler metadata）和。的机制，通常用于认证和授权。与中间件不同的是，守卫能访问。，适合做「权限控制」。
2025-07-12 11:41:20
584
原创 NestJS 系列教程（四）：中间件、中断器与异常过滤器详解
中间件是一个在请求到达处理函数之前被调用的函数。你可以用它来记录日志、验证请求、添加请求数据等。创建import {Catch,import {import {} }();
2025-07-08 23:43:48
539
原创 如何设计一个“真正可复用”的前端组件？
所谓“可复用”，不仅是复制粘贴组件这么简单，而是：✅ 能跨多个页面/模块使用✅ 能被复合、嵌套、组合✅ 能支持灵活配置和扩展✅ 能隔离内部逻辑，隐藏实现细节✅ 能在多个项目中迁移使用（库化）<TableemptyTip={<Empty description="暂无数据" />}/>这样封装后，整套表格系统可被复用于几十个页面。✅低耦合：功能单一，职责清晰✅高内聚：UI 与状态适度绑定✅可组合：支持嵌套、插槽、自定义结构✅可配置：props + config 驱动行为。
2025-07-07 22:10:13
464
原创 NestJS 系列教程（三）：构建 RESTful API —— 路由、DTO 与请求处理
我们继续在上一章的cats模块下扩展接口，构建完整的 REST API。src/└── cats/├── dto/更新import {Get,Post,Body,Param,Delete,Put,@Post()@Get()装饰器作用@Body()获取 POST 请求体@Param()获取 URL 路径参数@Query()获取 URL 查询参数（如?q=xxx）@Headers()获取请求头信息@Req()获取完整 Request 对象（不推荐）
2025-07-06 20:58:13
447
原创 CSS Nesting 实战指南：原生支持层级嵌套，从此告别 SCSS？
CSS Nesting（嵌套规则）是 CSS 原生规范的一部分，它允许你在一个选择器规则内，嵌套定义其子规则，更接近 HTML 结构本身的样式逻辑表达。.card {h2 {&:hover {在 CSS Nesting 中，也可以这样写（略有区别，语法更严谨）。优势点说明更接近 HTML 结构可一目了然看到组件内部样式层级更少 class 命名污染无需像 BEM 那样冗长命名更高维护性多人协作、组件拆分时可读性和上下文更明确减少构建依赖。
2025-07-06 20:52:05
584
原创 NestJS 系列教程（二）：模块化架构与依赖注入机制详解
在 Nest 中，模块是组织代码的基本单元。每个功能领域应被封装在自己的模块中。每个模块都应该聚焦于一类职责或功能领域，如：用户模块、商品模块、订单模块等。
2025-07-03 21:28:46
763
原创 CSS `@scope` 实战指南：开启局部样式隔离新时代
scope优势CSS@scope能力描述样式隔离避免样式污染、影响外部结构原生语法不依赖框架，不引入编译复杂度更语义化的组件设计更清晰表达“哪些样式属于哪个结构”适配未来的 Web 组件体系可直接与 Web Components / SSR 配合使用CSS@scope是继变量和容器查询后最值得期待的 CSS 原生能力，它让组件样式隔离更易读、更可维护、更高效，是真正面向未来的样式组织利器！
2025-07-03 08:00:00
928
原创 NestJS 系列教程（一）：认识 NestJS 与项目初始化
Nest 是一个渐进式 Node.js 框架，用于构建高性能的服务端应用。Nest 基于 TypeScript 构建，并受 Angular 的启发，结构清晰、模块化、可测试性强。它对 Express（默认）或 Fastify 提供封装，保留底层自由度，同时提供更现代的结构化开发体验。
2025-07-02 21:05:20
899
原创 Vite 构建优化全攻略：快，还能更快！
⏱️ 秒级冷启动📦 构建包体积大幅减小🚀 热更新丝滑流畅💡 复杂项目模块清晰、可控没有最快，只有更快；Vite 构建优化，一定能让你的工程更“丝滑”。👍 如果你觉得这篇文章有帮助，欢迎，后续我会努力更新更多的前端构建工具方面的实用技巧。
2025-07-01 22:45:40
697
原创 requestIdleCallback 与 requestAnimationFrame 实战指南：掌控任务调度的两把利刃！
对比维度调度频率每帧调用（16.7ms）空闲时调用（不固定）任务适用动画绘制、位移、过渡等非关键任务、预处理、缓存等是否影响页面流畅度❌ 可能，如果任务过重✅ 避免卡顿（除非任务超大）是否受页面可见性影响✅ 背景页暂停✅ 背景页暂停兼容性✅ 所有主流浏览器支持⚠️ Firefox/Safari 不支持，需降级是让 UI 更丝滑的时间节拍器，而是提升性能的浏览器缝隙利用器。前者负责「动得好」，后者负责「做得巧」！👍 如果你觉得这篇文章有帮助，欢迎。
2025-07-01 08:00:00
908
原创 CSS Scroll Snap 实战指南：让滚动体验“自动对齐”
Scroll Snap 是一套 CSS 属性组合，用于让滚动元素在滚动结束时自动对齐到特定子元素，实现丝滑的视觉分页体验。父元素设置滚动方向 + 捕捉行为子元素设置对齐点CSS Scroll Snap 是你实现无需 JS 的滚动分页体验最简单有效的方式，不仅优雅流畅，还极其易于维护！
2025-06-27 08:00:00
509
原创 前端环境变量与配置管理实战指南：从开发到上线都不踩坑！
环境变量（Environment Variables）是在构建或运行时注入到应用中的配置信息，通常用于区分开发/测试/生产等不同环境下的参数。技术点说明多环境区分.env.*文件配合--mode使用安全前缀限制只能读取带VITE_REACT_APP_等前缀的变量运行时注入方式使用方式更灵活、安全CI/CD 集成可自动注入构建信息、环境标识、提交记录等环境变量不是“辅助工具”，而是前端工程中配置管理与部署安全的核心基建。用好了，你的前端就能稳定、灵活、可控地上线！
2025-06-26 08:00:00
434
原创 前端性能的隐藏杀手锏：用好 preload / prefetch / preconnect
预加载类型使用时机推荐搭配场景preconnect页面初始化立即使用的外域资源CDN、API、字体、第三方服务等preload当前页但不会立即请求的关键资源字体、首屏图像、异步 JSprefetch未来可能访问的资源路由页面、Tab 模块、动态组件如果说懒加载是延后加载，那么预加载就是提前预测用户行为，并将资源“预投喂”给浏览器，用好这三大策略，你就拥有了提升体验的又一把“浏览器原生利器。👍 如果你觉得这篇文章有帮助，欢迎，后续我会努力更新更多的前端性能优化的实用技巧。
2025-06-25 12:01:07
1004
原创 动画炫酷但卡顿？前端高性能动画实现的实战指南！
动画是页面体验加分项，但如果没处理好，可能成为「性能杀手」。让动画只发生在 GPU 合成层上，而不是反复重排页面。👍 如果你觉得这篇文章有帮助，欢迎，后续我会努力更新更多的前端动画优化的实用技巧。
2025-06-20 08:00:00
935
原创 从小水管到洪流：你真的会用前端 Stream API 吗？
Stream（流）是指“按块”处理数据的一种方式，而不是等待整个数据加载完成。🚀 文件上传、下载🎥 视频边下边播📦 大型 JSON 文件解析🧠 AI 接口的流式响应（如 OpenAI）Stream 就像一个数据的水管：一边输入（ReadableStream），一边输出（WritableStream）。📉 降低内存消耗，提升用户体验⏱️ 加快处理速度，尤其在网络/文件传输中🧬 适配未来数据流趋势（AI、大文件、直播、微服务）Stream 不只是后端的玩具，前端也该用起来！
2025-06-19 08:00:00
975
原创 元素大小驱动样式？用 CSS `Container Queries` 实现真正的“组件级”响应式！
传统媒体查询是这样写的：📌 缺陷是显而易见的： 是 CSS 的新能力，允许组件根据容器大小而非视口大小来变化样式。比如下面这种写法：✅ 意味着：当 所在的容器宽度达到 500px 时才触发该样式。我们来做一个组件，在小容器下是垂直排版，大容器下变成横排展示。💅 CSS 样式📌 效果：当 的宽度小于500px，布局为纵向排列；宽度超过 500px，布局自动切换为横排形式。📸 效果图展示你可以通过拖拽容器或切换布局来测试效果，例如：即使在同一个页面上，不同卡片也能根据各自容器大小响应
2025-06-18 08:00:00
702
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人