- 博客(54)
- 收藏
- 关注
RSS订阅原创 NestJS 系列教程（六）：拦截器（Interceptor）与统一响应封装
控制器方法执行前后拦截调用；修改方法返回值；异步处理逻辑，如日志、缓存、异常封装等。拦截器通过实现接口构建。
2025-07-23 21:20:06
384
原创 如何打造一个通用表单生成器组件系统？
能力是否具备JSON Schema 驱动✅渲染灵活、可插拔✅动态控制（联动/隐藏/禁用）✅校验、格式化、国际化✅可被复用、多项目通用✅易于扩展组件/设计器✅🎯 一个真正优秀的表单系统，是「抽象能力 + 业务理解 + 技术落地」的结合体。👍 如果你觉得这篇文章有帮助，欢迎，之后会为大家带来更多的关于前端使用技术。
2025-07-16 08:00:00
661
原创 Popover API 实战指南：前端弹层体验的原生重构
Popover API 是 HTML 标准中新加入的一种弹出层机制，通过属性popover和方法控制元素显隐，它内置了定位机制、自动焦点处理、遮罩等功能。📌 类似<dialog>，但更通用、轻量、可自由挂载。Popover API 是前端浮层交互的原生化升级，不再需要手搓逻辑或依赖庞大库，拥有更轻、更快、更一致的弹层能力，是真正「组件时代」的基础设施。👍 如果你觉得这篇文章有帮助，欢迎，后续我会努力更新更多的前端样式方面的实用技巧。
2025-07-14 23:40:34
748
原创 NestJS 系列教程（五）：守卫（Guards）与 JWT 用户认证
我们将讲解如何使用拦截器对响应结果统一封装、记录日志、实现响应缓存等能力。（比如 handler metadata）和。的机制，通常用于认证和授权。与中间件不同的是，守卫能访问。，适合做「权限控制」。
2025-07-12 11:41:20
391
原创 NestJS 系列教程（四）：中间件、中断器与异常过滤器详解
中间件是一个在请求到达处理函数之前被调用的函数。你可以用它来记录日志、验证请求、添加请求数据等。创建import {Catch,import {import {} }();
2025-07-08 23:43:48
403
原创 如何设计一个“真正可复用”的前端组件？
所谓“可复用”，不仅是复制粘贴组件这么简单，而是：✅ 能跨多个页面/模块使用✅ 能被复合、嵌套、组合✅ 能支持灵活配置和扩展✅ 能隔离内部逻辑，隐藏实现细节✅ 能在多个项目中迁移使用（库化）<TableemptyTip={<Empty description="暂无数据" />}/>这样封装后，整套表格系统可被复用于几十个页面。✅低耦合：功能单一，职责清晰✅高内聚：UI 与状态适度绑定✅可组合：支持嵌套、插槽、自定义结构✅可配置：props + config 驱动行为。
2025-07-07 22:10:13
351
原创 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
269
原创 CSS Nesting 实战指南：原生支持层级嵌套，从此告别 SCSS？
CSS Nesting（嵌套规则）是 CSS 原生规范的一部分，它允许你在一个选择器规则内，嵌套定义其子规则，更接近 HTML 结构本身的样式逻辑表达。.card {h2 {&:hover {在 CSS Nesting 中，也可以这样写（略有区别，语法更严谨）。优势点说明更接近 HTML 结构可一目了然看到组件内部样式层级更少 class 命名污染无需像 BEM 那样冗长命名更高维护性多人协作、组件拆分时可读性和上下文更明确减少构建依赖。
2025-07-06 20:52:05
402
原创 NestJS 系列教程（二）：模块化架构与依赖注入机制详解
在 Nest 中，模块是组织代码的基本单元。每个功能领域应被封装在自己的模块中。每个模块都应该聚焦于一类职责或功能领域，如：用户模块、商品模块、订单模块等。
2025-07-03 21:28:46
673
原创 CSS `@scope` 实战指南：开启局部样式隔离新时代
scope优势CSS@scope能力描述样式隔离避免样式污染、影响外部结构原生语法不依赖框架，不引入编译复杂度更语义化的组件设计更清晰表达“哪些样式属于哪个结构”适配未来的 Web 组件体系可直接与 Web Components / SSR 配合使用CSS@scope是继变量和容器查询后最值得期待的 CSS 原生能力，它让组件样式隔离更易读、更可维护、更高效，是真正面向未来的样式组织利器！
2025-07-03 08:00:00
824
原创 NestJS 系列教程（一）：认识 NestJS 与项目初始化
Nest 是一个渐进式 Node.js 框架，用于构建高性能的服务端应用。Nest 基于 TypeScript 构建，并受 Angular 的启发，结构清晰、模块化、可测试性强。它对 Express（默认）或 Fastify 提供封装，保留底层自由度，同时提供更现代的结构化开发体验。
2025-07-02 21:05:20
772
原创 Vite 构建优化全攻略：快，还能更快！
⏱️ 秒级冷启动📦 构建包体积大幅减小🚀 热更新丝滑流畅💡 复杂项目模块清晰、可控没有最快，只有更快；Vite 构建优化，一定能让你的工程更“丝滑”。👍 如果你觉得这篇文章有帮助，欢迎，后续我会努力更新更多的前端构建工具方面的实用技巧。
2025-07-01 22:45:40
404
原创 requestIdleCallback 与 requestAnimationFrame 实战指南：掌控任务调度的两把利刃！
对比维度调度频率每帧调用（16.7ms）空闲时调用（不固定）任务适用动画绘制、位移、过渡等非关键任务、预处理、缓存等是否影响页面流畅度❌ 可能，如果任务过重✅ 避免卡顿（除非任务超大）是否受页面可见性影响✅ 背景页暂停✅ 背景页暂停兼容性✅ 所有主流浏览器支持⚠️ Firefox/Safari 不支持，需降级是让 UI 更丝滑的时间节拍器，而是提升性能的浏览器缝隙利用器。前者负责「动得好」，后者负责「做得巧」！👍 如果你觉得这篇文章有帮助，欢迎。
2025-07-01 08:00:00
754
原创 CSS Scroll Snap 实战指南：让滚动体验“自动对齐”
Scroll Snap 是一套 CSS 属性组合，用于让滚动元素在滚动结束时自动对齐到特定子元素，实现丝滑的视觉分页体验。父元素设置滚动方向 + 捕捉行为子元素设置对齐点CSS Scroll Snap 是你实现无需 JS 的滚动分页体验最简单有效的方式，不仅优雅流畅，还极其易于维护！
2025-06-27 08:00:00
342
原创 前端环境变量与配置管理实战指南：从开发到上线都不踩坑！
环境变量（Environment Variables）是在构建或运行时注入到应用中的配置信息，通常用于区分开发/测试/生产等不同环境下的参数。技术点说明多环境区分.env.*文件配合--mode使用安全前缀限制只能读取带VITE_REACT_APP_等前缀的变量运行时注入方式使用方式更灵活、安全CI/CD 集成可自动注入构建信息、环境标识、提交记录等环境变量不是“辅助工具”，而是前端工程中配置管理与部署安全的核心基建。用好了，你的前端就能稳定、灵活、可控地上线！
2025-06-26 08:00:00
278
原创 前端性能的隐藏杀手锏：用好 preload / prefetch / preconnect
预加载类型使用时机推荐搭配场景preconnect页面初始化立即使用的外域资源CDN、API、字体、第三方服务等preload当前页但不会立即请求的关键资源字体、首屏图像、异步 JSprefetch未来可能访问的资源路由页面、Tab 模块、动态组件如果说懒加载是延后加载，那么预加载就是提前预测用户行为，并将资源“预投喂”给浏览器，用好这三大策略，你就拥有了提升体验的又一把“浏览器原生利器。👍 如果你觉得这篇文章有帮助，欢迎，后续我会努力更新更多的前端性能优化的实用技巧。
2025-06-25 12:01:07
818
原创 动画炫酷但卡顿？前端高性能动画实现的实战指南！
动画是页面体验加分项，但如果没处理好，可能成为「性能杀手」。让动画只发生在 GPU 合成层上，而不是反复重排页面。👍 如果你觉得这篇文章有帮助，欢迎，后续我会努力更新更多的前端动画优化的实用技巧。
2025-06-20 08:00:00
821
原创 从小水管到洪流：你真的会用前端 Stream API 吗？
Stream（流）是指“按块”处理数据的一种方式，而不是等待整个数据加载完成。🚀 文件上传、下载🎥 视频边下边播📦 大型 JSON 文件解析🧠 AI 接口的流式响应（如 OpenAI）Stream 就像一个数据的水管：一边输入（ReadableStream），一边输出（WritableStream）。📉 降低内存消耗，提升用户体验⏱️ 加快处理速度，尤其在网络/文件传输中🧬 适配未来数据流趋势（AI、大文件、直播、微服务）Stream 不只是后端的玩具，前端也该用起来！
2025-06-19 08:00:00
859
原创 元素大小驱动样式？用 CSS `Container Queries` 实现真正的“组件级”响应式！
传统媒体查询是这样写的：📌 缺陷是显而易见的： 是 CSS 的新能力，允许组件根据容器大小而非视口大小来变化样式。比如下面这种写法：✅ 意味着：当 所在的容器宽度达到 500px 时才触发该样式。我们来做一个组件，在小容器下是垂直排版，大容器下变成横排展示。💅 CSS 样式📌 效果：当 的宽度小于500px，布局为纵向排列；宽度超过 500px，布局自动切换为横排形式。📸 效果图展示你可以通过拖拽容器或切换布局来测试效果，例如：即使在同一个页面上，不同卡片也能根据各自容器大小响应
2025-06-18 08:00:00
581
原创 CSS Anchor Positioning：重新定义「锚定定位」的时代来了！
CSS Anchor Positioning 是一项革命性的新特性，它通过纯CSS实现了元素的精确锚定定位。这项技术解决了传统弹出层开发中的多个痛点，包括繁琐的JS定位计算、滚动适应和防遮挡问题。
2025-06-17 08:30:00
430
原创 打造丝滑滚动体验：Scroll-driven Animations 正式上线！
（基于滚动的动画）是 CSS Animation 最新草案的一部分。它允许你直接在 CSS 中根据页面滚动进度驱动动画，无需 JavaScript！由 Chrome 团队推动，目前已在 Chromium 系浏览器中可用（Chrome 115+）。滚动动画进入声明式时代。你再也不需要手动写scroll监听器，也无需用 JS 操作样式。只需几行 CSS，就能实现视差滚动、延迟加载、进度动画等视觉效果。赶紧打开 Chrome DevTools 开始尝试吧，下一代动效方案，你准备好了吗？
2025-06-15 20:23:55
382
原创 CSS Houdini 解锁前端动画的下一个时代！
CSS Houdini：解锁前端动画新境界 🚀 CSS Houdini是一组突破性的浏览器API，它让CSS从静态样式升级为可编程动画引擎。通过Paint Worklet、Layout Worklet等核心组件，开发者可以直接用JS编写高性能的绘制逻辑，创建传统CSS无法实现的炫酷动效。
2025-06-13 08:04:55
518
原创 一次惊艳的页面动效优化：用 View Transition API 带来“原生级”丝滑体验
《让网页动效更丝滑：View Transition API实战指南》摘要： Chrome推出的View Transition API解决了传统SPA动画生硬的痛点，无需复杂代码即可实现原生App般的过渡效果。文章通过图片切换案例，演示了如何利用view-transition-name标记动画元素，并用document.startViewTransition触发流畅动画。该技术适用于页面切换、DOM重排等场景，支持自动衔接DOM变化，兼容SSR/CSR混合架构。
2025-06-12 12:42:50
728
原创 Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath ‘./lib/tokenize‘ is not defined by “exports“
react项目运行时报错
2023-03-02 16:02:02
11120
原创 使用vite创建项目运行时Network提示‘use `--host` to expose’
使用vite创建项目运行时Network提示 “use --host to expose”最近在使用vite创建项目，使用npm跑起来后发现，Network没有显示具体的地址，在Network那个地方会显示如下图所示的这句话：这样的话，即使在同一个局域网内，其他人也无法访问到我这个页面，这个还是比较麻烦的；后来我通过查阅资料发现，原来Network不显示地址是因为IP没有做配置，所以不能从IP启动，这样的话也就没有办法通过IP访问我的页面。解决方法：咱们看一下官网上给的配置信息：这样一看，咱
2022-03-29 21:39:27
1908
原创 vscode配置在react的jsx中补全html提示
vscode配置在react的jsx中补全html提示点击vscode的文件 —》首选项 —》设置，然后搜索 includeLanguages，在出现的页面点击添加项，然后添加图中所示即可。或者直接在setting.json文件中添加如下配置："emmet.includeLanguages": {"javascript": "javascriptreact"},...
2022-03-17 19:31:09
1715
原创 微信小程序＜scroll-view＞组件左右滑动没有效果的问题
微信小程序组件左右滑动没有效果的问题小程序组件 < scroll-view > 中分别有上下竖向滑动和左右横向滑动之分，在这次项目中刚好需要用到横向滑动，但在测试过程中发现横向滑动没有了效果（静止在那里没移动过），经调试发现：< scroll-view > 中的需要滑动的元素不可以用 float 浮动；< scroll-view > 中，包裹着需要滑动的元素的大盒子用 display:flex; 是没有作用的；< scroll-view > 中的需要
2022-03-14 07:51:10
721
原创 npm全局安装的包文件所在的位置
npm全局安装的包文件所在的位置有时候我们需要通过npm来安装一些配置在全局环境下的包，但是具体下载安装在什么位置却没有任何提示，这时候我们可以通过 npm root -g 来进行查询，就可以知道全局配置的包下载的位置了。npm root -g各个系统默认存放的位置1.WindowsC:\Users\username\AppData\Roaming\npm\node_modules2.Mac/usr/local/lib/node_modules/sprites-cli3.Linux/
2021-10-13 19:44:33
2470
原创 微信小程序中class=“container”的bug
微信小程序中class=“container”的bug今天在开发微信小程序的时候，在不经意间发现了一个bug，那就是如果把父元素的 class 设置为 container 的话，那么弹性布局 display:flex 就不起作用了如果想使用弹性布局 display:flex 的话，只需要把类名换成其他的名字即可。...
2021-10-12 00:22:58
2063
2
原创 JavaScript获取浏览器可视区域的宽高
JavaScript获取浏览器可视区域的宽高在做项目的时候，我们常常需要对项目做一些优化，来提升页面响应的速度，比如进入可视区域后再发送请求获取数据或者是填充模板，这个时候就需要能够获取到浏览器的可视区域的宽高：// 获取浏览器可视区域宽高（兼容性比较好，不包括工具栏和滚动条）var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var bro
2021-10-10 21:11:31
3401
原创 用cnpm安装的依赖没有在package.json中找到的解决办法
用cnpm安装的依赖没有在package.json中找到的解决办法起因今天在写项目的时候使用cnpm安装的依赖，等到提示安装完成后，想去package.json文件中去看看安装的依赖，结果没有找到，但是在node_modules文件夹中确实是安装成功了，这就让人很摸不着头脑。解决方法只需要在命令的最后加上一个 -S（大写的S） ，这样安装完成的依赖就能在package.json中看到了。cnpm install xxx（依赖的名称） -S...
2021-09-12 09:54:28
1647
1
原创 Vue学习之---动态组件中的activated与deactivated钩子函数
Vue学习之—被忽视的activated与deactivated钩子函数在学习这两个钩子函数之前呢，怎么需要先了解下Vue内置的动态组件< component >以及与之相配套的< keep-alive > 组件：动态组件指的是动态切换组件的显示与隐藏；< component is = " " > 标签，内置组件，占位符，专门用来实现动态组件的渲染；is 属性指定要渲染出来的组件的名字，指定的值是组件的注册名称；is 属性指定的组件名称是什么，就会在<
2021-09-09 21:29:54
4543
原创 Vue学习之---computed计算属性中你不曾注意到的小细节
Vue学习之—computed计算属性1.当写computed属性的时候要注意所有的计算属性，都要定义在computed 属性中；计算属性在定义的时候，要定义成方法的形式，而且定义成方法的形式后，方法中一定要有返回值，因为使用计算属性最终要得到的就是返回的值；计算属性最终会变成当前的Vue实例对象的属性；2.computed属性的两种形式2.1函数形式的计算属性var vm = new Vue({ data: { a: 1 }, computed: { //
2021-09-08 22:21:48
301
原创 Vue学习之---watch侦听器
Vue学习之—watch侦听器Vue中的watch属性是什么，作用呢？watch属性中存在着能侦听Vue数据的侦听器，而侦听器本质上是个函数，要侦听哪一个数据的变化，就把数据名当做方法名即可；侦听器函数会接收两个参数：第一个参数是数据改变后的新的值，第二个参数是数据改变前的旧的值；watch属性中侦听器的格式watch属性中的侦听器存在着两种格式：方法形式的侦听器export default { data(){ // 定义的一些变量 }, watch:{ // 将要侦听的
2021-09-08 00:30:55
163
原创 Vue指令中v-show 与 v-if 区别
Vue指令中v-show 与 v-if 区别v-showv-show 只是在 display: none 和 display: block 之间切换。无论初始条件是什么都会被渲染出来，后面只需要切换 CSS 或是切换下判断条件，DOM 还是会一直保留着的。v-ifv-if的话就得说到 Vue 底层的编译了。当 v-if 的判断条件为 false 时，组件或DOM元素就不会被渲染，也就是说根本不会创建这个组件或DOM元素；直到条件为 true时，才会创建出来；当判断条件发生切换时会触发销毁/挂载
2021-09-05 23:58:52
98
原创 npm安装时报错：源文本中存在无法识别的标记的解决方法
npm安装时报错：源文本中存在无法识别的标记的解决方法今天在使用npm安装依赖包的时候，npm报了一个错误：当时找了半天也没看出来哪里有错误，于是上网查阅资料，才明白可能是安装的node版本的原因，所以导致npm不识别 @ 符号。解决方法：只需要使用引号将要安装的依赖包名包起来就解决了：...
2021-09-01 20:50:57
2776
1
原创 常见的Http状态码及其含义
HTTP状态码及其含义在写前端的一些功能的时候，大家难免要向后端发送请求，来拿到一些数据，这个时候后端就会返回给咱们一个响应状态码，了解这些状态码可以帮助咱们更好的读懂服务器返回的数据状态，下面是我翻阅资料查询到的一些常见的信息状态码供大家参考：1XX：信息状态码100 Continue 继续一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息2XX：成功状态码200 OK正常返回信息201 Created请求成功并且服务器创建了新
2021-08-31 20:27:50
317
原创 VueRouter中的路由守卫的触发顺序（图解）
最近在学习VueRouter的时候，发现自己总是搞不清楚路由守卫触发的顺序，于是便找到了这个图，希望能够帮助到大家：
2021-08-30 23:11:12
568
原创 Element-ui中的分页(pagination)组件的current-page属性不同步更新视图的坑
Element-ui中的分页(pagination)组件的current-page属性不同步更新视图的坑
2021-08-28 15:46:51
8407
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人