第15章:在 Strapi 中发送邮件确认

2024-09-08
阅读 11 分钟
479
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读本章的代码可在 GitHub 上找到:分支 emailconfirmation。[链接]我们已经完成了一个完整的注册表单。当用户使用该表单注册时,他们会被添加到 Strapi 中。由于我们在本系列开始时的设置,Strapi 实际上已经在发送邮件,但我们需要对其进行配置。但首先,我们需要创建...

曾经非常厌恶 SSR,现在终于不再需要它了 | 如何在考虑 SEO 的情况下构建 CSR 应用

2024-09-07
阅读 3 分钟
1k
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读SSR(服务器端渲染)曾经被誉为解决单页应用(SPA)在性能和 SEO 问题上的灵丹妙药,而这正是一个快速发展的领域。然而,在 2024 年,SSR 真的仍然是它通常被认为的那种万全之策吗?在这篇文章中,我将讨论为什么 SSR 可能被高估了,以及当代的工具和技术如何让我们仅...

我尝试重现 React 的 useState() Hook 并失去了工作机会 | 高级 React

2024-09-05
阅读 4 分钟
522
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在 React 中创建自定义钩子(hooks)是一个非常有价值的练习,甚至可以说是许多开发者的“啊哈”时刻。剧透警告:第一次尝试是在 Revolut 的一次高压面试中,结果并不如意。在这篇文章中,带你一起回顾我重现著名的 useState() 钩子的历程,称它为 useMyState()。同时,...

Next.js国际化全面指南

2024-09-04
阅读 5 分钟
1.2k
Next.js作为一个流行的React框架,为构建多语言支持的应用程序提供了强大的支持。本指南将引导你完成在Next.js项目中实现国际化(i18n)的步骤。我们将涵盖路由设置、本地化处理和翻译内容管理。

停止使用 .d.ts 文件(如果你想让你的应用变慢) | 高级 TypeScript

2024-09-03
阅读 3 分钟
999
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读TypeScript 自推出以来已经走了很长一段路,现已成为为 JavaScript 添加类型安全的首选工具。无论你是经验丰富的 TypeScript 老手,还是刚刚入门的初学者,你可能都遇到过 .d.ts 文件——这些神秘的类型声明文件似乎有自己独立的世界。在这篇文章中,我们将深入探讨为什...

14.使用 NextAuth CredentialsProvider 注册,结合服务器操作和 useFormState

2024-09-02
阅读 7 分钟
582
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读此示例的代码可以在 GitHub 上找到:分支为 credentialssignup。地址:[链接]我们已经有了表单,接下来该做什么呢?我们还需要完成哪些步骤?调用 Strapi 的注册端点。处理错误和成功情况。验证字段。向用户显示错误信息。发送确认邮件。设置加载状态。在前面的章节中...

JavaScript中的新数组切片表示法——array[start:stop:step]

2024-09-02
阅读 3 分钟
1.1k
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读使用这种新的切片表示法,我们将不再编写如下的 slice() 代码:而是可以像这样编写代码:这种写法不仅更简洁、可读性更强,而且更直观。更棒的是,我们不必等到它正式发布——现在就可以使用它。你可以通过扩展 Array 类来实现这个功能:处理未指定的结束索引如果我们省...

Vue 3.5 即将到来:探索最新特性与性能提升

2024-09-02
阅读 3 分钟
1.6k
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读Vue 正在为 Vue 3.5 版本进行准备。这一新版本(目前处于 Alpha 阶段)带来了一系列的增强功能、新特性以及重要的改动,以提升开发者和用户的体验。根据官方的更新日志,我们来看看 Vue 3.5 中即将推出的内容。github:[链接]响应式属性解构响应式属性解构已经处于实验...

13. 注册 NextAuth 的 CredentialsProvider

2024-09-01
阅读 5 分钟
476
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在开始编码之前,我们需要处理与 GoogleProvider 相关的问题,并确定如何设置注册流程。这个示例代码可以在 GitHub 上找到:分支 credentialssignup。[链接]GoogleProvider 的限制当使用 NextAuth 的 GoogleProvider 时,只有一个流程。如果用户从未连接到应用程序,N...

12.在 NextAuth CredentialsProvider 中处理表单组件的错误

2024-08-30
阅读 5 分钟
496
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读本章的所有代码都可以在 GitHub 上找到,分支为 credentialssignin。[链接]我们还需要处理以下几个问题:表单输入验证处理 signIn 返回的错误处理成功登录后的操作处理加载状态表单验证我们将使用客户端的 Zod 进行输入验证。Zod 处理以 TypeScript 为优先的模式进行...

