Français
Français
introduction:
Dans le développement Web moderne, la fonction de chargement de données en temps réel est devenue l'une des principales exigences de nombreuses applications. Cet article vous montrera comment utiliser les cadres PHP et VUE.js pour implémenter les fonctions de chargement de données. Nous utiliserons des exemples de code spécifiques pour vous aider à maîtriser rapidement cette technologie.
Avant de commencer, assurez-vous que PHP et VUE.js sont installés. S'il n'a pas été installé, vous pouvez visiter le site officiel pour le télécharger et l'installer. De plus, nous créerons une base de données simple contenant un tableau appelé "utilisateurs" pour stocker les données utilisateur.
Tout d'abord, nous créons un fichier PHP nommé "Loaddata.php". Ce fichier est utilisé pour interroger les données de la base de données et les renvoyer à l'avant.
<?php
// Connectez-vous à la base de données
$db = new PDO('mysql:host=localhost;dbname=test', 'root', '');
// Données de requête
$stmt = $db->query("SELECT * FROM users");
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);
// retourJSONDonnées de format
header('Content-Type: application/json');
echo json_encode($users);
?>
Le code ci-dessus se connecte d'abord à la base de données MySQL et interroge toutes les données du tableau nommé "utilisateurs". Nous renvoyons ensuite le résultat de la requête au Frontend au format JSON.
Ensuite, créez une instance dans Vue.js, utilisez le crochet de cycle de vie "monté" pour appeler l'API backend et charger les données.
new Vue({
el: '#app',
data: {
users: [] // Utilisé pour stocker les données obtenues à partir du backend
},
mounted() {
this.loadData(); // Appelez la fonction de chargement des données lorsque la page est chargée
},
methods: {
loadData() {
// utiliserAxiosBibliothèque EnvoyerHTTPdemander
axios.get('loadData.php')
.then(response => {
this.users = response.data;
})
.catch(error => {
console.log(error);
});
}
}
});
Dans ce code, nous créons une instance Vue et appelons la fonction "LoadData" dans le crochet de cycle de vie "monté". Cette fonction utilise Axios pour envoyer des demandes HTTP à l'interface backend, obtient des données utilisateur au format JSON et met à jour le tableau "utilisateurs" dans l'instance Vue.
Grâce à la directive "V-FOR" de VUE, nous pouvons traverser le tableau "utilisateurs" en HTML 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>
Dans le code ci-dessus, nous traversons le tableau "utilisateurs" via la directive "V-FOR" et affichons le nom et la boîte aux lettres de chaque utilisateur sur la page.
Après avoir terminé les étapes ci-dessus, ouvrez le navigateur et accédez au fichier HTML, vous devriez pouvoir voir toutes les informations utilisateur chargées à partir de la base de données. Si tout fonctionne bien, la page affichera le contenu dans la table "Utilisateurs".
Grâce à l'introduction de cet article, nous avons appris à utiliser les cadres PHP et VUE.js pour implémenter la fonction de chargement de données. Le fichier PHP backend obtient des données de la base de données et revient au format JSON. L'instance Frontend Vue obtient des données via la bibliothèque Axios et l'affiche sur la page. J'espère que cet article peut vous aider à mieux comprendre et utiliser PHP et VUE pour implémenter les fonctions de chargement de données.
