Laravel開發(fā)者福音：使用Livewire簡化動態(tài)界面構(gòu)建！本文將指導(dǎo)您如何利用Livewire，這個強大的Laravel全棧框架，輕松創(chuàng)建動態(tài)交互界面，大幅減少JavaScript代碼量。 Livewire讓您專注于應(yīng)用功能開發(fā)，而不是繁瑣的底層實現(xiàn)。

核心要點：

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

什么是Livewire？

Livewire是一個庫，允許您使用Blade模板和少量JavaScript構(gòu)建響應(yīng)式動態(tài)界面?！吧倭俊笔且驗槲覀冎恍枰帉慗avaScript來通過瀏覽器事件傳遞數(shù)據(jù)并響應(yīng)它們。

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

• 分頁
• 表單驗證
• 通知
• 文件上傳預(yù)覽

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

Livewire與Vue的比較

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

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

應(yīng)用概述

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

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

先決條件

本教程假設(shè)您具有PHP應(yīng)用程序開發(fā)經(jīng)驗。Laravel經(jīng)驗會有幫助，但不是必需的。如果您只了解純PHP或其他PHP框架，也可以繼續(xù)學習。

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

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

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

項目設(shè)置

您可以創(chuàng)建一個新的Laravel項目：

composer create-project laravel/laravel livecrud

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

下一步是使用您選擇的數(shù)據(jù)庫管理工具創(chuàng)建一個MySQL數(shù)據(jù)庫。將數(shù)據(jù)庫命名為livecrud。

安裝后端依賴項

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

composer require livewire/livewire:2.3

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

設(shè)置數(shù)據(jù)庫

更新創(chuàng)建用戶表的默認遷移，并添加我們將使用的自定義字段：

// 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文件，取消對創(chuàng)建虛擬用戶的調(diào)用的注釋：

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

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

php artisan migrate
php artisan db:seed

設(shè)置前端依賴項

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

composer require laravel/ui

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

php artisan ui bootstrap

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

// 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

(后續(xù)步驟，由于篇幅限制，將分段輸出，請繼續(xù)提問獲取剩余部分)

以上是Laravel Livewire入門的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！