白雾茫茫丶_社区达人页

2024年12月

• 12.11 09:47:30
  发表了文章 2024-12-11 09:47:30

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

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

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

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

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

  本文介绍了作者在Next.js v15.x版本发布后，对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择（最终选择了Ant-Design）、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果，并提供了GitHub仓库链接供读者参考学习。

  

2024年11月

• 11.26 15:47:46
  发表了文章 2024-11-26 15:47:46

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

  Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目，配合 Nest.js 构建的后端，提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能，适合全栈开发者学习参考。线上预览地址：https://vue2.baiwumm.com/，用户名：Admin，密码：abc123456。

2024年10月

• 10.18 18:09:43
  发表了文章 2024-10-18 18:09:43

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

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

  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地址，并提供了相关的代码示例。最后，文章提到了使用这个解决方案后的实际效果，例如在操作日志中记录真实IP地址。

2024年09月

• 09.11 09:57:26
  发表了文章 2024-09-11 09:57:26

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

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

  
• 09.09 16:12:08
  发表了文章 2024-09-09 16:12:08

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

  这篇文章介绍了在Nest.js构建应用时，如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展，并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开，这是一个基于eventemitter2库的社区模块，提供了事件发布/订阅功能，使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块，包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。最后总结，集成@nestjs/event-emitter模块可以提升应用程序的事件驱动能力，构建出更为松耦合、易扩展且高度灵活的系统架构，是构建现代、响应迅速且具有高度解耦特性的Nest.
• 09.02 11:00:33
  发表了文章 2024-09-02 11:00:33

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

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

2024年08月

• 08.30 17:35:23
  发表了文章 2024-08-30 17:35:23

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

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

  
• 08.13 16:11:57
  发表了文章 2024-08-13 16:11:57

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

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

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

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

  
• 08.06 09:30:30
  发表了文章 2024-08-06 09:30:30

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

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

  
• 08.01 14:33:13
  发表了文章 2024-08-01 14:33:13

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

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

2024年07月

• 07.30 18:07:34
  发表了文章 2024-07-30 18:07:34

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

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

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

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

  
• 07.18 13:40:57
  发表了文章 2024-07-18 13:40:57

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

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

  
• 07.16 10:24:25
  发表了文章 2024-07-16 10:24:25

  Nest.js 实战 (二)：如何使用 Prisma 和连接 PostgreSQL 数据库

  这篇文章介绍了什么是Prisma以及如何在Node.js和TypeScript后端应用中使用它。Prisma是一个开源的下一代ORM，包含PrismaClient、PrismaMigrate、PrismaStudio等部分。文章详细叙述了安装PrismaCLI和依赖包、初始化Prisma、连接数据库、定义Prisma模型、创建Prisma模块的过程，并对比了Prisma和Sequelize在Nest.js中的使用体验，认为Prisma更加便捷高效，没有繁琐的配置。

  
• 07.15 14:40:51
  发表了文章 2024-07-15 14:40:51

  Nest.js 实战 (一)：使用过滤器优雅地统一处理响应体

  这篇文章介绍了在Nest.js中如何处理接口统一返回格式的方法。首先定义了响应状态码枚举和类型，然后创建了HttpException异常过滤器来捕获HttpException类的异常并设置自定义响应逻辑。最后通过全局配置和效果预览展示了如何应用这些设置。

  
• 07.03 16:34:20
  发表了文章 2024-07-03 16:34:20

  Next.js 实战 (一)：项目搭建指南

  这篇文章介绍了作者在2024年下半年计划使用Next.js从零开始搭建一个后台模板，以探索Next.js的奥秘。文章包含了项目搭建、目录结构、APP路由约定、配置Eslint、Prettierrc、Husky等项目提交规范、使用release-it自动管理版本号和生成CHANGELOG、import排序规则、安装NextUI等内容。作者还提到会在开发过程中记录遇到的问题和解决方法，并计划在后期使用Prisma+Supabase数据库存储数据，最终完成一个基于Next.js的全栈项目。

  

2024年06月

