白雾茫茫丶_社区达人页

2025年08月

• 08.20 09:42:11
  发表了文章 2025-08-20 09:42:11

  发现一款宝藏工具：Shots.so，几秒钟做出高级感 Mockup

  这篇文章介绍了Shots.so这个在线工具，它能将普通截图转化为高质量的效果图，适用于设计展示、文章配图、产品宣传等场景，提供多种设备模板、背景风格和动态效果，操作简单，适合各类用户提升作品质感。
• 08.12 16:08:13
  发表了文章 2025-08-12 16:08:13

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

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

  
• 08.11 16:58:55
  发表了文章 2025-08-11 16:58:55

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

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

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

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

  现在浏览器的渲染原理及流程

  这篇文章介绍了浏览器渲染原理及流程，包括HTML解析、样式计算、布局、分层、绘制、分块、光栅化和画等阶段，以及各个阶段的输入输出和任务执行过程。文章还解释了浏览器如何处理外部CSS和JS文件的下载和解析，以及这些文件如何影响渲染流程。
• 08.11 09:38:58
  发表了文章 2025-08-11 09:38:58

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

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

  JS 分片任务的高阶函数封装

  这篇文章介绍了在实际业务开发中，如何处理渲染大量元素导致的页面卡顿问题。文章通过问题复现，分析了浏览器渲染原理，并提出了使用分片任务执行的方法。文章详细介绍了如何使用requestIdleCallback API实现分片任务，并封装成高阶函数，以便开发者针对不同任务进行自定义分片处理。同时，文章也涉及了浏览器渲染原理和requestIdleCallback API的用法。
• 08.08 17:34:52
  发表了文章 2025-08-08 17:34:52

  如何动态执行 JS 脚本

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

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

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

  
• 08.07 16:48:38
  发表了文章 2025-08-07 16:48:38

  React - 实现一个基于 Antd 的数值范围组件

  这篇文章介绍了如何实现一个基于Ant Design的数值范围组件，以满足数据采集流程中表单数据的录入需求。文章详细说明了组件的设计思路、代码结构、使用方式以及参数说明，并提供了效果预览和注意事项。组件支持只能输入数字，具有自定义表单控件封装的特点，同时支持所有InputNumber属性，以适应不同业务场景的需求。

  
• 08.07 14:35:30
  发表了文章 2025-08-07 14:35:30

  Vue3 + Vite 构建组件库发布到 npm

  这篇文章介绍了如何使用Vue3和Vite构建组件库并发布到npm，包括初始化项目、配置项目结构、创建组件目录、设置入口文件以及导出组件等步骤。

  
• 08.07 13:58:37
  发表了文章 2025-08-07 13:58:37

  React - 实现一个基于 Antd 的密码强度校验组件

  这篇文章介绍了一个基于 Nest 和 Umi 技术栈的个人项目开发中用到的密码强度校验组件的开发过程。作者首先在网上找不到满意的资料，于是决定自己开发该组件。文章依次介绍了效果预览、组件思想和组件开发的过程，并提供了相应的代码示例。最后，作者展示了实际效果，并提供了仓库地址供参考。

  
• 08.07 09:11:10
  发表了文章 2025-08-07 09:11:10

  使用 sort-imports 排序规则美化头部 import 代码

  这篇文章介绍了如何使用Eslint的sort-imports规则对项目中的import代码进行排序，提高代码可读性。通过安装eslint-plugin-simple-import-sort插件并配置.eslintrc.cjs文件，Eslint将自动对import代码进行排序。

  
• 08.06 17:46:14
  发表了文章 2025-08-06 17:46:14

  基于 Next.js 的今日热门榜单平台

  **今日热榜**是一款基于Next.js构建的热点聚合平台，实时整合17+主流平台热门内容，提供明暗主题切换、响应式适配、SSR极速加载等特性，支持Vercel一键部署，助你轻松掌握全网热点。

  
• 08.06 15:06:13
  发表了文章 2025-08-06 15:06:13

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

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

  
• 08.06 09:40:40
  发表了文章 2025-08-06 09:40:40

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

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

  

2025年01月

• 01.21 14:25:25
  发表了文章 2025-01-21 14:25:25

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

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

  
• 01.16 09:19:31
  发表了文章 2025-01-16 09:19:31

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

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

  
• 01.07 19:44:58
  发表了文章 2025-01-07 19:44:58

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

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

  
• 01.02 14:57:27
  发表了文章 2025-01-02 14:57:27

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

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

  

2024年12月

• 12.31 10:30:29
  发表了文章 2024-12-31 10:30:29

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

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

  
• 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.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地址。
• 10.10 10:27:17
  发表了文章 2024-10-10 10:27:17

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

  这篇文章介绍了基于Vue3和Nest.js开发的一个全栈后台应用，适合想学习全栈开发的人员参考。前端使用了相关技术栈，后端则列出了部分技术组件。线上预览提供了一个演示环境，并给出了默认的用户名和密码。项目包含动态国际化语言配置、操作日志记录、用户角色权限管理、动态路由菜单生成、消息公告推送等功能。文章还提供了项目的安装步骤、技术要求及注意事项，强调仅用于学习交流且可能存在Bug，欢迎贡献代码和反馈问题以完善项目。

  

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.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操作。