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中文网其他相关文章！