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

核心要點(diǎn)：

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

什麼是Livewire？

Livewire是一個(gè)庫(kù)，允許您使用Blade模板和少量JavaScript構(gòu)建響應(yīng)式動(dòng)態(tài)界面。 “少量”是因?yàn)槲覀冎恍枰帉?xiě)JavaScript來(lái)通過(guò)瀏覽器事件傳遞數(shù)據(jù)並響應(yīng)它們。

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

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

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

Livewire與Vue的比較

Vue一直是Laravel開(kāi)發(fā)者為應(yīng)用添加交互性的首選前端框架。如果您已經(jīng)在使用Vue，那麼學(xué)習(xí)Livewire是可選的。但如果您是Laravel前端開(kāi)發(fā)的新手，並且正在尋找Vue的替代方案，那麼Livewire是一個(gè)不錯(cuò)的選擇。它的學(xué)習(xí)曲線比Vue更平緩，因?yàn)槟饕褂肂lade編寫(xiě)模板文件。

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

應(yīng)用概述

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

您可以訪問(wèn)GitHub倉(cāng)庫(kù)查看此項(xiàng)目的源代碼。

先決條件

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

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

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

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

項(xiàng)目設(shè)置

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

composer create-project laravel/laravel livecrud

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

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

安裝後端依賴項(xiàng)

我們只有一個(gè)後端依賴項(xiàng)，那就是Livewire。使用以下命令安裝它：

composer require livewire/livewire:2.3

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

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

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

// 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();
    });
}

接下來(lái)，更新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,
    ];
}

最後，打開(kāi)database/seeders/DatabaseSeeder.php文件，取消對(duì)創(chuàng)建虛擬用戶的調(diào)用的註釋：

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

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

php artisan migrate
php artisan db:seed

設(shè)置前端依賴項(xiàng)

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

composer require laravel/ui

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

php artisan ui bootstrap

接下來(lái)，將Font Awsome添加到resources/sass/app.scss文件中。默認(rèn)情況下，其中應(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";

完成後，安裝所有依賴項(xiàng)：

npm install @fortawesome/fontawesome-free
npm install

(後續(xù)步驟，由於篇幅限制，將分段輸出，請(qǐng)繼續(xù)提問(wèn)獲取剩餘部分)

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