白雾茫茫丶-优快云博客

原创 Vibecoding 一个主题切换动画库：13 种揭幕方式

记录一个跨框架主题切换动画库的设计与实现：基于 View Transitions API 与纯 mask 动画，如何推导蒙版几何、让 13 种动画类型共用一套代码、把「圆形收起」重写成静止蒙版盒子，以及怎样在不抢状态管理的前提下接入 next-themes 与 @nuxtjs/color-mode。

2026-09-16 16:17:40 154

原创探索 Nuxt.js 全栈能力：用 Better-Auth 打造类型安全的 RBAC 权限系统

这篇文章介绍了使用 Nuxt.js 和 Better-Auth 构建一个类型安全的 RBAC 权限系统的全栈后台管理系统，涵盖登录注册、动态菜单、权限控制、主题配置、国际化等功能，结合现代技术栈实现高性能和安全可靠的认证体系。

2026-07-02 15:49:55 216

原创动态配色方案：在 Next.js 中实现 Shadcn UI 主题色切换

这篇文章介绍了如何在Next.js应用中实现动态主题色切换系统，以满足用户多样化的审美需求。文章首先提出了使用CSS自定义属性（CSS Variables）结合Shadcn UI设计系统架构来构建支持多套预设配色方案的主题切换方案。接着，推荐了TweakCN作为强大的主题编辑与生成工具，并详细说明了从选择配色方案到生成和导入CSS变量的步骤。此外，还通过zustand状态管理库保存和切换主题色状态，并提供了具体的代码示例，包括创建主题配色枚举、初始化主题色函数及创建主题切换按钮等。

2025-12-29 10:11:44 1388

原创不只是作品集：用 Next.js 打造我的数字作品库

这篇文章介绍了作者使用Next.js和Shadcn UI构建的一个个人作品信息展示模板。该模板设计简洁且结构清晰，适合直接使用或作为学习参考。作者在原有基础上进行了个性化调整，增加了交互细节和动画效果。文章还强调了开发者拥有一个统一技术身份的重要性，并详细列出了项目的技术栈、特性和环境变量配置，最后提供了在线预览链接和GitHub地址。

2025-12-23 10:05:11 651

原创 uni-halo + 微信小程序开发实录：我的第一个作品诞生记

这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程，包括选择该框架的原因、开发目标以及项目配置和部署的步骤。

2025-08-12 15:11:04 1003

原创 Certimate + Let’s Encrypt：零干预的 HTTPS 永续方案

这篇文章介绍了HTTPS在互联网中的重要性以及手动续签SSL证书的痛点，如频繁操作、易出错和安全风险。随后讨论了自动化续签工具如Certbot、Certimate和acme.sh的功能对比，强调了自动化管理的优势，并重点介绍了Certimate如何解决这些问题。

2025-08-12 09:19:02 1290

原创约定式路由生成神器：vite-plugin-pages

这篇文章介绍了如何使用vite-plugin-pages插件在Vite项目中实现约定式路由自动生成，包括搭建工程、安装插件、配置vite.config.ts文件以及创建和挂载路由。

2025-08-11 16:38:04 481

原创在 vite 工程化中手动分包

这篇文章介绍了在Vite工程化中如何手动分包以优化打包输出的过程。文章首先创建了一个Vue3工程，通过修改代码前后打包对比，指出每次打包都会导致包含第三方库的文件重新下载。接着，文章说明了如何将第三方依赖库和业务代码分别打包，通过配置`vite.config.ts`文件来实现手动分包，最终达到优化缓存效果，减少不必要的下载。

2025-08-11 15:55:47 878

原创浏览器进程模型及事件循环机制

这篇文章介绍了浏览器进程模型及事件循环机制，包括进程和线程的基本概念，浏览器如何作为多进程多线程应用程序运行，以及渲染主线程如何通过消息队列来调度和执行各种任务，保证浏览器的稳定运行和任务的有序进行。

2025-08-11 09:13:52 970

原创如何动态执行 JS 脚本

这篇文章介绍了在业务开发中动态执行JS脚本的几种方法，包括使用eval()函数、setTimeout、动态创建script标签以及使用Function构造函数。这些方法各有特点，如eval()同步执行且作用域为当前执行作用域，动态script标签同步执行且作用域为全局作用域等，具体实现方案需根据业务场景选择。

2025-08-08 17:31:04 441

