这篇文章将介绍如何为 Next.js应用设置 Google 身份验证，手把手教你如何创建项目，如何使用Tailwind CSS 实现界面。 要求 在开始之前，请确保你已经具备以下条件： Google Cloud账号：使用Google Cloud创建 OAuth 凭据。 我们会从创建项目开始，逐步完成 Google 身份验证的添加。 第一步：创建 Next.js 项目并集成 Tailwind CSS 首先

前言 React19发布也有一段时间了，其中，最引人注目的便是三个新的 Hooks，它们已经稳定发布并准备好投入实际开发中。对于开发者来说，这些新功能不仅能简化代码，还能提升应用的性能和用户体验。接下来，我将详细介绍这三个新的 Hooks 及其应用场景。 useActionState useFormStatus useOptimistic 这三个 Hooks 为 React 的状态管理

什么是Nodemailer？ Nodemailer是一个可以通过JavaScript/TypeScript发送电子邮件的包或模块。 如何使用Nodemailer发送电子邮件？ 步骤1：创建一个文件夹 在你的桌面（或PC上的任意文件夹）创建一个文件夹。我将我的文件夹命名为“sendemail”。然后，使用VSCode打开该文件夹。 步骤2：初始化项目/package 在VSCode中打开终端，运行以下命

介绍 作为一个后端开发人员，您可能希望了解如何存储和检索 API 与之交互的数据库中的数据。学习这一切可能会让人感到有些不知所措，但在本文中，我将向您展示如何编写一个 CRUD 操作的 API。在我们动手之前，先简要了解一些相关术语。 什么是 API？ API（应用程序编程接口）的全称是 Application Program Interface。API 就是一个可以

本文将介绍几种在 Flutter（和 Dart）中格式化 DateTime 的方法。第一种方法是从头开始编写格式化函数，后者则使用第三方库实现。 使用自定义代码 在大多数情况下，我们可以用几行代码实现所需的功能。下面的示例中，我们创建了一个名为 simplyFormat 的可复用函数，它可以返回两种格式的结果：yyyy-MM-dd HH:mm:ss（日期和时间）或 yyy

概要 以下是 React Router 提供的实用钩子函数的总结。它们被设计用于简化与 URL 相关的操作和状态管理。 1. useLocation 概要：获取当前 URL 的信息（路径、查询参数、哈希、状态等）。 主要用途： 实现基于当前路径或查询参数的逻辑。 获取链接或跳转来源的信息（如 state 数据）。 返回值的主要属性： pathname：当前路径（例如：/home）。 s

以下是一个基于 React 19 和 Next.js 15 的开发路线图，旨在指导开发者从初学者成长为高级开发者。路线图分为多个阶段，专注于每个技能水平所需的知识、工具和概念。 1. 初学者（入门级） 目标：掌握 React 和 Next.js 的基础知识，并完成小型项目。 关键学习领域： React 基础： JSX、组件、Props、State 和事件处理。 函数组件和 Hooks（us

Prisma发出的查询 在我们的项目中，我们使用Prisma作为ORM来操作数据库。遇到的问题是，当尝试获取多个表的数据时，Prisma发出了多个查询，而非预期的单个联合查询。以下是一个简单的示例： await this.prisma.company.findUnique({ where: { id }, include: { shop: true, }, }); 许多人可能会期望发出如下的SQL查询： SELECT * FR

在该篇文章中，我们将使用 github.com/hibiken/asynq 包将任务加入 Redis 队列，并通过 github.com/robfig/cron 包创建定时任务调度器。本指南将逐步介绍如何设置任务队列、安排定时任务以及实现优雅的程序关闭。 初始化模块 首先，为项目创建一个新的 Go 模块： go mod init learn_queue_and_cron 创建 cron.go 文件 cron.go 文件

简介 多年来，CSS 发展迅速，而 2024 年的新功能显著提升了现代 Web 应用的构建方式。这些进步让 CSS 更加强大、灵活且易用，为开发者提供了打造美观且高性能网页的工具。在本文中，我们将探讨每位开发者都应该了解的十大 CSS 关键功能。 1. 容器查询 (Container Queries) 容器查询允许开发者根据父容器的大小，而非视口大小，对元素

简介 CSS 尺寸单位 是构建响应式和美观网页设计的基石 。有众多选项如 px、rem、em、vw、vh 等。 1. 像素 (px) ：固定尺寸 px 提供精确控制，设置固定尺寸，非常适合不需要缩放的元素。 示例: h1 { font-size: 24px; /* 始终是24像素 */ } 提示：在需要精准度的组件上使用 px，比如边框或图标。 2. 相对单位 (rem & em) ：可扩展且灵

使用navigator.clipboard API 让Web应用中的复制粘贴变得更简单。以前，我们依赖 document.execCommand("copy") 来处理剪贴板操作。这种方法是同步的且功能有限——它只能从选中的 DOM 元素中复制文本。此外，它在不同浏览器上的兼容性也不一致。虽然document.execCommand已被废弃，但仍然可以作为旧版浏览器的回退方案。 document.ex

在 Node.js 异步操作中，使用 AsyncLocalStorage 可以轻松维护上下文，而无需在每个函数间手动传递数据。可以将其想象为一个“存储箱”，它伴随请求流转，携带关键信息，使代码的任何部分都能访问这些数据。 传统方式：手动传递参数 以下是一个未使用 AsyncLocalStorage 的 Express 应用示例，我们需要在多个函数之间传递 userId： // A

