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
@livewireStyleset@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.phpet 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é
$rulescontenant vos règles de validation, comme vous le feriez dans Laravel. - Ensuite, vous appelez le dans la méthode effectuant la validation.
$this→validate()
//app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>@yield</title>
@livewireStyles <<===================
</head>
<body>
@yield ( 'contenu' )
@livewireScripts <<===================
</body>
</html><button wire:click="doSomething">Do Something</button>
<input wire:keydown.enter="doSomething">
<form wire:submit.prevent="save">
...
<button>Save</button>
</form>...
class CreatePost extends Component
{
public $title, $body;
public $success;
protected $rules = [
'title' => 'required|string|max:220',
'body' => 'required'
];
public function render()
{
return view('livewire.create-post')
->extends('layouts.app')
->section('content');
}
public function create(){
$this->validate();
Post::create([
'title' => $this->title,
'slug' => Str::slug($this->title),
'body' => $this->body,
'author_id' => auth()->id()
]);
$this->success = true;
}
}
// livewire/create-post
<div class="container">
@if ($success)
<div class="alert alert-success">
Post has been created successfully
</div>
@endif
<form wire:submit.prevent="create">
<div class="form-group">
<label for="Post title">Post title</label>
<input wire:model="title" type="text" name="title" id="title" class="form-control" placeholder="Title of the post">
@error('title') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="Post body">Post Body</label>
<textarea name="body" id="body" placeholder="Body of post here..." wire:model="body" class="form-control"></textarea>
@error('body') <span class="error">{{ $message }}</span> @enderror
</div>
<div>
<button class="btn btn-primary" type="submit">Publish</button>
</div>
</form>
</div>