11.如何在 NextAuth 的 authorize 函数 / CredentialsProvider 中处理错误

2024-08-30
阅读 6 分钟
668
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读本章的所有代码都可以在 GitHub 上找到,分支为 credentialssignin。[链接]在当前状态下,应用程序实际上是可用的,只要你输入正确的电子邮件/用户名和密码即可。但我们尚未进行任何错误处理。那么,如果我们输入了错误的密码,会发生什么?让我们试一试。运行应用程...

React Native 0.75 重磅发布:性能飞跃与重要更新全面解析

2024-08-29
阅读 4 分钟
1.7k
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读React Native 0.75 的发布标志着一个重要的里程碑,该版本通过一系列有影响力的更新和更改,旨在提高性能、稳定性和整体开发者体验。以下是此版本中包含的增强功能、新特性和重大更改的全面概述。亮点 🚀Yoga 3.1 的增强和布局改进React Native 0.75 引入了 Yoga 3.1,...

新消息:Node.js 终于内置 TypeScript 支持

2024-08-29
阅读 3 分钟
2.9k
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读令人兴奋的消息!Node.js 终于迎来了原生的 TypeScript 支持!是的,现在你可以在 Node.js 中直接使用 TypeScript 类型了。看来我可以把 typescript 和 ts-node 扔进垃圾桶了。❌ 在此之前:Node.js 只支持 JavaScript 文件。像下面这样的代码根本无法运行:尝试运行时...

10. NextAuth CredentialsProvider:登录

2024-08-29
阅读 9 分钟
880
现在我们将把凭据认证流程添加到我们的项目中。所谓凭据认证,就是传统的通过电子邮件和密码登录的方法。NextAuth 将其称为 "CredentialsProvider",而 Strapi 称之为本地认证。以下是我们需要的内容概述:

09 如何为 NextAuth 的 GoogleProvider 添加错误处理

2024-08-28
阅读 7 分钟
814
这一章比较棘手,因为我们需要引入一些新的概念。此外,NextAuth 提供的错误反馈非常有限,这让人有些困惑。我们将从一些稍微偏题的点开始,然后回到错误处理上来。

React Native中通知权限的错误处理

2024-08-27
阅读 2 分钟
589
在React Native中,处理权限有时可能会很棘手,尤其是当权限返回为null时。这种情况经常发生在权限系统配置不当或请求/响应周期出现问题时。在这篇博文中,我们将探讨权限可能为null的常见场景,以及如何有效地处理和调试这些情况。

在JavaScript中从外部解决Promise:实际应用场景

2024-08-27
阅读 3 分钟
10.3k
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读这是JavaScript中那些在现实世界中极其强大的酷炫技巧之一。强大的实际应用场景动作(A)等待另一个动作(B)A正在进行,但用户想做B,而A需要先发生。例如:社交应用,用户可以创建、保存和发布帖子。就像Medium。 {代码...} 如果用户想在帖子保存时发布怎么办?解决方案...

JavaScript 中的 bind()、apply() 和 call():鲜为人知的差异

2024-08-26
阅读 3 分钟
791
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读每个开发者都应该充分理解它们的工作原理,并能够辨别它们之间的微妙差异。首先要知道,JavaScript 函数是“一等公民”。这意味着它们都是对象值——所有函数都是 Function 类的实例,拥有方法和属性:因此,bind()、apply() 和 call() 是每个 JavaScript 函数都具备的三...

(06)使用 Next 14 + NextAuth 4 + Strapi v4进行 Google 和凭据提供商身份验证的完整指南

2024-08-26
阅读 9 分钟
699
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读08. 使用 NextAuth 的 GoogleProvider 将用户添加到 Strapi 数据库本章的最终代码可以在 GitHub 上找到(分支:callbacksForGoogleProvider)。[链接]我们需要使用 jwt 回调函数将用户添加到 Strapi 的数据库中。我们也知道在什么时候执行这个操作。在上一章中,我们...

(05)使用 Next 14 + NextAuth 4 + Strapi v4进行 Google 和凭据提供商身份验证的完整指南

2024-08-26
阅读 5 分钟
618
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读07.NextAuth 回调函数详解本章的最终代码可以在 GitHub 上找到(分支:callbacksForGoogleProvider)。[链接]NextAuth 会在客户端(浏览器)中创建一个 JWT token 并将其设置在 cookie 中。除此之外,NextAuth 还允许我们通过客户端组件 useSession hook 或服务器组件...

为什么在JavaScript中['1', '5', '11'].map(parseInt) 返回 [1, NaN, 3]