为什么需要为后端引入国际化？ 为后端引入国际化可以帮助应用程序更有效地与全球用户群交流。通过提供用户偏好的语言内容，不仅可以改善用户体验，还能提高应用的可访问性。以下是一些具体的理由： 本地化错误信息：用用户的母语显示错误信息，减少困惑和压力。 多语言内容支持：为电商网站或内容管理系统提供多语言的内容获取。 本地

介绍 Cookies 是 Web 开发中的重要工具，它允许网站在客户端存储少量数据。在 Nuxt 3 中，处理 Cookies 变得更加简单和高效。本篇文章将全面介绍如何在 Nuxt 3 应用中使用 Cookies。巩固Nuxt3的知识，以便于我们学习即将发布的Nuxt4。 什么是 Nuxt 3 中的 Cookies 在 Nuxt 3 中，Cookies 可以在服务端和客户端操作。通过 useCookie

几个月没有使用Express框架开发了，Express版本已经更新到了5.0版本，这次Express.js 5.0版本发布于2024 年 10 月 15 ，距上一次重大更新已有 10 年。它的主要目标是专注于现代化、性能优化和兼容未来的 Node.js 项目，需要 Node.js 18 或更高版本。感兴趣的小伙伴一起来看看吧~ 安装Express.js 5.0 要体验新版本，只需运行以下命令

虽然Nuxt4还没有正式发布，但是Nuxt的官方文档中已经更新了很多关于Nuxt4的内容，结合官方的文档和所有合并的PR (可以在改PR中随时关注发布进程)，我们可以做一个从Nuxt3到Nuxt4的迁移，有兴趣的小伙伴一起来看看吧。 迁移准备 在迁移到Nuxt4之前，我们需要先将项目更新到最新的Nuxt3版本，这样有利于减少兼容性问题。使用以下更新

Nuxt 3 提供了许多开箱即用的功能，其中包括默认的错误页面。不过，尽管默认错误页面很好用，通常我们更希望创建属于自己的自定义错误页面。 本文将详细讲解如何编写自定义错误页面，根据错误代码进行定制，并在发生错误时优雅地恢复应用的正常状态。 创建自定义错误页面 在 Nuxt 3 中，要创建一个错误页面，我们需要在项目根目录（与

需要实现的效果如下： 左侧分类导航栏：点击左侧分类时，页面会滚动到对应的分类区域，同时更新选中状态（高亮）。 右侧内容区：显示每个分类的具体子类别，右侧内容根据滚动位置动态更新左侧导航的选中状态。 路由更新：地址栏的 query 参数随导航栏选中状态动态更新（如 ?group=image）。 实现步骤 1. HTML 结构 <template> <d

项目结构 ├── layouts/ │ └── error.vue # 自定义错误页面 ├── pages/ │ ├── index.vue # 首页 │ ├── trigger400.vue # 用于触发 400 错误的页面 │ └── trigger500.vue # 用于触发 500 错误的页面 ├── server/ │ └── api/ │ ├── throw400.js # 模拟 400 错误的 API │ └── throw500.js # 模拟 500 错误的 API 1. 自定义错误

编译对大部分开发人员来说算是“最熟悉的陌生人”吧，我们每天的工作都会接触到它，但是绝大多数情况下编译对于我们来说就是个黑盒子，我们又对它知之甚少，本文就来聊一聊编译原理，让大家能初步了解编译大致的过程和一些相关的点。 编程语言的发展历程 编程语言的发展历程大概可以分为4个阶段： 第一代语言：机器语言 第一代编程语

在Vue3中，我们有很多与响应性相关的函数，比如toRef、toRefs、isRef、unref、shallowRef、proxyRefs等。在实际的开发中，合理地使用这些函数能极大地提高我们的开发效率。本文就一起来看看这些响应性相关的函数的详细用法。 ref() 对于ref，大家并不陌生。我们经常在Vue3中使用它。它的功能是接受一个值并返回一个响应性的对象。我们可以

今天看到有小伙伴在Nuxt 3文中社区群里问到这个问题，那就顺便写一篇文章来回答，并且重温一下Nuxt3的路由。 Nuxt 3 多路径访问同一页面 在 Nuxt 3 中，如果你想让两个不同的路径访问同一个页面，有以下几种实现方式： 重定向方式：在其中一个路径中使用 navigateTo 方法重定向到目标页面。 路由别名：在 nuxt.config.ts 中配置路由

AutoAnimate是什么？ 这是FormKit提供的一个动画库。只要安装了这个库，你就可以非常轻松地使用它。虽然这个库支持Vue、React、Preact、Solid、Svelta、Angular和NativeJS，但在本文中，我将介绍如何在Vue中使用它。 官方文档： https://auto-animate.formkit.com/ 设置 首先进行安装 npm install @formkit/auto-animate 接着，在nuxt.con

有时候在vue3开发中，有些情况我们不知道是使用Computed还是使用Ref比较好，虽然两者都能实现功能。本文我们来探讨一下两者的差异。 计算属性（Computed）是一种基于响应式依赖关系进行缓存运算的属性。当它的依赖关系发生改变时，它就会重新求值。并且只有在它的相关依赖项发生改变时才会重新计算，否则，它会立即返回之前的计算结果，