recherche

Maison >développement back-end >tutoriel php >Laravel Livewire : qu'est-ce que c'est et comment l'utiliser dans votre application Web

Laravel Livewire : qu'est-ce que c'est et comment l'utiliser dans votre application Web

WBOY
WBOYoriginal
2024-09-12 10:18:041116parcourir

Livewire est l'un des projets les plus importants de l'écosystème Laravel spécifiquement destiné au développement frontend. Livewire v3 a été récemment publié, explorons donc ce qu'est Livewire et quels types de projets correspondent à son architecture.

La particularité de Livewire est qu'il permet le développement d'une application web "moderne" sans avoir besoin d'utiliser des frameworks JavaScript dédiés.

Avec Livewire il est possible de développer des composants Blade offrant un niveau de réactivité égal à celui proposé par Vue ou React, sans avoir besoin de gérer la complexité d'un projet avec un frontend et un backend découplés. Vous pouvez continuer à développer votre application dans les limites des modèles Laravel et Blade.

Comment fonctionne Livewire

Livewire est un package Composer que vous pouvez ajouter à un projet Laravel. Il doit ensuite être activé sur chaque page HTML (ou la page, au cas où vous souhaiteriez créer une application monopage) à l'aide des directives Blade appropriées. Les composants Livewire se composent d'une classe PHP et d'un fichier Blade qui contient la logique de fonctionnement d'un composant frontal spécifique et il doit être rendu.

Lorsque le navigateur demande à accéder à une page où Livewire est utilisé, ce qui suit se produit :

  • La page est rendue avec les états initiaux du composant, comme toute page créée avec Blade ;
  • Lorsque l'interface utilisateur du composant déclenche une interaction, un appel AJAX est effectué vers une route appropriée indiquant le composant Livewire et l'interaction qui s'est produite, ainsi que l'état du composant ;
  • Les données sont traitées dans la partie PHP du composant, qui effectue le nouveau rendu suite à l'interaction et le renvoie au navigateur ;
  • Le DOM de la page est modifié en fonction des modifications reçues du serveur.

C'est très similaire à ce que font Vue et React, mais dans ce cas la logique de réactivité pour répondre à une interaction est gérée par le backend et non du côté javascript.

Pour vous aider à mieux comprendre la logique, je vais vous montrer un exemple de cette comparaison ci-dessous.

Si vous souhaitez en savoir plus sur les défis liés à la création d'une entreprise axée sur les développeurs, vous pouvez me suivre sur Linkedin ou X.

Comment installer Laravel Livewire

L'installation Livewire est absolument minime. Installez le package Composer dans votre projet Laravel et ajoutez les directives Blade nécessaires à toutes les pages (ou à la mise en page commune dont sont dérivés tous les modèles Blade du projet).

composer require livewire/livewire

<html>
<head>
    ...

    @livewireStyles
</head>
<body>
    ...

    @livewireScripts
</body>
</html>

Comment créer un composant Laravel Livewire

Une fois le package Composer installé, une nouvelle sous-commande Artisan make est disponible pour créer un nouveau composant Livewire. Chaque composant sera réalisé avec une classe PHP et une vue Blade.

C'est similaire aux composants basés sur les classes de Blade.

php artisan make:livewire SpyInput    
COMPONENT CREATED ?

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

Le composant de cet exemple « espionnera » ce qui est écrit dans un champ de saisie HTML, sans avoir besoin d'écrire du code JavaScript.

Nous insérons ensuite une propriété publique dans la classe du composant :

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

Implémentez la vue des composants comme suit :

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

Et enfin, placez le composant Livewire dans une vue lame :

<html>
<head>
    @livewireStyles
</head>
<body>

    <livewire:spy-input />

    @livewireScripts
</body>
</html>

Dans un composant Blade normal, toutes les propriétés publiques de la classe de composant sont visibles dans le modèle Blade. Donc dans {{ $message }} la valeur de la propriété $message sera automatiquement affichée. Cependant, dans un composant normal basé sur une classe, cela ne se produit que lors du rendu du premier composant. Si vous tapez quelque chose dans le champ de saisie, rien ne change dans la balise span.

Dans le composant Livewire, cependant, nous avons utilisé l'attribut wire:model="message" dans le champ. Cet attribut garantit que la valeur du champ de saisie est liée à la propriété $message dans la classe PHP. Lorsque vous écrivez la nouvelle valeur dans le champ de saisie, elle est envoyée au serveur, qui met à jour la valeur de $message et effectue un nouveau rendu, la renvoyant au frontend qui met ensuite à jour le texte dans {{ $message }}.

En ouvrant l'onglet Réseau des outils de développement du navigateur, nous remarquerons qu'à chaque appui sur une touche du clavier fait un appel au serveur sur le parcours ci-dessous :

/livewire/message/<COMPONENT-NAME>

La réponse à chaque appel contient le nouveau HTML rendu pour le composant, que Livewire insérera dans la page à la place de l'ancien. Divers attributs de fil personnalisés sont disponibles. Par exemple vous pouvez exécuter une méthode publique de la classe du composant en cliquant sur un bouton. Voici un exemple de cette biding :

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

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

où doSomething est une méthode publique de la classe PHP du composant Livewire.

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: What it is, and how to use it in your web app

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript laravel composer ajax html if for try register continue using class public protected finally Attribute Property constructor dom this input database kind web app http https ui Access
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Retournements de bits minimum pour convertir le nombreArticle suivant：Retournements de bits minimum pour convertir le nombre

Articles Liés

Voir plus