2024-08-25
阅读 3 分钟
457
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读他接下来看到的东西震惊了他:这怎么可能呢?parseInt是不是坏了? map() 是不是有bug?他惊慌地抬头看,引来了Jake尖锐而令人不安的笑声。Alex自称编程高手,以快速编码和简洁代码为傲。尽管刚进入这个行业不久,他总是认为自己比团队其他人都强,固执地我行我素;所有善意的...

React Hook Form:指南与示例

2024-08-23
阅读 14 分钟
1.2k
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读表单是用户与网站和Web应用程序交互的重要组成部分。验证用户通过表单提交的数据是开发者的一项关键职责。React Hook Form是一个帮助在React中验证表单的库。它是一个没有其他依赖项的精简库,性能优越,使用简单,开发者可以比使用其他表单库写更少的代码。在本指南...

JavaScript 中的 7 个新 Set 方法:`union()`、`intersection()`,以及其他 5 个

2024-08-23
阅读 2 分钟
651
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读我们坦诚一点:你可能对 Set 并不怎么关心!至少直到现在……Set 从 ES6 就已经存在了,但通常它们只是用来确保列表中没有重复项。然而,随着这7个即将推出的内置 Set 方法,我们可能会发现自己更加频繁地使用它们。1. union()Set 的新方法 union() 为我们提供了两个集...

10个你应该立即卸载的VS Code扩展

2024-08-22
阅读 7 分钟
546
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读你知道你现在有多少个VS Code扩展吗?我:多达56个。如果你发现VS Code随着时间变得越来越慢、越来越耗电,那么这个数字可能就是原因所在。因为每一个新的扩展都会增加应用程序的内存和CPU使用量。编程已经够具有挑战性了;没有人需要再与这样的事情抗争:所以我们需...

(04)使用 Next 14 + NextAuth 4 + Strapi v4进行 Google 和凭据提供商身份验证的完整指南

2024-08-22
阅读 8 分钟
709
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读06.NextAuth:创建自定义登录页面到目前为止,我们一直在使用 NextAuth 提供的默认登录页面。但我们遇到了两个问题:这个页面不美观,无法自定义。页面会重新加载,影响用户体验。为了解决这些问题,我们将实现一个自定义的登录页面。为此,我们需要完成以下几步:创...

使用 `<template>` HTML 标签的 10 个重要技巧

2024-08-21
阅读 7 分钟
828
<template> HTML 标签是一个功能强大但经常被忽视的元素。它允许你定义可重复使用的内容,这些内容可以被克隆并插入到 DOM 中,而不会在最初渲染。这一功能在创建动态、交互式 Web 应用时尤为有用。在本文中,我们将探讨 10 个有效使用 <template> 标签的技巧,帮助你在项目中充分发挥其潜力。

理解 React Native 工作区中的 `nohoist`

2024-08-21
阅读 3 分钟
671
在 monorepo 设置中管理依赖项可能具有挑战性,尤其是在处理 React Native 项目时。Yarn Workspaces 为在单一仓库中管理多个包提供了强大的解决方案。然而,有时将依赖项提升到根 node_modules 的默认行为可能会导致问题,特别是在 React Native 中。这就是 nohoist 功能派上用场的地方。

使用 Next 14 + NextAuth 4 + Strapi v4进行 Google 和凭据提供商身份验证的完整指南(03)

2024-08-21
阅读 5 分钟
869
这是使用 GoogleProvider 进行 NextAuth 基本配置的第二部分。本章的最终代码可以在 GitHub 上找到(分支:basicgoogleprovider)。

为什么你应该停止使用"传统"的margin和padding来设置CSS样式

2024-08-20
阅读 2 分钟
556
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读随着使用网络的人比以往任何时候都多,确保网络体验对所有用户都可访问的需求变得更加迫切。这包括从从不同方向/角度((从右到左,从上到下等)。当添加传统的 margin 和 padding 时,你明确地定义了来自各个方向(上、下、左和右)的边距和填充。这可能会在你的区域...

使用 Next 14 + NextAuth 4 + Strapi v4进行 Google 和凭据提供商身份验证的完整指南(02)

2024-08-20
阅读 7 分钟
1.5k
NextAuth 是一个开源的身份验证解决方案,适用于全栈(Next)应用程序。它支持不同的登录方式,如 OAuth 提供商(如 Google、GitHub 等)、凭据(经典的邮箱 + 密码)以及邮箱登录(通过用户点击的 "魔法链接")。它还提供不同的数据库适配器,可以直接将登录信息存入特定的数据库(如 MongoDB)或与 ORM(如 Prisma)集...