原创让 GitHub 个人主页更专业：用 WakaTime 实现动态代码统计

这篇文章介绍了如何使用 WakaTime 为 GitHub 个人主页添加动态代码统计，展示编码活跃度，提升专业性。通过注册账号、安装 IDE 插件、配置 GitHub 仓库和使用工作流自动更新 README 文件，实现对多种编程语言的详细统计。

2025-08-07 17:47:41 507

原创 Nuxt4.0初体验：一个简约、精美、现代化的个人站点导航！

这篇文章介绍了作者使用Nuxt 4.0重构个性化站点导航网站的经历，阐述了Nuxt 4.0的新特性和优势，如更清晰的项目结构、更好的TypeScript体验、更快的CLI和开发速度等，并且分享了重构过程中的体验和项目完成效果。同时，作者还对比了Nuxt.js与Next.js两个框架的优劣，表达了自己对Nuxt.js的偏好。

2025-08-06 14:41:13 934 2

原创 Cover Magic：专业的封面设计工具，支持实时预览和高质量导出

这篇文章介绍了技术博主在制作高质量技术文章封面时面临的困境，现有工具的不足，以及作者开发的Cover Magic工具如何解决这些问题，提供实时可视化编辑和专业级封面的功能。

2025-08-06 10:05:17 339

原创 Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用

这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求，比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码，以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块，能够简化HTTP请求的预处理和后处理，提高代码的可维护性，有助于创建快速、安全和用户友好的Web体验。

2025-01-21 14:38:34 2264

原创 Next.js 实战 (九)：使用 next-auth 完成第三方身份登录验证

这篇文章介绍了next-auth，一个为Next.js设计的身份验证库，支持多种认证方式，如电子邮件和密码、OAuth2.0提供商（如Google、GitHub、Facebook等）以及自定义提供商。文章包含了如何配置Github Provider以及会话管理，并提到了适配器Adapters在next-auth中的作用。最后，文章强调了next-auth的强大功能值得进一步探索。

2025-01-17 15:54:37 2105

原创 Next.js 实战 (八)：使用 Lodash 打包构建产生的“坑”？

这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中，作者遇到了打包构建时的一系列报错，报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整，作者最终删除了lodash-es库，并将radash的部分源码复制到本地，解决了打包报错的问题。文章最后提供了项目的线上预览地址，并欢迎读者留言讨论更好的解决方案。

2025-01-16 09:08:25 540

原创 Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式

这篇文章介绍了在Next.js框架下，如何处理中后台管理系统中特殊页面（如登录页）不包裹根布局（RootLayout）的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构，这虽然保持了代码的整洁和可维护性，但对于特殊页面来说，却造成了不必要的布局包裹。文章提出了一个解决方案，即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout，从而实现特殊页面不包裹根布局的目标。

2025-01-07 19:19:55 845

原创 Next.js 实战 (六)：如何实现文件本地上传

这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码，因此开发者需要自行实现，通常有两种思路：使用Node.js原生上传或使用第三方插件如multer。接着，文章选择了使用Node.js原生上传的方式来讲解实现过程，包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后，文章展示了具体的实现步骤，包括编写代码来处理文件上传，并给出了代码示例。

2025-01-02 14:44:32 711

原创 Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画

这篇文章介绍了Framer Motion，一个为React设计的动画库，提供了声明式API处理动画和页面转换，适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题，并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后，文章总结了这些效果，并邀请读者探讨更好的实现方案。

2024-12-31 10:02:22 914

原创 Next.js 实战 (四)：i18n 国际化的最优方案实践

这篇文章介绍了Next.js国际化方案，作者对比了网上常见的方案并提出了自己的需求：不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化，并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由，并把当前语言的key存储到浏览器cookie中，使得刷新浏览器后语言不会失效。最后，文章总结了这种国际化方案的优势，并提供Github仓库链接供读者参考。

2024-12-11 09:21:32 908

原创 Next.js 实战 (三)：优雅的实现暗黑主题模式

这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先，需要安装next-themes库。然后，在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件，并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画，可以修改代码实现主题切换时的动画效果。最后，需要在需要的位置引入ThemeModeButton组件，实现暗黑模式的切换。

2024-12-10 15:19:52 615

原创 Next.js 实战 (二)：搭建 Layouts 基础排版布局

