我最近在 X 上发布了一个视频，其中我在不到一分钟的时间内设置了一个带有身份验证和用户个人资料页面的 Laravel React 项目！我认为为任何喜欢遵循详细指南的人分享书面版本会很有帮助。

在本指南中，我将向您展示如何使用 React 前端和内置身份验证快速设置新的 Laravel 项目，所有这些都使用 Laravel Breeze 。只需几个步骤，我们就将拥有一个功能齐全的用户面板，可进行配置文件编辑。

为什么是 Laravel？

Laravel 是一个流行的 PHP 框架，用于构建现代 Web 应用程序。事实上，它正在迅速获得关注，2024 年 9 月，Accel 宣布对 Laravel 投资 5700 万美元。

根据官方网站，Laravel 是“Web Artisans 的 PHP 框架”，它确实符合这一描述。

我不会花太多时间介绍 Laravel 是什么，其官方网站和文档上有大量信息。相反，让我们开始设置您的项目。

项目设置

技术堆栈

我们将使用：

• Laravel（用于后端 API）

• SQLite 这是 Laravel 项目的默认数据库（尽管您可以轻松切换到另一个数据库）

• React 前端（使用 Inertia.js）

• Laravel Breeze 处理身份验证和用户管理

要求

要遵循本指南，请确保您拥有：

• PHP 8（最好是 8.3）

• 作曲家

• Node.js (v21)

准备好？让我们开始吧！

第 1 步：创建一个新的 Laravel 项目

首先，使用Composer新建一个Laravel项目：

composer create-project laravel/laravel laravel-project

这将使用默认的 Laravel 设置创建一个新目录。进入项目目录并为应用程序提供服务：

cd laravel-project
php artisan serve

如果您访问 http://localhost:8000，您将看到 Laravel 欢迎页面。

恭喜，您已经创建了您的第一个 Laravel 项目！ ✅

默认情况下，Laravel 使用 SQLite 数据库，该数据库已经为您设置好了。您可以在database/database.sqlite.

第 2 步：安装 Laravel Breeze

接下来，我们将添加Laravel Breeze，它提供了身份验证的最小实现，包括：

• 登录

• 登记

• 密码重置

• 电子邮件验证

• 密码确认

此外，Breeze 还包括一个简单的个人资料页面，用户可以在其中更新他们的信息。

通过运行添加 Breeze 包：

composer require laravel/breeze --dev

现在，将 Breeze 安装到您的项目中：

php artisan breeze:install

安装过程中，Breeze 会提示您几个选项：

• 我选择React作为前端，但还有一些选择：

  • 刀刃
  • Livewire
  • Vue
  • 仅限 API

• 您可以选择启用深色模式、服务器端渲染 (SSR)、Typescript 和 ESLint .

• 当询问测试框架时，您可以选择 Pest 或 PHPUnit。我将使用 Pest.

该过程完成后，Breeze 将添加身份验证和用户管理所需的所有内容。

完成了！ ？

第 3 步：运行您的应用程序

现在 Breeze 已设置完毕，您的应用程序已准备就绪，您可以再次运行它：

php artisan serve

访问http://localhost:8000/register 创建一个新用户。

您将从一个空的仪表板开始，然后可以导航到您的个人资料页面来编辑您的用户详细信息并更新您的密码。

数据已经存储在您的 SQLite 数据库中，您的应用程序基本上已准备好部署！

结论

通过执行这些步骤，您已经使用 Laravel 和 React 成功引导了一个全栈 Web 应用程序，并完成了身份验证和用户配置文件管理系统。

Breeze 为您提供了一个很好的起点，但从这里您可以专注于添加自定义业务逻辑、改进 UI/UX 或集成第三方服务，同时站在 Laravel 生态系统的肩膀上。