Formatage et visualisation de données avec Vue.js

Introduction

Dans ce projet, vous allez apprendre à convertir et à formater des données de table pour les afficher de manière conviviale pour l'utilisateur. Il s'agit d'une tâche courante que les développeurs frontend rencontrent souvent lorsqu'ils travaillent avec des données issues du backend.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment envoyer une requête HTTP pour récupérer des données à partir d'un fichier JSON
• Comment formater les données pour qu'elles correspondent au format requis pour l'affichage
• Comment afficher les données formatées dans un tableau HTML à l'aide de Vue.js et d'Element UI

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser axios pour envoyer des requêtes HTTP et récupérer des données
• Manipuler et transformer les données au format souhaité
• Intégrer Vue.js et Element UI pour créer un composant de tableau réactif et visuellement attrayant

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── axios.min.js
├── element-ui.css
├── element-ui.js
├── fetchTableData.json
├── index.html
└── vue.js

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Envoyer une requête pour récupérer les données

Dans cette étape, vous allez apprendre à envoyer une requête HTTP pour récupérer les données à partir du fichier fetchTableData.json.

1. Ouvrez le fichier index.html dans l'éditeur de code.
2. Dans la section <script>, ajoutez une nouvelle méthode getTableData() aux méthodes dans l'instance Vue.
3. Dans la méthode getTableData(), utilisez la fonction axios.get() pour envoyer une requête GET au fichier fetchTableData.json :

methods: {
  getTableData() {
    axios.get("./fetchTableData.json").then((response) => {
      // TODO : Formater les données et les assigner à tableData
    });
  }
}

4. Appelez la fonction getTableData dans le mounted de l'instance Vue.

mounted() {
  this.getTableData();
},

Formater les données

Dans cette étape, vous allez apprendre à formater les données au format requis et à les assigner à la propriété tableData.

1. Ouvrez le fichier index.html dans l'éditeur de code.
2. Dans la section <script>, localisez la méthode getTableData() à l'intérieur de l'instance Vue.
3. À l'intérieur du rappel de réussite de la méthode then() dans la fonction getTableData(), obtenez la propriété data de l'objet de réponse :

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
   });
}

4. Parcourez le tableau resData et formatez les données selon les exigences :
   • Pour le champ datetime, convertissez le format de YYYYMMDD en YYYY-MM-DD.
   • Pour le champ sex, convertissez la valeur de 1 en "Homme" et 0 en "Femme".
   • Pour le champ vip, convertissez la valeur de 1 en "Oui" et 0 en "Non".

Voici le code pour formater les données :

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
      resData.forEach((item) => {
         item.datetime = `${item.datetime.substring(0, 4)}-${item.datetime.substring(4, 6)}-${item.datetime.substring(6)}`;
         item.sex = item.sex? "Homme" : "Femme";
         item.vip = item.vip? "Oui" : "Non";
      });
   });
}

5. Après avoir formatté les données, assignez le tableau resData à la propriété tableData :

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      //...
      this.tableData = resData;
   });
}

Maintenant, les données sont formatées et assignées à la propriété tableData, qui sera utilisée pour afficher le tableau dans le HTML.

L'effet final est le suivant :

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.