Laravel Livewire入門

Laravel開發者福音：使用Livewire簡化動態界面構建！本文將指導您如何利用Livewire，這個強大的Laravel全棧框架，輕鬆創建動態交互界面，大幅減少JavaScript代碼量。 Livewire讓您專注於應用功能開發，而不是繁瑣的底層實現。

核心要點：

• Livewire是一個全棧框架，主要使用PHP和Blade模板構建Laravel動態界面，JavaScript代碼極少。
• 本教程將引導您構建一個CRUD應用，演示Livewire如何處理動態UI更新（如搜索和排序），無需頁面重新加載。
• Livewire是Vue.js的絕佳替代方案，尤其適合前端框架新手，學習曲線更平緩，因為它充分利用了您熟悉的Laravel模板。
• 設置過程包括創建新的Laravel項目、設置數據庫、安裝Livewire和其他必要的依賴項。
• Livewire的關鍵特性包括實時驗證、分頁和直接在界面上管理用戶交互（創建、更新和刪除用戶）。
• 教程中還重點介紹了優化技巧，例如使用防抖動技術處理搜索輸入和延遲加載表單提交，以提升性能和用戶體驗。

什麼是Livewire？

Livewire是一個庫，允許您使用Blade模板和少量JavaScript構建響應式動態界面。 “少量”是因為我們只需要編寫JavaScript來通過瀏覽器事件傳遞數據並響應它們。

您可以使用Livewire實現以下功能，無需頁面重新加載：

• 分頁
• 表單驗證
• 通知
• 文件上傳預覽

需要注意的是，Livewire的功能遠不止於此。您可以將其用於更多場景，以上只是一些最常見的應用場景。

Livewire與Vue的比較

Vue一直是Laravel開發者為應用添加交互性的首選前端框架。如果您已經在使用Vue，那麼學習Livewire是可選的。但如果您是Laravel前端開發的新手，並且正在尋找Vue的替代方案，那麼Livewire是一個不錯的選擇。它的學習曲線比Vue更平緩，因為您主要使用Blade編寫模板文件。

有關Livewire和Vue比較的更多信息，請查看“Laravel Livewire vs Vue”。

應用概述

我們將創建一個實時CRUD應用。它本質上是一個無需頁面重新加載的CRUD應用。 Livewire將處理所有更新UI所需的AJAX請求，包括通過搜索字段過濾結果、通過列標題排序以及簡單的分頁（上一頁和下一頁）。創建和編輯用戶將使用Bootstrap模態框。

您可以訪問GitHub倉庫查看此項目的源代碼。

先決條件

本教程假設您具有PHP應用程序開發經驗。 Laravel經驗會有幫助，但不是必需的。如果您只了解純PHP或其他PHP框架，也可以繼續學習。

本教程假設您已在計算機上安裝以下軟件：

• PHP
• MySQL
• NGINX
• Composer
• Node和npm

如果您使用的是Mac，則安裝DBngin和Laravel Valet比安裝MySQL和NGINX更方便。

項目設置

您可以創建一個新的Laravel項目：

composer create-project laravel/laravel livecrud

導航到生成的livecrud文件夾。這將是您在整個教程中執行所有命令的根項目文件夾。

下一步是使用您選擇的數據庫管理工具創建一個MySQL數據庫。將數據庫命名為livecrud。

安裝後端依賴項

我們只有一個後端依賴項，那就是Livewire。使用以下命令安裝它：

composer require livewire/livewire:2.3

注意：我們安裝的是我在創建演示時使用的特定版本。如果您在未來閱讀本文，建議您安裝最新版本。請務必查看GitHub倉庫上的項目變更日誌，確保您沒有錯過任何內容。

設置數據庫

更新創建用戶表的默認遷移，並添加我們將使用的自定義字段：

// database/migrations/<timestamp>_create_users_table.php
</timestamp>public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->enum('user_type', ['admin', 'user'])->default('user'); // add this
        $table->tinyInteger('age'); // add this
        $table->string('address')->nullable(); // add this
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password');
        $table->rememberToken();
        $table->timestamps();
    });
}

接下來，更新database/factories/UserFactory.php文件，並為我們添加的自定義字段提供值：

// database/factories/UserFactory.php
public function definition()
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique()->safeEmail,
        'email_verified_at' => now(),
        'password' => 'yIXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random(10),

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween(18, 60),
        'address' => $this->faker->address,
    ];
}

最後，打開database/seeders/DatabaseSeeder.php文件，取消對創建虛擬用戶的調用的註釋：

// database/seeders/DatabaseSeeder.php
public function run()
{
    \App\Models\User::factory(100)->create();
}

別忘了用您將要使用的測試數據庫更新您的.env文件。在本例中，我將數據庫命名為livecrud。完成後，運行遷移和播種器以填充數據庫：

php artisan migrate
php artisan db:seed

設置前端依賴項

為了簡化操作，我們將使用Laravel scaffold for Bootstrap。為此，您首先需要安裝laravel/ui包：

composer require laravel/ui

接下來，安裝Bootstrap 4。這將在您的webpack.mix.js文件中添加配置，並創建resources/js/app.js和resources/sass/app.scss文件：

php artisan ui bootstrap

接下來，將Font Awsome添加到resources/sass/app.scss文件中。默認情況下，其中應該已經包含字體、變量和bootstrap導入：

// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

// add these:
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";

完成後，安裝所有依賴項：

npm install @fortawesome/fontawesome-free
npm install

(後續步驟，由於篇幅限制，將分段輸出，請繼續提問獲取剩餘部分)

以上是Laravel Livewire入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！