这篇文章介绍了作者在使用Next.js v15.x版本重构Github上的旧项目时的经历。作者首先表明了对NextUI组件库的偏好，但因其缺少Form表单组件而在项目中放弃使用。随后，作者提到熟悉但偏业务风格的Ant-Design组件库与Next.js的兼容性问题。文章详细描述了项目的布局结构和UI组件的使用，并展示了侧边栏和主题配置的最终效果。最后，作者鼓励读者关注其Github仓库，并表示自己刚起步，希望与读者一同进步。

2024-12-05 16:22:55 1136

原创基于 Vue2.0 + Nest.js 全栈开发的后台应用

Vue2 Admin是一个前端基于二次开发，后端基于Nest.js的全栈后台应用，适合学习全栈开发的同学参考学习。🍁 前端技术栈：Vue2Vuex🍁 后端技术栈：Nest.jsPostgreSQLPrisma🍂 线上预览： https://vue2.baiwumm.com/Adminabc123456🪹 github 仓库地址🪺 码云仓库地址🍀 Swagger 接口文档本项目没有经过严格的测试，有可能存在一定的Bug。本项目仅供学习交流使用，请勿用于商业用途。欢迎提交Issues和PR。

2024-11-26 14:44:39 1149

原创 Nest.js 实战 (十五)：前后端分离项目部署的最佳实践

这篇文章介绍了如何使用现代前端框架Vue3和后端Node.js框架Nest.js实现的前后端分离架构的应用，并将其部署到生产环境。文章涵盖了准备阶段，包括云服务器的设置、1Panel面板的安装、数据库的安装、域名的实名认证和备案、SSL证书的申请。在部署Node服务环节，包括了Node.js环境的创建、数据库的配置、用户名和密码的设置、网站信息的填写、静态网站的部署、反向代理的配置以及可能遇到的常见问题。最后，作者总结了部署经验，并希望对读者有所帮助。

2024-10-18 18:21:04 1892

原创 Nest.js 实战 (十四)：如何获取客户端真实 IP

这篇文章介绍了在Nest.js应用中获取客户端真实IP地址的问题及解决方法。问题出现在使用本地代理时，请求的IP地址总是返回::1或::ffff:127.0.0.1。为解决这个问题，需要确保代理服务器正确设置转发头如X-Forwarded-For或X-Real-IP，后端服务能够读取这些头信息来确定客户端的IP地址。文章以作者自己的OpenResty应用为例，展示了如何通过配置反向代理和设置X-Forwarded-For头来获取真实IP地址，并提供了相关的代码示例。

2024-10-14 15:48:57 1098

原创前端的全栈之路：基于 Vue3 + Nest.js 全栈开发的后台应用

这篇文章介绍了一个名为Vue3Admin的全栈后台应用，前端基于SoybeanAdmin二次开发，后端基于Nest.js。主要使用了Vue3.5、AntDesignVue、UnoCSS、Pinia等前端技术栈，以及Nest.js、PostgreSQL、Prisma等后端技术栈。文章详细描述了系统的功能设计，包括动态国际化语言配置、登录用户操作日志、用户和角色权限映射、动态路由菜单、消息公告发布及前端业务功能等。同时，也提供了项目运行所需的环境和依赖，以及如何拉取代码、安装依赖和启动项目的方法。

2024-10-10 11:02:45 1848

原创 Nest.js 实战 (十三)：实现 SSE 服务端主动向客户端推送消息

这篇文章介绍了在Nest.js应用中使用Server-Sent Events (SSE)的技术。文章首先讨论了在特定业务场景下，为何选择SSE而不是WebSocket作为实时通信系统的实现方式。接着解释了SSE的概念，并展示了如何在Nest.js中实现SSE。文章包含客户端实现的代码示例，并以一个效果演示结束，总结SSE在Nest.js中的应用。

2024-09-11 09:28:44 1644

原创 Nest.js 实战 (十二)：优雅地使用事件发布/订阅模块 Event Emitter

这篇文章介绍了在Nest.js构建应用时，如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展，并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开，这是一个基于eventemitter2库的社区模块，提供了事件发布/订阅功能，使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块，包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。

2024-09-09 15:51:13 644

原创 Nest.js 实战 (十一)：配置热重载 HMR 给服务提提速

这篇文章介绍了Nest.js服务在应用程序引导过程中，TypeScript编译对效率的影响，以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程，指导读者如何在项目中安装依赖包，并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后，文章总结了如何通过自定义webpack配置来更好地控制HMR行为。

2024-09-02 10:42:30 1007

