白雾茫茫丶_个人页

2024年06月

• 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.27 17:07:53
  发表了文章 2024-05-27 17:07:53

  基于 React + Nest 全栈开发的后台系统

  这篇文章介绍了一个基于React+Nest全栈开发的后台系统XmwAdmin。项目包括前端和后端技术栈，线上预览地址和登录信息。作者推荐使用pnpm包管理工具和特定的环境依赖。文章提供了项目的运行和编译代码，以及各个功能模块的介绍。还包括演示图和项目活动以及总结部分。数据库下载链接也提供了，该项目已完成后台的核心功能。

  
• 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本地部署步骤以及责任声明。作者还感谢了为本项目提供支持与灵感的项目，并承诺会记录下开发过程中遇到的问题及解决方法以帮助他人。