勋章
我关注的人
粉丝
技术能力
- JavaScript
- React
- Vue
- Nuxt.js
- Next.js
- Nest.js
-
-
Apsara Clouder云计算专项技能认证：云服务器ECS入门
获得于2023-02-01 15:11:23
-
记录学习、生活和有趣的事
-
发表了文章 2024-10-18
Nest.js 实战 (十五)：前后端分离项目部署的最佳实践
这篇文章介绍了如何使用现代前端框架Vue3和后端Node.js框架Nest.js实现的前后端分离架构的应用，并将其部署到生产环境。文章涵盖了准备阶段，包括云服务器的设置、1Panel面板的安装、数据库的安装、域名的实名认证和备案、SSL证书的申请。在部署Node服务环节，包括了Node.js环境的创建、数据库的配置、用户名和密码的设置、网站信息的填写、静态网站的部署、反向代理的配置以及可能遇到的常见问题。最后，作者总结了部署经验，并希望对读者有所帮助。
-
发表了文章 2024-10-14
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-08-30
Nest.js 实战 (十)：使用 winston 打印和收集日志记录
这篇文章介绍了在Nest服务中如何使用Winston记录日志。文章首先强调了日志记录在后台服务中的重要性，接着提到Nest默认的内部日志记录器，并指出可以通过@nestjs/common包中的Logger类来全面控制日志系统的行为。文章还提到，为了在生产环境中实现更高级的日志功能，可以使用如Winston之类的Node.js日志包。接下来，文章介绍了如何在Nest服务中使用Winston记录日志，包括安装相关依赖、创建winston配置文件以及实现简单的日志记录示例。最后，文章指出更高级的自定义日志功能需要读者自己去探索。
-
发表了文章 2024-08-07
Nest.js 实战 (八)：基于 JWT 的路由身份认证鉴权
这篇文章介绍了身份验证的重要性和多种处理策略，重点放在了JWT（JSON Web Token）认证在Nest.js框架中的应用。文章包含了JWT认证的流程，如何在Nest.js中实现，以及如何创建JWT认证策略。包括了安装依赖，创建处理认证流程的文件，以及如何使用HttpException过滤器来处理未登录访问。
-
发表了文章 2024-07-18
Nest.js 实战 (三)：使用 Swagger 优雅地生成 API 文档
这篇文章介绍了Swagger，它是一组开源工具，围绕OpenAPI规范帮助设计、构建、记录和使用RESTAPI。文章主要讨论了Swagger的主要工具，包括SwaggerEditor、SwaggerUI、SwaggerCodegen等。然后介绍了如何在Nest框架中集成Swagger，展示了安装依赖、定义DTO和控制器等步骤，以及如何使用Swagger装饰器。文章最后总结说，集成Swagger文档可以自动生成和维护API文档，规范API标准化和一致性，但会增加开发者工作量，需要保持注释和装饰器的准确性。
-
发表了文章 2024-07-16
Nest.js 实战 (二)：如何使用 Prisma 和连接 PostgreSQL 数据库
这篇文章介绍了什么是Prisma以及如何在Node.js和TypeScript后端应用中使用它。Prisma是一个开源的下一代ORM，包含PrismaClient、PrismaMigrate、PrismaStudio等部分。文章详细叙述了安装PrismaCLI和依赖包、初始化Prisma、连接数据库、定义Prisma模型、创建Prisma模块的过程，并对比了Prisma和Sequelize在Nest.js中的使用体验，认为Prisma更加便捷高效，没有繁琐的配置。
-
发表了文章 2024-07-15
Nest.js 实战 (一)：使用过滤器优雅地统一处理响应体
这篇文章介绍了在Nest.js中如何处理接口统一返回格式的方法。首先定义了响应状态码枚举和类型，然后创建了HttpException异常过滤器来捕获HttpException类的异常并设置自定义响应逻辑。最后通过全局配置和效果预览展示了如何应用这些设置。
-
发表了文章 2024-07-03
Next.js 实战 (一)：项目搭建指南
这篇文章介绍了作者在2024年下半年计划使用Next.js从零开始搭建一个后台模板，以探索Next.js的奥秘。文章包含了项目搭建、目录结构、APP路由约定、配置Eslint、Prettierrc、Husky等项目提交规范、使用release-it自动管理版本号和生成CHANGELOG、import排序规则、安装NextUI等内容。作者还提到会在开发过程中记录遇到的问题和解决方法，并计划在后期使用Prisma+Supabase数据库存储数据，最终完成一个基于Next.js的全栈项目。
-
发表了文章 2024-06-26
Nuxt3 实战 (十二)：SEO 搜索引擎优化指南
这篇文章介绍了如何为Nuxt.js项目添加favicon图标和TDK（标题、描述、关键词），安装@nuxtjs/seo模块，以及如何设置Robots、Sitemap、OG Image、Schema.org、Experiments等。文章还提到了添加Google Analytics、Microsoft Clarity和Umami统计代码的方法。文章最后总结称，Nuxt.js 3集成了很多SEOModules，使开发者能够更加高效便捷地做好搜索引擎方面的优化。
-
发表了文章 2024-06-20
Nuxt3 实战 (十一)：添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Nuxt3框架中页面和布局的过渡效果设置方法，以及首屏加载动画的添加。通过配置nuxt.config.ts文件和添加CSS样式，可以实现页面过渡效果。同时，文章也提到了在页面中设置不同的过渡效果和为布局和页面同时设置过渡效果的方法。最后，文章以一个Github仓库链接和一个线上预览地址作为总结，表示遵循官方文档操作即可完成相关设置。
-
发表了文章 2024-06-19
Nuxt3 实战 (十)：使用 Supabase 实现 RESTful 风格 API 接口
这篇文章介绍了如何使用Supabase实现RESTful风格的API接口，用于网站分类和子站点的增删改查（CURD）功能。文章首先阐述了表设计，包括ds_categorys和ds_websites两张表的列名、类型和用途，并提到了为每张表添加的user_id和email字段以支持用户身份识别。接着，文章描述了接口设计，以ds_websites表为例，说明了如何通过RESTful API实现CURD功能，并给出了使用SupabaseClient实现插入数据的相关代码。文章最后提供了项目效果预览和总结，指出学习了Nuxt3创建接口及调用Supabase数据库操作。
-
发表了文章 2024-06-13
Nuxt3 实战 (九)：使用 Supabase 实现 Github 认证鉴权
这篇文章介绍了如何在Supabase中使用Github授权登录并实现用户身份验证。文章首先说明了Supabase采用postgresql的Row Level Security（RLS）机制来控制不同用户对数据表访问权限的重要性，然后详细介绍了配置Github OAuth Apps的过程，包括创建新的OAuth应用、填写项目信息、设置回调URL等步骤。接着，文章展示了在Nuxt3中实现登录界面的代码示例，最后总结了通过本教程可以学习到的技能，并预告了下一篇文章将介绍如何在Nuxt3中创建RESTful风格API并结合Supabase数据库完成CURD操作。
-
发表了文章 2024-06-11
Nuxt3 实战 (八)：优雅的实现暗黑主题模式
这篇文章介绍了在Nuxt3中实现暗黑模式的过程。首先推荐使用color-mode库来轻易实现暗黑模式切换，并通过pnpm命令安装@nuxtjs/color-mode依赖。然后在nuxt.config.ts配置文件中注入依赖，并根据项目实际情况自定义配置。接着通过toggleDark函数实现切换动画，并在需要的地方加载组件<ColorMode/>，从而达到最终效果。
-
发表了文章 2024-05-24
Nuxt3 实战 (七)：配置 Supabase 数据库
这篇文章介绍了如何为Nuxt项目集成Supabase数据库。文章首先阐述了选择Supabase作为Nuxt项目的数据库的理由，包括其良好的网络评价、与Nuxt的良好集成以及对用户认证和身份鉴权的支持。接着，文章详细介绍了Supabase的特点，如使用PostgreSQL作为数据库、提供完整的认证系统、支持实时数据同步和提供对象存储服务等。然后，文章指导读者如何在Nuxt项目中安装和配置Supabase，包括设置重定向策略和获取数据库访问密钥。最后，文章强调了在开发环境和生产环境中使用不同密钥的重要性。
-
发表了文章 2024-05-22
mix-blend-mode 利用混合模式让文字智能适配背景颜色
这篇文章介绍了一种CSS3属性：mix-blend-mode，它可以实现文字智能适配背景颜色和文字镂空效果。通过设置mix-blend-mode为difference，可以在黑色背景中显示白色文字，在白色背景中显示黑色文字。同时，文章还提到了mix-blend-mode的其他属性，如multiply、screen等等，感兴趣的读者可以进一步研究。
-
发表了文章 2024-05-22
Nuxt3 实战 (五)：Header 头部布局
这篇文章介绍了作者忙于公司系统迭代需求，但抽空完成了布局的Header部分。文章提到了需求的拆分，布局的组件拆分，并介绍了Nuxt框架以及安装和启用插件的步骤。还提到了白天暗黑模式切换组件和SVG跟随模式的组件的创建。最后，文章提到了PC端和移动端的最终实现效果，并给出了Github仓库和在线预览链接。
-
发表了文章 2024-05-22
Nuxt3 实战 (四)：安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus，但最终选择了NuxtUI，因为它更适合年轻化的项目，并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令，同时会自动安装一些相关模块。然后，可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外，还介绍了如何添加图标库和配置TypeScript。
-
发表了文章 2024-05-22
Nuxt3 实战 (三)：使用 release-it 自动管理版本号和生成 CHANGELOG
这篇文章介绍了如何使用release-it工具实现以下功能：增加版本号并提交Git、生成变更日志（Changelog）并提交到Git、创建Git标签并推送到远程仓库、发布到npm等软件仓库、在GitHub、GitLab等平台创建发行版。文章还提到了前置知识，介绍了SemVer规范的内容和安装依赖的步骤。在文章的最后，展示了使用release-it生成的效果预览、git打的标签Tag以及待办事项（Todo）。最后还提到了安装NuxtUI。
-
发表了文章 2024-05-22
Nuxt3 实战 (二)：配置 Eslint、Prettierrc、Husky等项目提交规范
这篇文章介绍了项目规范的重要性和如何配置一些工具来提高代码质量、团队协作、降低维护成本、提升软件可靠性和促进项目管理。工具介绍了Eslint和Prettier，并且提供了安装和配置的步骤。文章还提到了如何配置Husky和Commitlint来检查提交风格的规范性，并最后提到了需要使用 release-it 自动管理版本号和生成 CHANGELOG 的任务。
-
发表了文章 2024-05-22
Nuxt3 实战 (一)：初始化项目
这篇文章介绍了Nuxt框架的基本信息，包括什么是Nuxt以及Nuxt3的优点。文章还介绍了Nuxt3的一些特点，如服务端渲染和静态站点生成、模块化、文件系统路由等。此外，文章还提供了项目安装的步骤和目录结构。最后，文章提到了下一步计划，即配置 Eslint、Prettier、Husky、lint-staged、commitlit项目提交规范的过程。
-
发表了文章
2024-12-11
Next.js 实战 (四)：i18n 国际化的最优方案实践
-
发表了文章
2024-12-10
Next.js 实战 (三)：优雅的实现暗黑主题模式
-
发表了文章
2024-12-05
Next.js 实战 (二)：搭建 Layouts 基础排版布局
-
发表了文章
2024-11-26
基于 Vue2.0 + Nest.js 全栈开发的后台应用
-
发表了文章
2024-10-18
Nest.js 实战 (十五)：前后端分离项目部署的最佳实践
-
发表了文章
2024-10-14
Nest.js 实战 (十四)：如何获取客户端真实 IP
-
发表了文章
2024-09-11
Nest.js 实战 (十三)：实现 SSE 服务端主动向客户端推送消息
-
发表了文章
2024-09-09
Nest.js 实战 (十二)：优雅地使用事件发布/订阅模块 Event Emitter
-
发表了文章
2024-09-02
Nest.js 实战 (十一)：配置热重载 HMR 给服务提提速
-
发表了文章
2024-08-30
Nest.js 实战 (十)：使用 winston 打印和收集日志记录
-
发表了文章
2024-08-13
Nest.js 实战 (九)：使用拦截器记录用户 CURD 操作日志
-
发表了文章
2024-08-07
Nest.js 实战 (八)：基于 JWT 的路由身份认证鉴权
-
发表了文章
2024-08-06
Nest.js 实战 (七)：如何生成 SVG 图形验证码
-
发表了文章
2024-08-01
Nest.js 实战 (六)：使用 Session 在不同请求间存储信息
-
发表了文章
2024-07-30
Nest.js 实战 (五)：如何实现文件本地上传
-
发表了文章
2024-07-22
Nest.js 实战 (四)：利用 Pipe 管道实现数据验证和转换
-
发表了文章
2024-07-18
Nest.js 实战 (三)：使用 Swagger 优雅地生成 API 文档
-
发表了文章
2024-07-16
Nest.js 实战 (二)：如何使用 Prisma 和连接 PostgreSQL 数据库
-
发表了文章
2024-07-15
Nest.js 实战 (一)：使用过滤器优雅地统一处理响应体
-
发表了文章
2024-07-03
Next.js 实战 (一)：项目搭建指南