原创 Nest.js 实战 (十)：使用 winston 打印和收集日志记录

这篇文章介绍了在Nest服务中如何使用Winston记录日志。文章首先强调了日志记录在后台服务中的重要性，接着提到Nest默认的内部日志记录器，并指出可以通过@nestjs/common包中的Logger类来全面控制日志系统的行为。文章还提到，为了在生产环境中实现更高级的日志功能，可以使用如Winston之类的Node.js日志包。接下来，文章介绍了如何在Nest服务中使用Winston记录日志，包括安装相关依赖、创建winston配置文件以及实现简单的日志记录示例。

2024-08-30 17:06:55 2440

原创 Nest.js 实战 (九)：使用拦截器记录用户 CURD 操作日志

这篇文章介绍了在Nest.js中如何实现记录用户CURD操作的需求。首先解释了什么是拦截器以及拦截器的作用，然后通过创建Prisma模型，添加Log模型，并通过编写LoggerInterceptor拦截器，实现了记录用户操作的功能。最后通过效果演示和总结，强调了使用拦截器实现此功能的有效性。

2024-08-13 15:55:25 627

原创 Nest.js 实战 (八)：基于 JWT 的路由身份认证鉴权

这篇文章介绍了身份验证的重要性和多种处理策略，重点放在了JWT（JSON Web Token）认证在Nest.js框架中的应用。文章包含了JWT认证的流程，如何在Nest.js中实现，以及如何创建JWT认证策略。包括了安装依赖，创建处理认证流程的文件，以及如何使用HttpException过滤器来处理未登录访问。

2024-08-07 16:10:06 639

原创 Nest.js 实战 (七)：如何生成 SVG 图形验证码

这篇文章介绍了使用NestJS实现Session验证的图形验证码功能的具体步骤。首先，通过powershell代码安装依赖pnpmaddsvg-captcha。然后，在控制器中使用TypeScript代码引入相关依赖，创建一个图形验证码的接口，当请求该接口时，返回一张随机图片验证码。最后，进行了效果演示。

2024-08-06 09:16:29 603

原创 Nest.js 实战 (六)：使用 Session 在不同请求间存储信息

这篇文章介绍了在Nest.js中如何使用Session来记录客户状态。文章首先解释了Session的概念，然后详细说明了如何在Nest.js中安装和使用express-session，包括全局配置、参数说明、使用方式和常用方法。

2024-08-01 14:02:58 525

原创 Nest.js 实战 (五)：如何实现文件本地上传

这篇文章介绍了使用Nest框架和multer中间件包实现文件上传功能的过程。首先，作者在开发用户管理模块时遇到了需要上传用户头像的需求，因此开发了文件上传功能。文章详细介绍了如何安装依赖，如何处理单个文件上传，如何在模块层注册并配置文件上传路径，并以代码形式展示了如何实现这些功能。最后，作者对使用第三方平台存储文件进行了说明，并建议业务量大的公司很少用上传到服务器本地的方式，该方式更适合个人站点、博客使用。

2024-07-30 16:52:10 1526

原创 Nest.js 实战 (四)：利用 Pipe 管道实现数据验证和转换

这篇文章介绍了Nest.js框架中管道的概念和使用。管道是一种强大的功能，用于在请求数据到达控制器方法之前对其进行预处理，如转换、验证、清理等。文章详细解释了数据转换、数据验证、错误处理和一致性等管道的主要用途，并通过代码示例演示了如何使用内置管道和自定义管道。最后，文章总结了管道在提升应用健壮性和安全性方面的作用，认为合理利用管道可以加速开发周期，提高软件质量。

2024-07-22 14:43:06 1425

原创 Nest.js 实战 (三)：使用 Swagger 优雅地生成 API 文档

这篇文章介绍了Swagger，它是一组开源工具，围绕OpenAPI规范帮助设计、构建、记录和使用RESTAPI。文章主要讨论了Swagger的主要工具，包括SwaggerEditor、SwaggerUI、SwaggerCodegen等。然后介绍了如何在Nest框架中集成Swagger，展示了安装依赖、定义DTO和控制器等步骤，以及如何使用Swagger装饰器。文章最后总结说，集成Swagger文档可以自动生成和维护API文档，规范API标准化和一致性，但会增加开发者工作量，需要保持注释和装饰器的准确性。

2024-07-18 11:05:06 2975 1

空空如也

空空如也