Laravel Livewire
Laravel Livewire
-
Objectifs
- Connaitre Laravel Livewire
-
Présentation
- Laravel Livewire: un framework full-stack pour Laravel
- Livewire est un framework full-stack pour Laravel qui simplifie la création d’interfaces dynamiques, sans quitter le confort de Laravel.
- Laravel Livewire est une bibliothèque qui simplifie la création d’interfaces modernes, réactives et dynamiques en utilisant Laravel Blade comme langage de création de modèles.
- Livewire est un framework full-stack pour le framework Laravel qui simplifie la création d’interfaces dynamiques, sans quitter le confort de Laravel.
- Si vous utilisez livewire avec Laravel, vous ne vous souciez pas d’écrire du code jquery ajax, livewire vous aidera à écrire de manière très simple du code jquery ajax en utilisant PHP sans actualisation de page.La validation Laravel fonctionnera, le formulaire sera soumis, etc.
- Vous pouvez utiliser Livewire pour implémenter les fonctionnalités suivantes, sans recharger la page:
- pagination
- validation de formulaire
- notifications
- aperçu des téléchargements de fichiers
-
Que fait le Laravel Livewire?
- Livewire rend la sortie du composant initial avec la page (comme un Blade include), de cette façon, il est convivial pour le référencement.
- Lorsqu’une interaction se produit, Livewire envoie une requête AJAX au serveur avec les données mises à jour.
- Le serveur restitue le composant et répond avec le nouveau HTML.
- Livewire mute alors intelligemment DOM en fonction des choses qui ont changé.
-
Comment fonctionne Livewire?
- Livewire restitue la sortie du composant initial sur la page – oui, comme le modèle de lame typique rendu par serveur
- Lorsqu’une interaction se produit, Livewire envoie une requête AJAX au serveur avec des données mises à jour
- Le serveur restitue le composant et répond avec du HTML mis à jour
- Livewire mute alors intelligemment le DOM en fonction de ce qui a changé
- Comme vous pouvez le voir, c’est comme avoir votre frontend et votre backend au même endroit, sans avoir besoin de répéter la logique.
-
Quelques Concepts clés de Livewire
-
Activation de Livewire sur une page
- Pour que Livewire fonctionne sur une page, vous devez inclure les styles et scripts Livewire sur chaque page qui en a besoin.
- Habituellement, ceux-ci iraient dans votre modèle de base. Vous feriez cela en utilisant
@livewireStyles
et@livewireScripts
. -
Créer un Livewire component
- Vous créez un composant Livewire en exécutant la commande suivante:
php artisan make:livewire NomComponent
- La commande ci-dessous créera également deux nouveaux fichiers:
app\Http\Livewire\NomComponent.php
et un modèle de vueresources/views/livewire/nomVue.blade.php
. -
Actions Livewire
- Tout comme vous pouvez lier les données du modèle de vue aux propriétés publiques des composants, vous pouvez également mapper les événements côté client aux méthodes de vos composants.
- Par exemple, vous pouvez répondre aux événements de clic, aux événements de keyup et de keydown, etc. à l’aide des méthodes définies dans votre classe de composant.
- Exemple
-
La validation des données
- Livewire rend la validation des données transparente.
- Pour valider les données provenant d’une vue de modèle de formulaire, vous écririez une propriété
$rules
contenant vos règles de validation, comme vous le feriez dans Laravel. - Ensuite, vous appelez le dans la méthode effectuant la validation.
$this→validate()