我最近在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 生態系統的肩膀上。