Laravel Livewire: Was es ist und wie Sie es in Ihrer Web-App verwenden

Livewire ist eines der wichtigsten Projekte im Laravel-Ökosystem, das speziell auf die Frontend-Entwicklung ausgerichtet ist. Livewire v3 wurde kürzlich veröffentlicht. Lassen Sie uns also erkunden, was Livewire ist und welche Art von Projekten zu seiner Architektur passen.

Die Besonderheit von Livewire besteht darin, dass es die Entwicklung einer „modernen“ Webanwendung ermöglicht, ohne dass dedizierte JavaScript-Frameworks verwendet werden müssen.

Mit Livewire ist es möglich, Blade-Komponenten zu entwickeln, die ein Maß an Reaktivität bieten, das dem von Vue oder React entspricht, ohne dass die Komplexität eines Projekts mit einem entkoppelten Frontend und Backend verwaltet werden muss. Sie können Ihre Anwendung innerhalb der Grenzen der Laravel- und Blade-Vorlagen weiterentwickeln.

So funktioniert Livewire

Livewire ist ein Composer-Paket, das Sie zu einem Laravel-Projekt hinzufügen können. Es muss dann auf jeder HTML-Seite (oder der Seite, falls Sie eine Single Page Application erstellen möchten) mit entsprechenden Blade-Anweisungen aktiviert werden. Livewire-Komponenten bestehen aus einer PHP-Klasse und einer Blade-Datei, die die Logik für die Funktionsweise einer bestimmten Frontend-Komponente enthält und gerendert werden muss.

Wenn der Browser auffordert, auf eine Seite zuzugreifen, auf der Livewire verwendet wird, passiert Folgendes:

• Die Seite wird mit den Anfangszuständen der Komponente gerendert, wie jede mit Blade erstellte Seite;
• Wenn die Benutzeroberfläche der Komponente eine Interaktion auslöst, wird ein AJAX-Aufruf an eine entsprechende Route getätigt, die die Livewire-Komponente und die aufgetretene Interaktion sowie den Status der Komponente angibt;
• Die Daten werden im PHP-Teil der Komponente verarbeitet, der als Ergebnis der Interaktion das neue Rendering durchführt und es an den Browser zurücksendet;
• Der DOM der Seite wird entsprechend den vom Server empfangenen Änderungen geändert.

Es ist sehr ähnlich zu dem, was Vue und React tun, aber in diesem Fall wird die Reaktivitätslogik zur Reaktion auf eine Interaktion vom Backend und nicht von der Javascript-Seite verwaltet.

Um Ihnen zu helfen, die Logik besser zu verstehen, zeige ich Ihnen unten ein Beispiel für diesen Vergleich.

Wenn Sie mehr über die Herausforderungen beim Aufbau eines entwicklerorientierten Unternehmens erfahren möchten, können Sie mir auf LinkedIn oder X folgen.

So installieren Sie Laravel Livewire

Die Livewire-Installation ist absolut minimal. Installieren Sie das Composer-Paket in Ihrem Laravel-Projekt und fügen Sie die erforderlichen Blade-Anweisungen zu allen Seiten hinzu (oder zum gemeinsamen Layout, von dem alle Blade-Vorlagen im Projekt abgeleitet sind).

composer require livewire/livewire

    ...

    @livewireStyles


    ...

    @livewireScripts

So erstellen Sie eine Laravel Livewire-Komponente

Sobald das Composer-Paket installiert ist, steht ein neuer Artisan-Unterbefehl „make“ zur Verfügung, um eine neue Livewire-Komponente zu erstellen. Jede Komponente wird mit einer PHP-Klasse und einer Blade-Ansicht erstellt.

Es ähnelt den klassenbasierten Komponenten von Blade.

php artisan make:livewire SpyInput    
COMPONENT CREATED ?

CLASS: app/Http/Livewire/SpyInput.php
VIEW: resources/views/livewire/spy-input.blade.php

Die Komponente in diesem Beispiel „spioniert“ aus, was in ein HTML-Eingabefeld geschrieben wird, ohne dass JavaScript-Code geschrieben werden muss.

Wir fügen dann eine öffentliche Eigenschaft in die Komponentenklasse ein:

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

Implementieren Sie die Komponentenansicht wie folgt:

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

Und schließlich platzieren Sie die Livewire-Komponente in einer Blade-Ansicht:

    @livewireStyles



    <spy-input></spy-input>

    @livewireScripts

In einer normalen Blade-Komponente sind alle öffentlichen Eigenschaften der Komponentenklasse in der Blade-Vorlage sichtbar. Also in {{ $message }} Der Wert der Eigenschaft $message wird automatisch angezeigt. In einer normalen klassenbasierten Komponente geschieht dies jedoch nur beim ersten Rendern der Komponente. Wenn Sie etwas in das Eingabefeld eingeben, ändert sich nichts am Span-Tag.

In der Livewire-Komponente haben wir jedoch das Attribut „wire:model="message" im Feld verwendet. Dieses Attribut stellt sicher, dass der Wert des Eingabefelds mit der Eigenschaft $message in der PHP-Klasse verknüpft ist. Wenn Sie den neuen Wert in das Eingabefeld schreiben, wird er an den Server gesendet, der den Wert von $message aktualisiert, ein neues Rendering durchführt und ihn an das Frontend zurücksendet, das dann den Text in {{ aktualisiert. $message }}.

Wenn wir die Registerkarte „Netzwerk“ der Entwicklungstools des Browsers öffnen, werden wir feststellen, dass bei jedem Tastendruck auf der Tastatur ein Anruf an den Server auf der folgenden Route erfolgt:

/livewire/message/<component-name>
</component-name>

Die Antwort auf jeden Aufruf enthält den neuen gerenderten HTML-Code für die Komponente, den Livewire anstelle des alten in die Seite einfügt. Es stehen verschiedene benutzerdefinierte Drahtattribute zur Verfügung. Beispielsweise können Sie beim Klicken auf eine Schaltfläche eine öffentliche Methode der Komponentenklasse ausführen. Hier ist ein Beispiel für dieses Gebot:

<button wire:click="doSomething">Click Here</button>

class SpyInput extends Component
{
    public function doSomething()
    {
        // Your code here…
    }
}

wobei doSomething eine öffentliche Methode der PHP-Klasse der Livewire-Komponente ist.

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 --}}
<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;
    }
}
</show-book>

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:

@error('title') {{ $message }} @enderror @error('excerpt') {{ $message }} @enderror @error('isbn') {{ $message }} @enderror Save Book

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

Das obige ist der detaillierte Inhalt vonLaravel Livewire: Was es ist und wie Sie es in Ihrer Web-App verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!