Début avec Laravel Livewire

Bonne nouvelle pour les développeurs de Laravel: Utilisez Livewire pour simplifier la construction d'interface dynamique! Cet article vous guidera comment utiliser LiveWire, ce puissant framework Laravel Full Stack, créera facilement des interfaces interactives dynamiques et réduit considérablement la quantité de code JavaScript. LiveWire vous permet de vous concentrer sur le développement des fonctions d'application plutôt que sur les implémentations sous-jacentes fastidieuses.

Points de base:

• Livewire est un cadre complet qui utilise principalement des modèles PHP et Blade pour construire des interfaces dynamiques Laravel, et a très peu de code JavaScript.
• Ce tutoriel vous guidera à travers la création d'une application CRUD qui montre comment Livewire gère les mises à jour dynamiques de l'interface utilisateur (telles que la recherche et le tri) sans rechargement de page.
• Livewire est une excellente alternative à Vue.js, en particulier pour les débutants de framework frontal, avec une courbe d'apprentissage plus fluide car elle tire le meilleur parti des modèles Laravel que vous connaissez.
• Le processus de configuration comprend la création d'un nouveau projet Laravel, la configuration d'une base de données, l'installation de LiveWire et d'autres dépendances nécessaires.
• Les fonctionnalités clés de LiveWire incluent la vérification, la pagination et la gestion des interactions utilisateur directement sur l'interface (création, mise à jour et supprimer les utilisateurs).
Les techniques d'optimisation sont également mises en évidence dans les didacticiels
• , tels que l'utilisation de la technologie anti-titulaire pour traiter les entrées de recherche et retardé les soumissions de formulaire de charge pour améliorer les performances et l'expérience utilisateur.

Qu'est-ce que Livewire?

Livewire est une bibliothèque qui vous permet de créer des interfaces dynamiques réactives à l'aide de modèles de lame et une petite quantité de JavaScript. "Small" est parce que nous n'avons qu'à écrire JavaScript pour transmettre des données via des événements du navigateur et à les répondre.

Vous pouvez utiliser LiveWire pour implémenter les fonctionnalités suivantes sans rechargement de page:

• pagination
• Vérification du formulaire
• Notification
• Aperçu du téléchargement de fichiers

Il convient de noter que les fonctions de Livewire sont bien plus que cela. Vous pouvez l'utiliser pour plus de scénarios, et ce qui précède ne sont que quelques-uns des scénarios les plus courants.

Comparaison de Livewire vs Vue

Vue a toujours été le cadre frontal préféré pour les développeurs de Laravel pour ajouter de l'interactivité à leurs applications. Si vous utilisez déjà Vue, l'apprentissage de Livewire est facultatif. Mais si vous êtes nouveau au développement frontal de Laravel et que vous recherchez une alternative à Vue, Livewire est une excellente option. Sa courbe d'apprentissage est plus plate que Vue, car vous utilisez principalement la lame pour écrire des fichiers de modèle.

Pour plus d'informations sur la comparaison de Livewire et Vue, consultez "Laravel Livewire vs Vue".

Présentation de l'application

Nous créerons une application CRUD en temps réel. Il s'agit essentiellement d'une application crud qui ne nécessite pas de rechargement de la page. LiveWire gérera toutes les demandes AJAX requises pour mettre à jour l'interface utilisateur, y compris le filtrage des résultats via des champs de recherche, le tri par des titres de colonne et la pagination simple (précédent et suivant). La création et la modification des utilisateurs utiliseront la boîte modale bootstrap.

Vous pouvez visiter le référentiel GitHub pour afficher le code source de ce projet.

Prérequis

Ce tutoriel suppose que vous avez de l'expérience dans le développement des applications PHP. L'expérience Laravel sera utile, mais pas requise. Si vous ne connaissez que PHP pur ou d'autres frameworks PHP, vous pouvez également continuer à apprendre.

Ce tutoriel suppose que vous avez installé le logiciel suivant sur votre ordinateur:

• php
• mysql
• nginx
• Composer
• nœud et npm

Si vous utilisez un Mac, l'installation de DBNGIN et Laravel Valet est plus pratique que l'installation de MySQL et Nginx.

Paramètres du projet

Vous pouvez créer un nouveau projet Laravel:

composer create-project laravel/laravel livecrud

Accédez au dossier Livecrud généré. Ce sera le dossier Root Project où vous exécutez toutes les commandes tout au long du tutoriel.

L'étape suivante consiste à créer une base de données MySQL à l'aide de l'outil de gestion de la base de données de votre choix. Nommez la base de données Livecrud.

Installation des dépendances backend

Nous n'avons qu'une seule dépendance backend, c'est-à-dire Livewire. L'installez avec la commande suivante:

composer require livewire/livewire:2.3

Remarque: Nous avons installé une version spécifique que j'ai utilisée lors de la création de la démo. Si vous lisez cet article dans le futur, il est recommandé d'installer la dernière version. Assurez-vous de consulter le connexion du projet de projet sur le référentiel GitHub pour vous assurer que vous n'avez rien manqué.

Configurer la base de données

Mettez à jour la migration par défaut pour créer des tables d'utilisateurs et ajouter les champs personnalisés que nous utiliserons:

// database/migrations/<timestamp>_create_users_table.php
</timestamp>public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->enum('user_type', ['admin', 'user'])->default('user'); // add this
        $table->tinyInteger('age'); // add this
        $table->string('address')->nullable(); // add this
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password');
        $table->rememberToken();
        $table->timestamps();
    });
}

Ensuite, mettez à jour le fichier de base de données / usine / userfactory.php et fournissez la valeur des champs personnalisés que nous avons ajoutés:

// database/factories/UserFactory.php
public function definition()
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique()->safeEmail,
        'email_verified_at' => now(),
        'password' => 'yIXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random(10),

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween(18, 60),
        'address' => $this->faker->address,
    ];
}

Enfin, ouvrez le fichier de base de données / Seersrs / DatabaseSeseder.php et décommentez l'appel pour créer l'utilisateur virtuel:

// database/seeders/DatabaseSeeder.php
public function run()
{
    \App\Models\User::factory(100)->create();
}

N'oubliez pas de mettre à jour votre fichier .env avec la base de données de test que vous utiliserez. Dans ce cas, j'ai nommé la base de données Livecrud. Une fois terminé, exécutez la migration et le semence pour remplir la base de données:

php artisan migrate
php artisan db:seed

Définir les dépendances frontales

Pour simplifier les opérations, nous utiliserons un échafaudage Laravel pour bootstrap. Pour ce faire, vous devez d'abord installer le package Laravel / UI:

composer require laravel/ui

Ensuite, installez Bootstrap 4. Cela ajoutera une configuration dans votre fichier webpack.mix.js et créera des fichiers Resources / js / app.js et ressources / sass / app.scss:

php artisan ui bootstrap

Ensuite, ajoutez Font Awsome au fichier Resources / sass / app.scsss. Par défaut, il doit déjà contenir des polices, des variables et des importations bootstrap:

// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

// add these:
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";

Après avoir terminé, installez toutes les dépendances:

npm install @fortawesome/fontawesome-free
npm install

(étapes suivantes, en raison des limites de l'espace, vous serez sorti en segments. Veuillez continuer à poser des questions pour obtenir le reste)

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!