Dynamisation des données de la page d'accueil

Introduction

Dans ce projet, vous allez apprendre à afficher dynamiquement les données de la page d'accueil à l'aide de Vue.js. Ce projet est conçu pour vous aider à comprendre le processus de récupération de données à partir d'un fichier JSON et de les afficher dans un composant Vue.js.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment demander la liste des publications de la page d'accueil via Axios et la lier au composant List.vue.
• Comment implémenter le style et l'effet de la mise en page de la page d'accueil pour correspondre au design fourni.

🏆 Réalisations

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

• Utiliser Axios pour récupérer des données à partir d'un fichier JSON.
• Lier les données récupérées à un composant Vue.js et les afficher dans le modèle.
• Styliser les composants pour correspondre à un design spécifique.
• Intégrer différents composants Vue.js pour créer une page d'accueil complète.

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 :

├── public
│   ├── static
│     ├── data
│        ├── list.json
│     ├── images
│   ├── favicon.ico
│   ├── index.html
├── src
│   ├── assets
│   ├── components
│     ├── Header.vue
│     ├── List.vue
│     ├── Recommend.vue
│   ├── router
│   ├── views
│     ├── Home.vue
│   ├── App.vue
│   ├── main.js
└── package-lock.json
└── package.json
└── README.md

Dans ce qui suit :

• components/List.vue est le composant de liste d'articles à ajouter pour ce défi.
• public/static/data/list.json est le fichier de données pour obtenir la liste d'articles.
• public/static/images est le fichier d'images utilisé pour la liste d'articles.

Ensuite, téléchargez les dépendances en utilisant la commande npm install dans le terminal, attendez que les dépendances aient fini de se télécharger puis lancez le projet en utilisant la commande npm run serve.

Une fois le projet démarré avec succès, cliquez sur "Web 8080" pour le prévisualiser dans votre navigateur. L'effet d'exécution de la page est montré dans l'image suivante.

Terminaison de la fonction d'affichage de la liste

Dans cette étape, vous allez apprendre à demander les données de la liste de publications de la page d'accueil via axios et à les lier au composant List.vue.

1. Ouvrez le fichier List.vue situé dans le dossier src/components.
2. Importez la bibliothèque axios sous <script> :

// TODO
import axios from "axios";

3. Dans la fonction data(), définissez une propriété dataList pour stocker la liste de données :

data() {
  return {
    dataList: []
  };
}

4. Dans le hook de cycle de vie created(), appelez la méthode getList() pour récupérer la liste de données :

created() {
  this.getList();
}

5. Implémentez la méthode getList() pour récupérer les données à partir du fichier public/static/data/list.json :

methods: {
  getList() {
    axios.get("./static/data/list.json").then((res) => {
      this.dataList = res.data.data.listInfo;
    });
  }
}

6. Le code complet à l'intérieur de <script> est le suivant :

<script>
// TODO
import axios from "axios";
export default {
  data() {
    return {
      dataList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios.get("./static/data/list.json").then((res) => {
        this.dataList = res.data.data.listInfo;
      });
    }
  }
};
</script>

7. Dans le modèle, utilisez une directive v-for pour afficher les éléments de la liste :

<template>
  <div class="list">
    <!-- TODO -->
    <div class="list-item" v-for="item in dataList" :key="item.id">
      <img class="list-pic" :src="item.imgUrl" />
      <div class="list-info">
        <p class="title">{{ item.title }}</p>
        <p class="desc">{{ item.desc }}</p>
      </div>
    </div>
  </div>
</template>

Cette étape assure que les données de la liste de publications de la page d'accueil sont récupérées à partir du fichier public/static/data/list.json et liées au composant List.vue.

En suivant ces étapes, vous avez terminé la dynamisation des données de la page d'accueil, y compris la récupération des données à partir du fichier public/static/data/list.json et l'affichage des éléments de la liste dans la mise en page souhaitée.

L'effet obtenu 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.