• 06.26 16:41:52
  发表了文章 2024-06-26 16:41:52

  Nuxt3 实战 (十二)：SEO 搜索引擎优化指南

  这篇文章介绍了如何为Nuxt.js项目添加favicon图标和TDK（标题、描述、关键词），安装@nuxtjs/seo模块，以及如何设置Robots、Sitemap、OG Image、Schema.org、Experiments等。文章还提到了添加Google Analytics、Microsoft Clarity和Umami统计代码的方法。文章最后总结称，Nuxt.js 3集成了很多SEOModules，使开发者能够更加高效便捷地做好搜索引擎方面的优化。

  
• 06.20 16:34:17
  发表了文章 2024-06-20 16:34:17

  Nuxt3 实战 (十一)：添加路由 Transition 过渡效果和 Loading 动画

  这篇文章介绍了Nuxt3框架中页面和布局的过渡效果设置方法，以及首屏加载动画的添加。通过配置nuxt.config.ts文件和添加CSS样式，可以实现页面过渡效果。同时，文章也提到了在页面中设置不同的过渡效果和为布局和页面同时设置过渡效果的方法。最后，文章以一个Github仓库链接和一个线上预览地址作为总结，表示遵循官方文档操作即可完成相关设置。

  
• 06.19 14:42:27
  发表了文章 2024-06-19 14:42:27

  Nuxt3 实战 (十)：使用 Supabase 实现 RESTful 风格 API 接口

  这篇文章介绍了如何使用Supabase实现RESTful风格的API接口，用于网站分类和子站点的增删改查（CURD）功能。文章首先阐述了表设计，包括ds_categorys和ds_websites两张表的列名、类型和用途，并提到了为每张表添加的user_id和email字段以支持用户身份识别。接着，文章描述了接口设计，以ds_websites表为例，说明了如何通过RESTful API实现CURD功能，并给出了使用SupabaseClient实现插入数据的相关代码。文章最后提供了项目效果预览和总结，指出学习了Nuxt3创建接口及调用Supabase数据库操作。

  
• 06.13 11:31:37
  发表了文章 2024-06-13 11:31:37

  Nuxt3 实战 (九)：使用 Supabase 实现 Github 认证鉴权

  这篇文章介绍了如何在Supabase中使用Github授权登录并实现用户身份验证。文章首先说明了Supabase采用postgresql的Row Level Security（RLS）机制来控制不同用户对数据表访问权限的重要性，然后详细介绍了配置Github OAuth Apps的过程，包括创建新的OAuth应用、填写项目信息、设置回调URL等步骤。接着，文章展示了在Nuxt3中实现登录界面的代码示例，最后总结了通过本教程可以学习到的技能，并预告了下一篇文章将介绍如何在Nuxt3中创建RESTful风格API并结合Supabase数据库完成CURD操作。

  
• 06.11 14:17:39
  发表了文章 2024-06-11 14:17:39

  Nuxt3 实战 (八)：优雅的实现暗黑主题模式

  这篇文章介绍了在Nuxt3中实现暗黑模式的过程。首先推荐使用color-mode库来轻易实现暗黑模式切换，并通过pnpm命令安装@nuxtjs/color-mode依赖。然后在nuxt.config.ts配置文件中注入依赖，并根据项目实际情况自定义配置。接着通过toggleDark函数实现切换动画，并在需要的地方加载组件<ColorMode/>，从而达到最终效果。

  
• 06.04 14:24:29
  发表了文章 2024-06-04 14:24:29

  TS 小技巧: 使用元组生成联合类型

  这篇文章介绍了使用TypeScript开发时，如何根据一个数组的值得到一个联合类型。作者介绍了一个开发小技巧：使用元组生成联合类型。文章中给出了具体的开发场景和示例代码，以及实现的步骤。通过将数组转成元组类型，然后将元组类型转成联合类型，可以实现类型检查。

  
• 06.03 16:26:26
  发表了文章 2024-06-03 16:26:26

  HTML - 资源提示符

  这篇文章介绍了HTML中的一些优化技术，包括async、defer、preload、prefetch和moudle等标签的使用方法和作用。其中，async和defer标签可以异步加载脚本资源，不会阻止DOM解析，但执行时机不同；preload标签可以预加载指定资源，但不会立即执行；prefetch标签告诉浏览器，未来可能会用到某个资源，浏览器会在空闲时下载；moudle标签可以用于兼容不同浏览器。

