Laravel Livewireを始めましょう

Laravel開発者にとって朗報：Livewireを使用して、動的インターフェイス構造を簡素化してください！この記事では、この強力なLaravelフルスタックフレームワークであるLivewireの使用方法を導き、動的なインタラクティブなインターフェイスを簡単に作成し、JavaScriptコードの量を大幅に削減します。 LiveWireを使用すると、退屈な基礎となる実装ではなく、アプリケーション機能開発に集中できます。

コアポイント：

LiveWireは、主にPHPとBladeテンプレートを使用してLaravel Dynamic Interfacesを構築するフルスタックフレームワークであり、JavaScriptコードはほとんどありません。
• このチュートリアルでは、ライブワイヤーがページのリロードなしで動的なUIの更新（検索やソートなど）をどのように処理するかを示すCRUDアプリの構築を説明します。
• Livewireは、特にフロントエンドフレームワークの初心者のためのVue.jsの優れた代替品であり、馴染みのあるLaravelテンプレートを最大限に活用するため、よりスムーズな学習曲線を備えています。
• セットアッププロセスには、新しいLaravelプロジェクトの作成、データベースのセットアップ、Livewireおよびその他の必要な依存関係のインストールが含まれます。
LiveWireの主要な機能には、インターフェイス上のリアルタイム検証、ページング、およびユーザーインタラクションの直接の管理（ユーザーの作成、更新、削除）が含まれます。
• 最適化手法は、アンチシェイクテクノロジーを使用して検索入力を処理し、パフォーマンスとユーザーエクスペリエンスを改善するためにロードフォームの提出を遅らせるなど、
チュートリアルでも強調されています。
• Livewireとは何ですか？

LiveWireは、ブレードテンプレートと少量のJavaScriptを使用して、レスポンシブな動的インターフェイスを構築できるライブラリです。 「Small」は、ブラウザイベントを介してデータを渡して応答するためにJavaScriptを作成するだけであるためです。

LiveWireを使用して、ページのリロードなしで次の機能を実装できます。

ページネーション

フォーム検証

• 通知
• ファイルアップロードプレビュー
Livewireの機能はそれ以上のものであることに注意する必要があります。より多くのシナリオに使用できます。上記は、最も一般的なシナリオのほんの一部です。

Livewire vs. Vue

の比較

Vueは、Laravel開発者がアプリケーションに互換性を追加するための好ましいフロントエンドフレームワークでした。すでにVUEを使用している場合は、Livewireを学習することはオプションです。しかし、Laravelのフロントエンド開発が初めてで、Vueの代替品を探している場合、Livewireは素晴らしい選択肢です。主にブレードを使用してテンプレートファイルを作成するため、その学習曲線はVueよりも平らです。 LivewireとVueの比較の詳細については、「Laravel Livewire vs Vue」をご覧ください。

アプリケーションの概要

リアルタイムのCRUDアプリケーションを作成します。それは本質的にページのリロードを必要としないCRUDアプリケーションです。 LiveWireは、検索フィールドを介した結果のフィルタリング、列のタイトルごとの並べ替え、Simple Pagination（前後）など、UIの更新に必要なすべてのAJAXリクエストを処理します。ユーザーの作成と編集では、ブートストラップモーダルボックスが使用されます。

GitHubリポジトリにアクセスして、このプロジェクトのソースコードを表示できます。

前提条件 このチュートリアルは、次のソフトウェアをコンピューターにインストールしたことを前提としています。

php

• mysql
• nginx
• 作曲家
• ノードとnpm
MACを使用している場合、DBNGINとLARAVEL VALETのインストールは、MySQLとNginxをインストールするよりも便利です。

プロジェクトの設定

新しいLaravelプロジェクトを作成できます：

生成されたLiveCrudフォルダーに移動します。これは、チュートリアル全体ですべてのコマンドを実行するルートプロジェクトフォルダーになります。

composer create-project laravel/laravel livecrud

次のステップは、選択したデータベース管理ツールを使用してMySQLデータベースを作成することです。データベースLiveCrudに名前を付けます。

バックエンド依存関係のインストール

バックエンド依存関係は1つだけです。それはLivewireです。次のコマンドでインストールしてください：

composer require livewire/livewire:2.3

注：デモを作成するときに使用した特定のバージョンをインストールしました。将来この記事を読む場合は、最新バージョンをインストールすることをお勧めします。 GitHubリポジトリのプロジェクト変更ログをチェックして、何も見逃していないことを確認してください。

データベースを設定します

デフォルトの移行を更新してユーザーテーブルを作成し、使用するカスタムフィールドを追加します。

次に、データベース/工場/userfactory.phpファイルを更新し、追加したカスタムフィールドに値を提供します。

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

最後に、データベース/シーダー/databaseseeder.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,
    ];
}

使用するテストデータベースで.envファイルを更新することを忘れないでください。この場合、データベースLiveCrudに名前を付けました。完了したら、移行とシーダーを実行してデータベースを入力します。

フロントエンドの依存関係を設定

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

操作を簡素化するには、BootstrapにLaravel足場を使用します。これを行うには、最初にlaravel/uiパッケージをインストールする必要があります：

php artisan migrate
php artisan db:seed

次に、ブートストラップ4をインストールします。これにより、webpack.mix.jsファイルに構成が追加され、リソース/js/app.jsとsass/app.scssファイルを作成します：

次に、resources/sass/app.scssファイルにfonsomeを追加します。デフォルトでは、フォント、変数、およびブートストラップのインポートを既に含める必要があります。

composer require laravel/ui

終了後、すべての依存関係をインストールしてください：

php artisan ui bootstrap

（次のステップ、スペースの制限により、セグメントに出力されます。残りを得るために質問し続けてください）

以上がLaravel Livewireを始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。