Comment utiliser PHP et Vue pour implémenter la fonction de chargement de données

Comment utiliser PHP et Vue pour implémenter la fonction de chargement de données

Introduction :
Dans le développement Web moderne, le chargement de données en temps réel est une fonction courante et importante. Cet article expliquera comment utiliser le framework PHP et Vue.js pour implémenter la fonction de chargement de données. Je fournirai des exemples de code spécifiques pour aider les lecteurs à mieux comprendre l'ensemble du processus.

1. Préparation
Avant de commencer, nous devons nous assurer que les frameworks PHP et Vue.js ont été installés. S'il n'est pas installé, vous pouvez vous rendre sur le site officiel pour le télécharger et l'installer. De plus, pour faciliter la démonstration, nous pouvons créer une base de données simple, qui contient une table nommée « utilisateurs » pour stocker les informations sur les utilisateurs.

2. Partie backend

1. Créez un fichier PHP et nommez-le "loadData.php". Dans ce fichier, nous allons écrire la logique backend en utilisant PHP pour interroger les données de la base de données.

   <?php
   // 连接数据库
   $db = new PDO('mysql:host=localhost;dbname=test', 'root', '');
   
   // 查询数据
   $stmt = $db->query("SELECT * FROM users");
   $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
   
   // 返回JSON格式的数据
   header('Content-Type: application/json');
   echo json_encode($users);
   ?>

   Copier après la connexion

   Dans le code ci-dessus, nous nous connectons d'abord à la base de données et interrogeons toutes les données de la table nommée "utilisateurs". Nous convertissons ensuite les résultats de la requête au format JSON et les renvoyons au front-end.

3. Partie front-end

1. Créez une instance Vue et utilisez la fonction de hook de cycle de vie "montée" de Vue pour appeler l'interface back-end et obtenir des données.

   new Vue({
     el: '#app',
     data: {
    users: []  // 用于存储从后端获取的数据
     },
     mounted: function() {
    this.loadData();  // 页面加载时调用数据加载函数
     },
     methods: {
    loadData: function() {
      // 使用Axios库发送HTTP请求
      axios.get('loadData.php')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
     }
   });

   Copier après la connexion

   Dans le code ci-dessus, nous avons créé une instance Vue et appelé la fonction "loadData" dans la fonction hook de cycle de vie "montée". Cette fonction utilise Axios pour envoyer une requête HTTP, appelle l'interface "loadData.php" sur le backend et attribue les données renvoyées au tableau "users" dans l'attribut "data" de l'instance Vue.

2. En HTML, utilisez la directive "v-for" pour parcourir le tableau "users" et afficher les informations de chaque utilisateur.

   <div id="app">
     <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }} - {{ user.email }}
    </li>
     </ul>
   </div>

   Copier après la connexion

   Dans le code ci-dessus, nous utilisons l'instruction "v-for" pour parcourir le tableau "users" et afficher le nom et l'adresse e-mail de chaque utilisateur sur la page.

4. Testez et exécutez
Après avoir terminé les étapes ci-dessus, nous pouvons ouvrir le fichier HTML dans le navigateur et observer si les données sont chargées avec succès dans la page. Si tout se passe bien, la page devrait afficher toutes les informations utilisateur dans le tableau "utilisateurs" de la base de données.

Conclusion :
Grâce à l'introduction de cet article, nous avons appris à utiliser le framework PHP et Vue.js pour implémenter la fonction de chargement de données. Grâce au fichier PHP back-end, nous récupérons les données de la base de données, les convertissons au format JSON et les renvoyons au front-end. Grâce à l'instance frontale Vue et à la bibliothèque Axios, nous envoyons des requêtes HTTP et affichons les données renvoyées sur la page. J'espère que cet article pourra aider tout le monde à mieux comprendre et utiliser PHP et Vue pour implémenter la fonction de chargement de données.

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!