2024年05月

• 05.29 13:55:54
  发表了文章 2024-05-29 13:55:54

  箭头函数的意义和函数的二义性

  这篇文章介绍了箭头函数的特点以及与普通函数的区别。它指出了箭头函数没有this、arguments对象和prototype原型的特点，因此不能作为构造函数使用。文章还解释了函数的二义性问题，即函数可以有多种调用方式，这在JS设计上存在缺陷。最后，文章指出箭头函数不再依赖面向对象的概念，因此没有this和原型的概念。
• 05.28 17:53:15
  发表了文章 2024-05-28 17:53:15

  对象解构与迭代器的猫腻？

  这篇文章介绍了变量的解构赋值技巧在前端开发中的常用性，包括对象解构和数组解构。文章中给出了一些代码示例，解释了可迭代对象的概念以及如何使用迭代协议来实现数组解构。此外，文章还介绍了生成器的概念并提供了代码示例。作者建议对这些概念不熟悉的读者可以查阅ES6的文档来更好地理解。

  
• 05.24 17:08:49
  发表了文章 2024-05-24 17:08:49

  Nuxt3 实战 (七)：配置 Supabase 数据库

  这篇文章介绍了如何为Nuxt项目集成Supabase数据库。文章首先阐述了选择Supabase作为Nuxt项目的数据库的理由，包括其良好的网络评价、与Nuxt的良好集成以及对用户认证和身份鉴权的支持。接着，文章详细介绍了Supabase的特点，如使用PostgreSQL作为数据库、提供完整的认证系统、支持实时数据同步和提供对象存储服务等。然后，文章指导读者如何在Nuxt项目中安装和配置Supabase，包括设置重定向策略和获取数据库访问密钥。最后，文章强调了在开发环境和生产环境中使用不同密钥的重要性。

  
• 05.23 16:02:41
  发表了文章 2024-05-23 16:02:41

  JavaScript 中的二进制散列值和权限设计

  这篇文章介绍了JavaScript中使用位运算符进行权限控制的方法。文章首先介绍了JavaScript中的进制类型，包括十进制、二进制、十六进制和八进制。然后解释了位运算符的概念和常用的按位与、按位或、按位异或和按位非操作符。接下来讨论了位运算符在传统权限系统中的应用场景，并给出了一个基于二进制变量表示权限的示例。最后，文章提到了位运算符方案的局限性，例如每个权限码必须是唯一且只有一位为1的限制。但总的来说，在中小型业务中可以使用这种方式进行权限控制。
• 05.22 17:10:05
  发表了文章 2024-05-22 17:10:05

  使用 object-fit 属性完美过渡图片

  这篇文章介绍了CSS属性object-fit的用法。object-fit属性用于指定元素的内容如何适应指定容器的高度和宽度。该属性一般适用于img和video标签，可以进行剪切、缩放或拉伸操作。文章中展示了通过object-fit属性来统一设置多张图片的样式，保持原始比例并改变显示位置的示例，以及使用object-position属性实现简单的过渡效果。

  
• 05.22 16:55:12
  发表了文章 2024-05-22 16:55:12

  mix-blend-mode 利用混合模式让文字智能适配背景颜色

  这篇文章介绍了一种CSS3属性：mix-blend-mode，它可以实现文字智能适配背景颜色和文字镂空效果。通过设置mix-blend-mode为difference，可以在黑色背景中显示白色文字，在白色背景中显示黑色文字。同时，文章还提到了mix-blend-mode的其他属性，如multiply、screen等等，感兴趣的读者可以进一步研究。

  
• 05.22 15:37:10
  发表了文章 2024-05-22 15:37:10

  TS 中的类型验算,高级通用 API 实现

  这篇文章介绍了一些常用的类型通用API封装，包括TS内置类型和关键字的使用，以及TS compiler内部实现的类型。文章截取了一些常用的类型定义和API示例，如Partial、Required、Readonly、NonNullable、Parameters等。还介绍了一些常用的TS关键字，如extends、infer、keyof、typeof、in等。此外，文章还提供了一些实现示例，如Optional API、GetOptional API和UnionToIntersection API。该文章会不断更新。
