- 博客(65)
- 收藏
- 关注
RSS订阅原创 Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求，比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码，以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块，能够简化HTTP请求的预处理和后处理，提高代码的可维护性，有助于创建快速、安全和用户友好的Web体验。
2025-01-21 14:38:34
1866
原创 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
1314
原创 Next.js 实战 (八)：使用 Lodash 打包构建产生的“坑”？
这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中，作者遇到了打包构建时的一系列报错，报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整，作者最终删除了lodash-es库，并将radash的部分源码复制到本地，解决了打包报错的问题。文章最后提供了项目的线上预览地址，并欢迎读者留言讨论更好的解决方案。
2025-01-16 09:08:25
324
原创 Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下，如何处理中后台管理系统中特殊页面（如登录页）不包裹根布局（RootLayout）的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构，这虽然保持了代码的整洁和可维护性，但对于特殊页面来说，却造成了不必要的布局包裹。文章提出了一个解决方案，即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout，从而实现特殊页面不包裹根布局的目标。
2025-01-07 19:19:55
615
原创 Next.js 实战 (六)：如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码，因此开发者需要自行实现，通常有两种思路：使用Node.js原生上传或使用第三方插件如multer。接着，文章选择了使用Node.js原生上传的方式来讲解实现过程，包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后，文章展示了具体的实现步骤，包括编写代码来处理文件上传，并给出了代码示例。
2025-01-02 14:44:32
450
原创 Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion，一个为React设计的动画库，提供了声明式API处理动画和页面转换，适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题，并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后，文章总结了这些效果，并邀请读者探讨更好的实现方案。
2024-12-31 10:02:22
598
原创 Next.js 实战 (四)：i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案，作者对比了网上常见的方案并提出了自己的需求：不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化，并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由，并把当前语言的key存储到浏览器cookie中，使得刷新浏览器后语言不会失效。最后，文章总结了这种国际化方案的优势，并提供Github仓库链接供读者参考。
2024-12-11 09:21:32
587
原创 Next.js 实战 (三)：优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先，需要安装next-themes库。然后，在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件，并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画，可以修改代码实现主题切换时的动画效果。最后，需要在需要的位置引入ThemeModeButton组件，实现暗黑模式的切换。
2024-12-10 15:19:52
342
原创 Next.js 实战 (二)：搭建 Layouts 基础排版布局
这篇文章介绍了作者在使用Next.js v15.x版本重构Github上的旧项目时的经历。作者首先表明了对NextUI组件库的偏好，但因其缺少Form表单组件而在项目中放弃使用。随后，作者提到熟悉但偏业务风格的Ant-Design组件库与Next.js的兼容性问题。文章详细描述了项目的布局结构和UI组件的使用，并展示了侧边栏和主题配置的最终效果。最后，作者鼓励读者关注其Github仓库，并表示自己刚起步，希望与读者一同进步。
2024-12-05 16:22:55
738
原创 基于 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
994
原创 Nest.js 实战 (十五)：前后端分离项目部署的最佳实践
这篇文章介绍了如何使用现代前端框架Vue3和后端Node.js框架Nest.js实现的前后端分离架构的应用，并将其部署到生产环境。文章涵盖了准备阶段，包括云服务器的设置、1Panel面板的安装、数据库的安装、域名的实名认证和备案、SSL证书的申请。在部署Node服务环节，包括了Node.js环境的创建、数据库的配置、用户名和密码的设置、网站信息的填写、静态网站的部署、反向代理的配置以及可能遇到的常见问题。最后，作者总结了部署经验，并希望对读者有所帮助。
2024-10-18 18:21:04
1316
原创 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
821
原创 前端的全栈之路：基于 Vue3 + Nest.js 全栈开发的后台应用
这篇文章介绍了一个名为Vue3Admin的全栈后台应用，前端基于SoybeanAdmin二次开发，后端基于Nest.js。主要使用了Vue3.5、AntDesignVue、UnoCSS、Pinia等前端技术栈，以及Nest.js、PostgreSQL、Prisma等后端技术栈。文章详细描述了系统的功能设计，包括动态国际化语言配置、登录用户操作日志、用户和角色权限映射、动态路由菜单、消息公告发布及前端业务功能等。同时，也提供了项目运行所需的环境和依赖，以及如何拉取代码、安装依赖和启动项目的方法。
2024-10-10 11:02:45
1471
原创 Nest.js 实战 (十三)：实现 SSE 服务端主动向客户端推送消息
这篇文章介绍了在Nest.js应用中使用Server-Sent Events (SSE)的技术。文章首先讨论了在特定业务场景下，为何选择SSE而不是WebSocket作为实时通信系统的实现方式。接着解释了SSE的概念，并展示了如何在Nest.js中实现SSE。文章包含客户端实现的代码示例，并以一个效果演示结束，总结SSE在Nest.js中的应用。
2024-09-11 09:28:44
1281
原创 Nest.js 实战 (十二)：优雅地使用事件发布/订阅模块 Event Emitter
这篇文章介绍了在Nest.js构建应用时，如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展，并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开，这是一个基于eventemitter2库的社区模块，提供了事件发布/订阅功能，使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块，包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。
2024-09-09 15:51:13
490
原创 Nest.js 实战 (十一)：配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中，TypeScript编译对效率的影响，以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程，指导读者如何在项目中安装依赖包，并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后，文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
2024-09-02 10:42:30
793
原创 Nest.js 实战 (十)：使用 winston 打印和收集日志记录
这篇文章介绍了在Nest服务中如何使用Winston记录日志。文章首先强调了日志记录在后台服务中的重要性，接着提到Nest默认的内部日志记录器，并指出可以通过@nestjs/common包中的Logger类来全面控制日志系统的行为。文章还提到，为了在生产环境中实现更高级的日志功能，可以使用如Winston之类的Node.js日志包。接下来，文章介绍了如何在Nest服务中使用Winston记录日志，包括安装相关依赖、创建winston配置文件以及实现简单的日志记录示例。
2024-08-30 17:06:55
1677
原创 Nest.js 实战 (九)：使用拦截器记录用户 CURD 操作日志
这篇文章介绍了在Nest.js中如何实现记录用户CURD操作的需求。首先解释了什么是拦截器以及拦截器的作用，然后通过创建Prisma模型，添加Log模型，并通过编写LoggerInterceptor拦截器，实现了记录用户操作的功能。最后通过效果演示和总结，强调了使用拦截器实现此功能的有效性。
2024-08-13 15:55:25
444
原创 Nest.js 实战 (八)：基于 JWT 的路由身份认证鉴权
这篇文章介绍了身份验证的重要性和多种处理策略，重点放在了JWT（JSON Web Token）认证在Nest.js框架中的应用。文章包含了JWT认证的流程，如何在Nest.js中实现，以及如何创建JWT认证策略。包括了安装依赖，创建处理认证流程的文件，以及如何使用HttpException过滤器来处理未登录访问。
2024-08-07 16:10:06
463
原创 Nest.js 实战 (七)：如何生成 SVG 图形验证码
这篇文章介绍了使用NestJS实现Session验证的图形验证码功能的具体步骤。首先，通过powershell代码安装依赖pnpmaddsvg-captcha。然后，在控制器中使用TypeScript代码引入相关依赖，创建一个图形验证码的接口，当请求该接口时，返回一张随机图片验证码。最后，进行了效果演示。
2024-08-06 09:16:29
483
原创 Nest.js 实战 (六)：使用 Session 在不同请求间存储信息
这篇文章介绍了在Nest.js中如何使用Session来记录客户状态。文章首先解释了Session的概念，然后详细说明了如何在Nest.js中安装和使用express-session，包括全局配置、参数说明、使用方式和常用方法。
2024-08-01 14:02:58
394
原创 Nest.js 实战 (五)：如何实现文件本地上传
这篇文章介绍了使用Nest框架和multer中间件包实现文件上传功能的过程。首先，作者在开发用户管理模块时遇到了需要上传用户头像的需求，因此开发了文件上传功能。文章详细介绍了如何安装依赖，如何处理单个文件上传，如何在模块层注册并配置文件上传路径，并以代码形式展示了如何实现这些功能。最后，作者对使用第三方平台存储文件进行了说明，并建议业务量大的公司很少用上传到服务器本地的方式，该方式更适合个人站点、博客使用。
2024-07-30 16:52:10
1104
原创 Nest.js 实战 (四)：利用 Pipe 管道实现数据验证和转换
这篇文章介绍了Nest.js框架中管道的概念和使用。管道是一种强大的功能，用于在请求数据到达控制器方法之前对其进行预处理，如转换、验证、清理等。文章详细解释了数据转换、数据验证、错误处理和一致性等管道的主要用途，并通过代码示例演示了如何使用内置管道和自定义管道。最后，文章总结了管道在提升应用健壮性和安全性方面的作用，认为合理利用管道可以加速开发周期，提高软件质量。
2024-07-22 14:43:06
1075
原创 Nest.js 实战 (三)：使用 Swagger 优雅地生成 API 文档
这篇文章介绍了Swagger，它是一组开源工具，围绕OpenAPI规范帮助设计、构建、记录和使用RESTAPI。文章主要讨论了Swagger的主要工具，包括SwaggerEditor、SwaggerUI、SwaggerCodegen等。然后介绍了如何在Nest框架中集成Swagger，展示了安装依赖、定义DTO和控制器等步骤，以及如何使用Swagger装饰器。文章最后总结说，集成Swagger文档可以自动生成和维护API文档，规范API标准化和一致性，但会增加开发者工作量，需要保持注释和装饰器的准确性。
2024-07-18 11:05:06
2437
1
原创 Nest.js 实战 (二)：如何使用 Prisma 和连接 PostgreSQL 数据库
这篇文章介绍了什么是Prisma以及如何在Node.js和TypeScript后端应用中使用它。Prisma是一个开源的下一代ORM，包含PrismaClient、PrismaMigrate、PrismaStudio等部分。文章详细叙述了安装PrismaCLI和依赖包、初始化Prisma、连接数据库、定义Prisma模型、创建Prisma模块的过程，并对比了Prisma和Sequelize在Nest.js中的使用体验，认为Prisma更加便捷高效，没有繁琐的配置。
2024-07-16 09:23:19
930
1
原创 Nest.js 实战 (一)：使用过滤器优雅地统一处理响应体
这篇文章介绍了在Nest.js中如何处理接口统一返回格式的方法。首先定义了响应状态码枚举和类型，然后创建了HttpException异常过滤器来捕获HttpException类的异常并设置自定义响应逻辑。最后通过全局配置和效果预览展示了如何应用这些设置。
2024-07-15 14:02:39
834
原创 Next.js 实战 (一)：项目搭建指南
这篇文章介绍了作者在2024年下半年计划使用Next.js从零开始搭建一个后台模板，以探索Next.js的奥秘。文章包含了项目搭建、目录结构、APP路由约定、配置Eslint、Prettierrc、Husky等项目提交规范、使用release-it自动管理版本号和生成CHANGELOG、import排序规则、安装NextUI等内容。作者还提到会在开发过程中记录遇到的问题和解决方法，并计划在后期使用Prisma+Supabase数据库存储数据，最终完成一个基于Next.js的全栈项目。
2024-07-03 13:48:37
1058
原创 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-26 15:46:44
2470
原创 Nuxt3 实战 (十一)：添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Nuxt3框架中页面和布局的过渡效果设置方法，以及首屏加载动画的添加。通过配置nuxt.config.ts文件和添加CSS样式，可以实现页面过渡效果。同时，文章也提到了在页面中设置不同的过渡效果和为布局和页面同时设置过渡效果的方法。最后，文章以一个Github仓库链接和一个线上预览地址作为总结，表示遵循官方文档操作即可完成相关设置。
2024-06-20 15:37:18
1235
原创 Nuxt3 实战 (十)：使用 Supabase 实现 RESTful 风格 API 接口
这篇文章介绍了如何使用Supabase实现RESTful风格的API接口，用于网站分类和子站点的增删改查（CURD）功能。文章首先阐述了表设计，包括ds_categorys和ds_websites两张表的列名、类型和用途，并提到了为每张表添加的user_id和email字段以支持用户身份识别。接着，文章描述了接口设计，以ds_websites表为例，说明了如何通过RESTful API实现CURD功能，并给出了使用SupabaseClient实现插入数据的相关代码。
2024-06-19 14:17:29
1007
原创 Nuxt3 实战 (九)：使用 Supabase 实现 Github 认证鉴权
这篇文章介绍了如何在Supabase中使用Github授权登录并实现用户身份验证。文章首先说明了Supabase采用postgresql的Row Level Security（RLS）机制来控制不同用户对数据表访问权限的重要性，然后详细介绍了配置Github OAuth Apps的过程，包括创建新的OAuth应用、填写项目信息、设置回调URL等步骤。接着，文章展示了在Nuxt3中实现登录界面的代码示例，最后总结了通过本教程可以学习到的技能
2024-06-13 10:48:09
1424
原创 Nuxt3 实战 (八)：优雅的实现暗黑主题模式
这篇文章介绍了在Nuxt3中实现暗黑模式的过程。首先推荐使用color-mode库来轻易实现暗黑模式切换，并通过pnpm命令安装@nuxtjs/color-mode依赖。然后在nuxt.config.ts配置文件中注入依赖，并根据项目实际情况自定义配置。接着通过toggleDark函数实现切换动画，并在需要的地方加载组件，从而达到最终效果。
2024-06-11 13:49:12
1416
原创 TS 小技巧: 使用元组生成联合类型
这篇文章介绍了使用TypeScript开发时，如何根据一个数组的值得到一个联合类型。作者介绍了一个开发小技巧：使用元组生成联合类型。文章中给出了具体的开发场景和示例代码，以及实现的步骤。通过将数组转成元组类型，然后将元组类型转成联合类型，可以实现类型检查。
2024-06-04 13:58:24
500
原创 HTML - 资源提示符
这篇文章介绍了HTML中的一些优化技术，包括async、defer、preload、prefetch和moudle等标签的使用方法和作用。其中，async和defer标签可以异步加载脚本资源，不会阻止DOM解析，但执行时机不同；preload标签可以预加载指定资源，但不会立即执行；prefetch标签告诉浏览器，未来可能会用到某个资源，浏览器会在空闲时下载；moudle标签可以用于兼容不同浏览器。
2024-06-03 16:00:44
602
原创 箭头函数的意义和函数的二义性
这篇文章介绍了箭头函数的特点以及与普通函数的区别。它指出了箭头函数没有this、arguments对象和prototype原型的特点，因此不能作为构造函数使用。文章还解释了函数的二义性问题，即函数可以有多种调用方式，这在JS设计上存在缺陷。最后，文章指出箭头函数不再依赖面向对象的概念，因此没有this和原型的概念。
2024-05-29 13:48:00
854
1
原创 对象解构与迭代器的猫腻？
这篇文章介绍了变量的解构赋值技巧在前端开发中的常用性，包括对象解构和数组解构。文章中给出了一些代码示例，解释了可迭代对象的概念以及如何使用迭代协议来实现数组解构。此外，文章还介绍了生成器的概念并提供了代码示例。作者建议对这些概念不熟悉的读者可以查阅ES6的文档来更好地理解。
2024-05-28 17:41:17
721
原创 基于 React + Umijs + Nest 全栈开发的后台系统
这篇文章介绍了一个基于React+Nest全栈开发的后台系统XmwAdmin。项目包括前端和后端技术栈，线上预览地址和登录信息。作者推荐使用pnpm包管理工具和特定的环境依赖。文章提供了项目的运行和编译代码，以及各个功能模块的介绍。还包括演示图和项目活动以及总结部分。数据库下载链接也提供了，该项目已完成后台的核心功能。
2024-05-27 16:42:52
1419
原创 Nuxt3 实战 (七)：配置 Supabase 数据库
这篇文章介绍了如何为Nuxt项目集成Supabase数据库。文章首先阐述了选择Supabase作为Nuxt项目的数据库的理由，包括其良好的网络评价、与Nuxt的良好集成以及对用户认证和身份鉴权的支持。接着，文章详细介绍了Supabase的特点，如使用PostgreSQL作为数据库、提供完整的认证系统、支持实时数据同步和提供对象存储服务等。然后，文章指导读者如何在Nuxt项目中安装和配置Supabase，包括设置重定向策略和获取数据库访问密钥。最后，文章强调了在开发环境和生产环境中使用不同密钥的重要性。
2024-05-24 13:50:40
1713
原创 JavaScript 中的二进制散列值和权限设计
这篇文章介绍了JavaScript中使用位运算符进行权限控制的方法。文章首先介绍了JavaScript中的进制类型，包括十进制、二进制、十六进制和八进制。然后解释了位运算符的概念和常用的按位与、按位或、按位异或和按位非操作符。接下来讨论了位运算符在传统权限系统中的应用场景，并给出了一个基于二进制变量表示权限的示例。最后，文章提到了位运算符方案的局限性，例如每个权限码必须是唯一且只有一位为1的限制。但总的来说，在中小型业务中可以使用这种方式进行权限控制。
2024-05-23 15:30:32
612
原创 TS 中的类型验算,高级通用 API 实现
这篇文章介绍了一些常用的类型通用API封装，包括TS内置类型和关键字的使用，以及TS compiler内部实现的类型。文章截取了一些常用的类型定义和API示例，如Partial、Required、Readonly、NonNullable、Parameters等。还介绍了一些常用的TS关键字，如extends、infer、keyof、typeof、in等。此外，文章还提供了一些实现示例，如Optional API、GetOptional API和UnionToIntersection API。该文章会不断更新
2024-05-22 15:06:51
737
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人