Tutoriel de l'application à page unique Laravel Vue.js (SPA)

Les applications à une page (spas) peuvent être construites à l'aide de Laravel et Vue.js. 1) Définissez le routage API et le contrôleur dans Laravel pour traiter la logique des données. 2) Créez un frontal composé dans Vue.js pour réaliser l'interface utilisateur et l'interaction des données. 3) Configurez les COR et utilisez Axios pour l'interaction des données. 4) Utilisez Vue Router pour implémenter la gestion du routage et améliorer l'expérience utilisateur.

introduction

Dans le développement Web moderne, les applications à page unique (SPA) sont devenues le choix grand public. Ils offrent une expérience utilisateur fluide et un processus de développement efficace. Aujourd'hui, nous plongerons dans la façon de construire un spa en utilisant Laravel et Vue.js. Grâce à cet article, vous apprendrez à utiliser Laravel comme API backend, combiné avec le cadre frontal Vue.js pour créer une application à une page moderne.

Examen des connaissances de base

Avant de commencer, passons rapidement en revue les bases de Laravel et Vue.js. Laravel est un cadre basé sur PHP qui offre des fonctionnalités puissantes et une syntaxe élégante, qui est parfaite pour construire des API RESTful. Vue.js est un cadre JavaScript progressif qui se concentre sur la création d'interfaces utilisateur, en particulier adapté au développement de spas.

Si vous n'êtes pas familier avec ces deux cadres, il est recommandé d'en apprendre d'abord les bases. Les concepts de base de Laravel incluent le routage, les contrôleurs, les modèles et la migration, tandis que les concepts principaux de Vue.js comprennent des composants, des modèles et une gestion de l'État.

Analyse du concept de base ou de la fonction

Laravel en tant qu'API backend

La fonction principale de Laravel en tant qu'API backend est de traiter la logique des données et de fournir des interfaces de données. Avec Laravel, nous pouvons facilement créer des API RESTfuls pour interagir avec les données frontales.

 // routes / api.php
Route :: Get ('/ Users', 'userController @ index');
Route :: Post ('/ Users', 'userController @ Store');

// app / http / contrôlers / userController.php
Namespace App \ Http \ Controllers;

Utiliser App \ User;
Utiliser illuminate \ http \ request;

Class UserController étend le contrôleur
{
    Index de fonction publique ()
    {
        RETOUR UTILISATEUR :: All ();
    }

    Magasin de fonctions publiques (demande $ demande)
    {
        $ user = new User ();
        $ user-> name = $ request-> input ('name');
        $ user-> email = $ request-> entrée ('e-mail');
        $ user-> sauver ();
        retourner $ utilisateur;
    }
}

Cet exemple montre comment définir le routage API et le contrôleur dans Laravel. De cette façon, nous pouvons facilement gérer les données et les fournir à l'avant.

Vue.js comme cadre frontal

La fonction principale de Vue.js est de créer une interface utilisateur et de gérer la logique frontale. Grâce à Vue.js, nous pouvons créer des applications frontales composantes pour réaliser des mises à jour dynamiques de données et l'interaction utilisateur.

 // src / composants / userList.vue
<mpelate>
  <div>
    <h1> Liste d&#39;utilisateurs </h1>
    <ul>
      <li v-for = "User dans les utilisateurs": key = "user.id"> {{user.name}} - {{user.email}} </li>
    </ul>
    <form @ soumed.prevent = "addUser">
      <entrée v-model = "newuser.name" placeholder = "name" />
      <entrée v-model = "newuser.email" placeholder = "e-mail" />
      <Button Type = "Soumider"> Ajouter un utilisateur </fton
    </ form>
  </div>
</ template>

<cript>
Exporter par défaut {
  données() {
    retour {
      utilisateurs: [],
      NewUser: {
        nom: &#39;&#39;,
        e-mail: &#39;&#39;
      }
    };
  },
  monté () {
    this.fetchusers ();
  },
  Méthodes: {
    fetchusers () {
      fetch (&#39;/ api / utilisateurs&#39;)
        .Then (Response => Response.json ())
        .Then (data => {
          this.users = data;
        });
    },
    addUser () {
      fetch (&#39;/ api / utilisateurs&#39;, {
        Méthode: «Post»,
        En-têtes: {
          «Contenu-Type»: «Application / JSON»
        },
        corps: json.stringify (this.newuser)
      })
        .Then (Response => Response.json ())
        .Then (data => {
          this.users.push (données);
          this.newuser.name = &#39;&#39;;
          this.newuser.email = &#39;&#39;;
        });
    }
  }
};
</cript>

