Laravel Livewire: それとは何か、そしてそれを Web アプリで使用する方法
Livewire は、特にフロントエンド開発を対象とした Laravel エコシステムの中で最も重要なプロジェクトの 1 つです。 Livewire v3 が最近リリースされたので、Livewire とは何なのか、またそのアーキテクチャにどのようなプロジェクトが適合するのかを見てみましょう。
Livewire の特徴は、専用の JavaScript フレームワークを使用せずに「最新の」Web アプリケーションを開発できることです。
Livewire を使用すると、フロントエンドとバックエンドを分離してプロジェクトの複雑さを管理することなく、Vue や React と同等の反応性レベルを提供する Blade コンポーネントを開発できます。 Laravel と Blade テンプレートの範囲内でアプリケーションの開発を続けることができます。
ライブワイヤーの仕組み
Livewire は、Laravel プロジェクトに追加できる Composer パッケージです。次に、適切な Blade ディレクティブを使用して、各 HTML ページ (単一ページ アプリケーションを作成する場合はそのページ) でアクティブ化する必要があります。 Livewire コンポーネントは、PHP クラスと、特定のフロントエンド コンポーネントがどのように動作し、レンダリングされる必要があるかのロジックを含む Blade ファイルで構成されます。
ブラウザが Livewire が使用されているページへのアクセスを要求すると、次のことが起こります:
- ページは、Blade を使用して作成された他のページと同様に、コンポーネントの初期状態でレンダリングされます。
- コンポーネント UI がインタラクションを起動すると、Livewire コンポーネントと発生したインタラクション、およびコンポーネントのステータスを示す適切なルートに対して AJAX 呼び出しが行われます。
- データはコンポーネントの PHP 部分で処理され、インタラクションの結果として新しいレンダリングが実行され、ブラウザーに送り返されます。
- ページの DOM は、サーバーから受信した変更に従って変更されます。
これは Vue や React の動作と非常に似ていますが、この場合、インタラクションに応答する反応性ロジックは JavaScript 側ではなくバックエンドによって管理されます。
ロジックをよりよく理解できるように、以下にこの比較の例を示します。
開発者主導の会社を構築する際の課題について詳しく知りたい場合は、Linkedin または X で私をフォローしてください。
Laravel Livewireのインストール方法
Livewire のインストールは最小限で済みます。 Laravel プロジェクトに Composer パッケージをインストールし、必要な Blade ディレクティブをすべてのページ (またはプロジェクト内のすべての Blade テンプレートの派生元となる共通レイアウト) に追加します。
composer require livewire/livewire
<html>
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
Laravel Livewire コンポーネントの作成方法
Composer パッケージがインストールされると、新しい Artisan make サブコマンドを使用して新しい Livewire コンポーネントを作成できるようになります。各コンポーネントは PHP クラスと Blade ビューで作成されます。
これは、Blade のクラスベースのコンポーネントに似ています。
php artisan make:livewire SpyInput COMPONENT CREATED ? CLASS: app/Http/Livewire/SpyInput.php VIEW: resources/views/livewire/spy-input.blade.php
この例のコンポーネントは、JavaScript コードを記述することなく、HTML 入力フィールドに書き込まれた内容を「スパイ」します。
次に、パブリック プロパティをコンポーネント クラスに挿入します。
// app/Http/Livewire/SpyInput.php
namespace App\Livewire;
use Livewire\Component;
class SpyInput extends Component
{
public string $message;
public function render()
{
return view('livewire.spy-input');
}
}
次のようにコンポーネント ビューを実装します。
// resources/views/livewire/spy-input.blade.php
<div>
<label>Type here:</label>
<input type="text" wire:model="message"/>
<span>You typed: <span>{{ $message }}</span></span>
</div>
そして最後に、Livewire コンポーネントをブレード ビューに配置します。
<html>
<head>
@livewireStyles
</head>
<body>
<livewire:spy-input />
@livewireScripts
</body>
</html>
通常の Blade コンポーネントでは、コンポーネント クラスのすべてのパブリック プロパティがブレード テンプレートに表示されます。したがって、{{ $message }} $message プロパティの値が自動的に表示されます。ただし、通常のクラスベースのコンポーネントでは、これは最初のコンポーネントのレンダリング時にのみ発生します。入力フィールドに何かを入力しても、span タグは何も変更されません。
ただし、Livewire コンポーネントでは、フィールドで Wire:model="message" 属性を使用しました。この属性により、入力フィールドの値が PHP クラスの $message プロパティに確実にリンクされます。入力フィールドに新しい値を書き込むと、その値がサーバーに送信され、$message の値が更新されて新しいレンダリングが実行され、それがフロントエンドに送り返されて、gt;{{ のテキストが更新されます。 $message }}.
ブラウザの開発ツールの [ネットワーク] タブを開くと、キーボードのキーを押すたびに、以下のルートでサーバーが呼び出されることがわかります。
/livewire/message/<COMPONENT-NAME>
各呼び出しに対する応答には、コンポーネント用に新しくレンダリングされた HTML が含まれており、Livewire は古い HTML の代わりにこれをページに挿入します。さまざまなカスタム ワイヤ属性が利用可能です。たとえば、ボタンをクリックしたときにコンポーネント クラスのパブリック メソッドを実行できます。この入札の例は次のとおりです:
<button wire:click="doSomething">Click Here</button>
class SpyInput extends Component
{
public function doSomething()
{
// Your code here…
}
}
doSomething は、Livewire コンポーネントの PHP クラスのパブリック メソッドです。
Integration with other Laravel features
The PHP class connected to the component behaves like any other PHP class in a Laravel project. The only difference is that it uses the mount method instead of the classic __construct class constructor to initialize the public properties of the class.
{{-- Initial assignment of the the $book property in the ShowBook class --}}
<livewire:show-book :book="$book">
class ShowBook extends Component
{
public $title;
public $excerpt;
// "mount" instead of "__constuct"
public function mount(Book $book = null)
{
$this->title = $book->title;
$this->excerpt = $book->excerpt;
}
}
You can also use the protected property $rules to configure the validation restrictions on the data sent from the frontend to the backend. You have to call the validate() method to validate the data:
<form wire:submit.prevent="saveBook">
<input type="text" wire:model="title"/>
@error('title') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="excerpt"/>
@error('excerpt') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="isbn"/>
@error('isbn') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save Book</button>
</form>
class BookForm extends Component
{
public $title;
public $excerpt;
public $isbn;
protected $rules = [
'title' => ['required', 'max:200'],
'isbn' => ['required', 'unique:books', 'size:17'],
'excerpt' => 'max:500'
];
public function saveBook()
{
$validated = $this->validate($this->rules);
Book::create($validated);
return redirect()->to('/books);
}
}
Or you can use PHP Attributes to declare the desired validation rules for a class property:
class BookForm extends Component
{
#[Validate('required|max:200')]
public $title;
#[Validate('required|unique:books|size:17')]
public $isbn;
#[Validate('max:500')]
public $excerpt;
public function saveBook()
{
$this->validate();
Book::create([
'title' => $this->title,
'isbn' => $this->isbn,
'excerpt' => $this->excerpt,
]);
return redirect()->to('/books);
}
}
In general, each Livewire component behaves in the ways that a Laravel developer expects from a PHP class inside a Laravel project. Thus allowing the creation of reactive web interfaces without the need to separate the development projects between Laravel and Vue/React.
Monitor your Laravel application for free
Inspector is a Code Execution Monitoring tool specifically designed for software developers. You don't need to install anything at the server level, just install the Laravel package and you are ready to go.
If you are looking for HTTP monitoring, database query insights, and the ability to forward alerts and notifications into your preferred messaging environment, try Inspector for free. Register your account.
Or learn more on the website: https://inspector.dev
以上がLaravel Livewire: それとは何か、そしてそれを Web アプリで使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7922
15
1652
14
1411
52
1303
25
1249
29
JSON Web Tokens（JWT）とPHP APIでのユースケースを説明してください。
Apr 05, 2025 am 12:04 AM
JWTは、JSONに基づくオープン標準であり、主にアイデンティティ認証と情報交換のために、当事者間で情報を安全に送信するために使用されます。 1。JWTは、ヘッダー、ペイロード、署名の3つの部分で構成されています。 2。JWTの実用的な原則には、JWTの生成、JWTの検証、ペイロードの解析という3つのステップが含まれます。 3. PHPでの認証にJWTを使用する場合、JWTを生成および検証でき、ユーザーの役割と許可情報を高度な使用に含めることができます。 4.一般的なエラーには、署名検証障害、トークンの有効期限、およびペイロードが大きくなります。デバッグスキルには、デバッグツールの使用とロギングが含まれます。 5.パフォーマンスの最適化とベストプラクティスには、適切な署名アルゴリズムの使用、有効期間を合理的に設定することが含まれます。
PHP 8.1の列挙（列挙）とは何ですか？
Apr 03, 2025 am 12:05 AM
php8.1の列挙関数は、指定された定数を定義することにより、コードの明確さとタイプの安全性を高めます。 1）列挙は、整数、文字列、またはオブジェクトであり、コードの読みやすさとタイプの安全性を向上させることができます。 2）列挙はクラスに基づいており、トラバーサルや反射などのオブジェクト指向の機能をサポートします。 3）列挙を比較と割り当てに使用して、タイプの安全性を確保できます。 4）列挙は、複雑なロジックを実装するためのメソッドの追加をサポートします。 5）厳密なタイプのチェックとエラー処理は、一般的なエラーを回避できます。 6）列挙は魔法の価値を低下させ、保守性を向上させますが、パフォーマンスの最適化に注意してください。
セッションのハイジャックはどのように機能し、どのようにPHPでそれを軽減できますか？
Apr 06, 2025 am 12:02 AM
セッションハイジャックは、次の手順で達成できます。1。セッションIDを取得します。2。セッションIDを使用します。3。セッションをアクティブに保ちます。 PHPでのセッションハイジャックを防ぐための方法には次のものが含まれます。1。セッション_regenerate_id（）関数を使用して、セッションIDを再生します。2。データベースを介してストアセッションデータを3。
確固たる原則と、それらがPHP開発にどのように適用されるかを説明してください。
Apr 03, 2025 am 12:04 AM
PHP開発における固体原理の適用には、次のものが含まれます。1。単一責任原則（SRP）：各クラスは1つの機能のみを担当します。 2。オープンおよびクローズ原理（OCP）：変更は、変更ではなく拡張によって達成されます。 3。Lischの代替原則（LSP）：サブクラスは、プログラムの精度に影響を与えることなく、基本クラスを置き換えることができます。 4。インターフェイス分離原理（ISP）：依存関係や未使用の方法を避けるために、細粒インターフェイスを使用します。 5。依存関係の反転原理（DIP）：高レベルのモジュールと低レベルのモジュールは抽象化に依存し、依存関係噴射を通じて実装されます。
PHPでの後期静的結合を説明します（静的：:)。
Apr 03, 2025 am 12:04 AM
静的結合（静的：:) PHPで後期静的結合（LSB）を実装し、クラスを定義するのではなく、静的コンテキストで呼び出しクラスを参照できるようにします。 1）解析プロセスは実行時に実行されます。2）継承関係のコールクラスを検索します。3）パフォーマンスオーバーヘッドをもたらす可能性があります。
REST APIデザインの原則とは何ですか？
Apr 04, 2025 am 12:01 AM
Restapiの設計原則には、リソース定義、URI設計、HTTPメソッドの使用、ステータスコードの使用、バージョンコントロール、およびHATEOASが含まれます。 1。リソースは名詞で表され、階層で維持される必要があります。 2。HTTPメソッドは、GETを使用してリソースを取得するなど、セマンティクスに準拠する必要があります。 3.ステータスコードは、404など、リソースが存在しないことを意味します。 4。バージョン制御は、URIまたはヘッダーを介して実装できます。 5。それに応じてリンクを介してhateoasブーツクライアント操作をブーツします。
PHPで例外を効果的に処理する方法（試して、キャッチ、最後に、スロー）？
Apr 05, 2025 am 12:03 AM
PHPでは、Try、Catch、最後にキーワードをスローすることにより、例外処理が達成されます。 1）TRYブロックは、例外をスローする可能性のあるコードを囲みます。 2）キャッチブロックは例外を処理します。 3）最後にブロックは、コードが常に実行されることを保証します。 4）スローは、例外を手動でスローするために使用されます。これらのメカニズムは、コードの堅牢性と保守性を向上させるのに役立ちます。
PHPの匿名クラスとは何ですか？また、いつ使用できますか？
Apr 04, 2025 am 12:02 AM
PHPの匿名クラスの主な機能は、1回限りのオブジェクトを作成することです。 1.匿名クラスでは、名前のないクラスをコードで直接定義することができます。これは、一時的な要件に適しています。 2。クラスを継承したり、インターフェイスを実装して柔軟性を高めることができます。 3.使用時にパフォーマンスとコードの読みやすさに注意し、同じ匿名のクラスを繰り返し定義しないようにします。