• 05.22 14:51:11
  发表了文章 2024-05-22 14:51:11

  Nuxt3 实战 (六)：Footer 底部布局

  这篇文章介绍了开发项目的Footer布局，参考了Nuxt-UI官网的布局。文章从需求拆分开始，讲解了准备工作和组件开发的过程。最后展示了最终效果，并进行了简单的总结，指出下一篇将讨论主体内容的开发。文末提供了Github仓库和线上预览的链接。

  
• 05.22 14:40:21
  发表了文章 2024-05-22 14:40:21

  Nuxt3 实战 (五)：Header 头部布局

  这篇文章介绍了作者忙于公司系统迭代需求，但抽空完成了布局的Header部分。文章提到了需求的拆分，布局的组件拆分，并介绍了Nuxt框架以及安装和启用插件的步骤。还提到了白天暗黑模式切换组件和SVG跟随模式的组件的创建。最后，文章提到了PC端和移动端的最终实现效果，并给出了Github仓库和在线预览链接。

  
• 05.22 14:29:27
  发表了文章 2024-05-22 14:29:27

  Nuxt3 实战 (四)：安装 Nuxt UI 和配置 Typescript 类型检查

  这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus，但最终选择了NuxtUI，因为它更适合年轻化的项目，并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令，同时会自动安装一些相关模块。然后，可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外，还介绍了如何添加图标库和配置TypeScript。

  
• 05.22 14:19:47
  发表了文章 2024-05-22 14:19:47

  Nuxt3 实战 (三)：使用 release-it 自动管理版本号和生成 CHANGELOG

  这篇文章介绍了如何使用release-it工具实现以下功能：增加版本号并提交Git、生成变更日志（Changelog）并提交到Git、创建Git标签并推送到远程仓库、发布到npm等软件仓库、在GitHub、GitLab等平台创建发行版。文章还提到了前置知识，介绍了SemVer规范的内容和安装依赖的步骤。在文章的最后，展示了使用release-it生成的效果预览、git打的标签Tag以及待办事项（Todo）。最后还提到了安装NuxtUI。

  
• 05.22 13:47:28
  发表了文章 2024-05-22 13:47:28

  Nuxt3 实战 (二)：配置 Eslint、Prettierrc、Husky等项目提交规范

  这篇文章介绍了项目规范的重要性和如何配置一些工具来提高代码质量、团队协作、降低维护成本、提升软件可靠性和促进项目管理。工具介绍了Eslint和Prettier，并且提供了安装和配置的步骤。文章还提到了如何配置Husky和Commitlint来检查提交风格的规范性，并最后提到了需要使用 release-it 自动管理版本号和生成 CHANGELOG 的任务。

  
• 05.22 11:12:17
  发表了文章 2024-05-22 11:12:17

  Nuxt3 实战 (一)：初始化项目

  这篇文章介绍了Nuxt框架的基本信息，包括什么是Nuxt以及Nuxt3的优点。文章还介绍了Nuxt3的一些特点，如服务端渲染和静态站点生成、模块化、文件系统路由等。此外，文章还提供了项目安装的步骤和目录结构。最后，文章提到了下一步计划，即配置 Eslint、Prettier、Husky、lint-staged、commitlit项目提交规范的过程。

  
• 05.21 10:14:08
  发表了文章 2024-05-21 10:14:08

  我是如何使用 Next.js14 + Tailwindcss 重构个人项目的

  这篇文章介绍了作者在学习React和Nest时受到大佬imsyy项目DailyHot的启发，基于React开发了一个项目，并因为这个项目获得了少量流量而进行了优化。作者随后因为想要优化SEO和深入学习Next.js14，决定重构这个项目。文章详细介绍了项目的信息、特性、演示图、运行环境、Vercel本地部署步骤以及责任声明。作者还感谢了为本项目提供支持与灵感的项目，并承诺会记录下开发过程中遇到的问题及解决方法以帮助他人。