Cet exemple montre comment créer un composant de liste d'utilisateurs dans Vue.js et interagir avec le backend via l'API.

Exemple d'utilisation

Utilisation de base

Dans l'usage de base, nous devons nous assurer que Laravel et Vue.js peuvent interagir correctement. Tout d'abord, nous devons configurer les COR dans Laravel afin que le frontal puisse accéder à l'API.

 // app / http / middleware / cors.php
namespace app \ http \ middleware;

Utiliser la fermeture;

Cors de classe
{
    Poignée de la fonction publique ($ demande, fermeture $ suivant)
    {
        retourner $ suivant (demande $)
            -> En-tête ('Access-Control-Allow-Origin', '*')
            -> En-tête («Access-Control-Allow-Methods», «Get, Publier, mettre, Supprimer, Options»)
            -> En-tête («Access-Control-allow-Headers», «Content-Type, Authorization»);
    }
}

Ensuite, nous devons utiliser Axios dans Vue.js pour envoyer des demandes HTTP.

 // src / main.js
Importer Vue à partir de «vue»;
Importer l'application à partir de './app.vue';
importer axios à partir de «Axios»;
Importer des Vueaxios à partir de «Vue-axios»;

Vue.use (Vueaxios, axios);

Nouveau Vue ({
  rendu: h => h (app)
}). $ mont ('# app');

De cette façon, nous pouvons facilement interagir avec les données entre les extrémités avant et arrière.

Utilisation avancée

Dans une utilisation avancée, nous pouvons utiliser Vue Router pour implémenter la gestion de routage pour créer un spa plus complexe.

 // src / router / index.js
Importer Vue à partir de «vue»;
Importer Vuerouter de «Vue-Router»;
Importer UserList à partir de '../components/userlist.vue';

Vue.use (Vuerouter);

constants constants = [
  {
    chemin: '/',
    Nom: 'UserList',
    Composant: liste d'utilisateurs
  }
]]

const Router = new Vuerouter ({{
  Mode: «History»,
  base: process.env.base_url,
  itinéraires
});

Exporter le routeur par défaut;

Grâce à Vue Router, nous pouvons réaliser la navigation entre les pages et améliorer l'expérience utilisateur.

Erreurs courantes et conseils de débogage

Au cours du processus de développement, vous pouvez rencontrer des problèmes courants, tels que les erreurs COR, les problèmes de liaison des données, etc. Voici quelques conseils de débogage:

• Erreur CORS : assurez-vous que le middleware CORS est correctement configuré dans Laravel et que le nom de domaine demandé par le frontal est le même que le back-end.
• Problème de liaison des données : Vérifiez si les données du composant Vue.js sont correctement tenues d'assurer le flux de données lisse.
• Échec de la demande de l'API : Utilisez les outils du développeur du navigateur pour afficher la demande réseau et vérifier si la demande est envoyée et reçue correctement.

Optimisation des performances et meilleures pratiques

L'optimisation des performances et les meilleures pratiques sont très importantes dans les applications pratiques. Voici quelques suggestions:

• Optimisation de l'API : Dans Laravel, vous pouvez utiliser la fonction d'optimisation des requêtes d'ORM éloquent pour réduire le nombre de requêtes de base de données et améliorer la vitesse de réponse de l'API.
• Optimisation frontale : dans Vue.js, la technologie de défilement virtuel peut être utilisée pour traiter de grandes quantités de données pour éviter les problèmes de performances causés par le chargement de toutes les données à la fois.
• LICIBILITÉ DE CODE : Maintenez la lisibilité et la maintenance du code et utilisez des commentaires et documents raisonnablement pour faciliter la collaboration et la post-maintenance de l'équipe.

Grâce à ces optimisations et aux meilleures pratiques, nous pouvons construire un spa efficace et maintenable.

Résumer

Grâce à cet article, nous explorons en détail comment utiliser Laravel et Vue.js pour développer une seule application de page. Des bases à l'utilisation avancée, à l'optimisation des performances et aux meilleures pratiques, nous espérons que ces contenus vous aideront à mieux comprendre et appliquer ces deux cadres puissants. Je vous souhaite tout le meilleur sur la route du développement!

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!