使用Laravel + React + Inertia + Vite进行SPA环境搭建并测试Laravel Breeze认证的运作

2 年 ago

韵, 科

1 minute

首先

這次我整理了關於Laravel和React的整合Inertia環境的專案建置，以及Laravel Breeze認證的學習結果。

不使用Laravel Sail的Docker环境。

应用程序的配置

フロントエンド：React, TypeScript（or JavaScript）, Inertia.js, vite（ビルド用）

在Laravel环境下搭建前端环境，并通过Inertia.js进行数据的发送和接收。

请注意：
以下是学习内容的输出。
由于我是初学者，如果有任何错误，请指正，我将不胜感激。

这篇文章的目的是什么？

以下内容的输出

LaravelとReactの統合

开发环境

composer 2.2.21

这篇文章的内容 (zhè de

参考资料

创建项目

移動到存放项目的目录，并执行以下命令。

# Laravelプロジェクトを作成
composer create-project --prefer-dist laravel/laravel sample_app
#                                                     ^^^^^^^^^^ 任意のプロジェクト名

请进入项目目录，并执行以下命令。

# Laravel Breezeパッケージをインストール
composer require laravel/breeze --dev

正在进行的事情：

–dev オプションは、Breezeが開発環境でのみ使用されることを意味する

为了设置前端，执行以下命令。

# breezeをインストール
php artisan breeze:install react
#                          ^^^^^ Reactを指定

做的事情：

デフォルト
Inertia.js + Vue.js
Inertia.js + React

認証ビュー、ルート、コントローラなどのファイルが追加される

要学好一门外语，需要掌握以下技巧：

在这里进行TypeScript或JavaScript的选择

如果在没有指定React等的情况下执行上述命令，将在控制台上出现选择界面。

今回のようにコマンド実行にReactを選択した場合
jsx 拡張子（JavaScript）のビューファイルが生成される

コマンド実行ではなくコンソール上でReactを選択した場合
tsx 拡張子（TypeScript）のビューファイルが生成される

2. 安装Inertia（服务器端）

为了在Laravel中使用Inertia.js，执行以下命令。

# inertia-laravelパッケージをインストール
composer require inertiajs/inertia-laravel

目前正在进行的事情：

composer.jsonに、inertiajs/inertia-laravelパッケージの依存関係を追加

3. 安装Inertia（客户端）

为了将Inertia.js引入React应用程序，执行以下命令。

# @inertiajs/inertia-reactパッケージをインストール
npm install @inertiajs/inertia-react

正在进行的事情：

ReactアプリケーションでInertia.jsを使用するためのコンポーネントとフックが提供される

因为项目已经创建好了，所以我会执行它的程序。

# 開発サーバーの起動
npm install
npm run dev

# Laravelサーバーの起動
php artisan serve

4. 数据库的配置

１）在.env文件中追加数据库信息。

// DB情報
DB_CONNECTION=
DB_HOST=
DB_PORT=
DB_DATABASE=
DB_USERNAME=
DB_PASSWORD=

为了防止SQL错误，我们将添加以下代码。


public function boot(): void
{
    \Illuminate\Support\Facades\Schema::defaultStringLength(191);  // この行を追加
}

提示：
如果不添加上述代码，则会出现下面的错误。
请查看参考URL以获取更多详细信息。

参考：https://akamist.com/blog/archives/982

执行迁移并创建数据库。

php artisan migrate

使用Laravel Breeze身份验证验证登录功能的操作确认。

从右上角的“注册”开始，进行用户注册。
用户信息将被记录在用户表中。

提示：
Laravel Breeze通过实现登录等身份验证功能来为您提供支持。
（引自官方网页）

Laravel Breeze是为Laravel最简洁、简单地实现登录、用户注册、密码重置、邮件确认、密码确认等所有认证功能的工具。此外，Breeze还包含一个简单的“个人资料”页面，用户可在该页面上更新姓名、电子邮件地址和密码。

如果您对在web.php中末尾加载的auth.php中的身份验证路由信息感到疑惑，请跟随这里进行进一步的了解。

// 省略
equire __DIR__.'/auth.php';

首先