Maison > Article > interface Web > Mise à jour et affichage en temps réel des données front-end à l'aide de Vue et Axios

Mise à jour et affichage en temps réel des données front-end à l'aide de Vue et Axios

王林original: 2023-07-17 16:13:562774parcourir

Utilisez Vue et Axios pour obtenir une mise à jour et un affichage en temps réel des données frontales

Avec le développement rapide de la technologie réseau, les méthodes d'interaction frontale ne se limitent plus aux sauts de page traditionnels, mais accordent davantage d'attention au temps réel et l'expérience utilisateur. Vue et Axios, en tant que frameworks et bibliothèques très populaires aujourd'hui dans le développement front-end, peuvent nous aider à réaliser la mise à jour et l'affichage des données en temps réel. Cet article expliquera comment utiliser Vue et Axios pour implémenter cette fonction et fournira des exemples de code correspondants.

1. Installez Vue et Axios

Avant de commencer, nous devons d'abord installer Vue et Axios. Ouvrez le terminal, entrez dans le répertoire du projet et exécutez la commande suivante :

npm install vue

npm install axios

Une fois l'installation terminée, nous pouvons introduire Vue et Axios dans le projet pour une utilisation ultérieure.

2. Créer une instance Vue

Dans le fichier HTML, nous devons d'abord introduire les liens CDN de Vue et Axios, et ajouter un élément identifiant Vue dans la balise 6c04bd5ca3fcae76e30b72ad730ca86d, par exemple :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

Ensuite, dans le fichier JavaScript Créez une instance Vue et utilisez Axios pour envoyer une requête asynchrone pour obtenir des données. Une fois les données obtenues avec succès, les données sont enregistrées dans l'attribut data de l'instance Vue et utilisées pour l'affichage. Par exemple :

var app = new Vue({
    el: '#app',
    data: {
        data: null
    },
    mounted: function () {
        axios.get('/api/data')  // 发送异步请求获取数据
            .then(function (response) {
                this.data = response.data;  // 将获取到的数据保存在data属性中
            }.bind(this))
            .catch(function (error) {
                console.log(error);
            });
    }
});

Dans le code ci-dessus, Mounted est l'une des fonctions de cycle de vie de l'instance Vue, qui sera automatiquement exécutée une fois l'instance Vue montée sur la page. Dans la fonction montée, nous utilisons Axios pour envoyer une requête HTTP GET, et l'adresse de la requête est /api/data. Une fois la demande réussie, Axios renverra un objet Promise contenant les données de réponse. Nous utilisons la méthode then pour obtenir les données de réponse et les enregistrer dans l'attribut data de l'instance Vue. Il convient de noter qu'en raison du problème de portée de la fonction JavaScript, nous devons utiliser la fonction bind pour la lier à l'instance Vue afin de garantir que l'attribut data est accessible correctement.

Enfin, nous devons démarrer un service backend pour traiter la demande et renvoyer les données correspondantes. Étant donné que la mise en œuvre spécifique des services back-end implique différentes piles technologiques, nous n'entrerons pas dans les détails ici. Les lecteurs peuvent choisir la solution appropriée en fonction de leurs propres besoins.

3. Mettre à jour et afficher les données en temps réel

Utiliser Vue et Axios pour obtenir des données et les afficher sur la page n'est que la première étape. Ensuite, nous devons mettre à jour et afficher les données en temps réel. Dans Vue, nous pouvons utiliser des propriétés calculées et des écouteurs pour réaliser cette fonctionnalité.

Définissez une propriété calculée dans l'instance Vue pour renvoyer des données mises à jour en temps réel. Par exemple :

var app = new Vue({
    el: '#app',
    data: {
        data: null
    },
    computed: {
        realTimeData: function () {
            return this.data;  // 假设data属性的数据每秒都在实时更新
        }
    },
    mounted: function () {
        // ...
    }
});

Dans cet exemple, nous supposons que les données de l'attribut data sont mises à jour en temps réel chaque seconde, et l'attribut calculé realTimeData calculera et renverra dynamiquement les dernières données.

Ensuite, nous pouvons utiliser cet attribut calculé dans les modèles HTML pour afficher des données mises à jour en temps réel. Par exemple :

<div id="app">
    <p>{{ realTimeData }}</p>
</div>

De cette façon, lorsque les données de l'attribut data changent, l'attribut calculé realTimeData sera automatiquement mis à jour et affiché sur la page en temps réel.

En plus des attributs calculés, nous pouvons également mettre en œuvre une surveillance et une mise à jour en temps réel des données via des auditeurs. Par exemple :

var app = new Vue({
    el: '#app',
    data: {
        data: null
    },
    watch: {
        data: function () {
            // 数据发生变化时的相关逻辑
        }
    },
    mounted: function () {
        // ...
    }
});

Dans cet exemple, lorsque les données de l'attribut data changent, la fonction de données dans l'objet montre sera automatiquement appelée, permettant ainsi une surveillance et une mise à jour en temps réel des données.

4. Résumé

Cet article explique comment utiliser Vue et Axios pour réaliser la mise à jour et l'affichage en temps réel des données frontales. En envoyant des requêtes asynchrones via la fonction de cycle de vie de l'instance Vue et d'Axios, nous pouvons obtenir les données back-end et les mettre à jour sur la page en temps réel. Grâce aux propriétés calculées et aux auditeurs, nous pouvons facilement surveiller et afficher les données en temps réel. J'espère que cet article pourra être utile à tout le monde, et vous êtes invités à apprendre et à explorer en profondeur en lisant des documents pertinents.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：L'utilisation et les précautions de $refs dans VueArticle suivant：L'utilisation et les précautions de $refs dans Vue

Articles Liés

Voir plus