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.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"])
html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"])
html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"])
html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"])
html/BasicStructureGroup -.-> html/basic_elems("Basic Elements")
html/BasicStructureGroup -.-> html/head_elems("Head Elements")
html/LayoutandSectioningGroup -.-> html/layout("Layout Elements")
html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements")
html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements")
subgraph Lab Skills
html/basic_elems -.-> lab-445739{{"Dynamisation des données de la page d'accueil"}}
html/head_elems -.-> lab-445739{{"Dynamisation des données de la page d'accueil"}}
html/layout -.-> lab-445739{{"Dynamisation des données de la page d'accueil"}}
html/multimedia -.-> lab-445739{{"Dynamisation des données de la page d'accueil"}}
html/inter_elems -.-> lab-445739{{"Dynamisation des données de la page d'accueil"}}
end
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 :
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.
Ouvrez le fichier List.vue situé dans le dossier src/components.
Importez la bibliothèque axios sous <script> :
// TODO
import axios from "axios";
Dans la fonction data(), définissez une propriété dataList pour stocker la liste de données :
data() {
return {
dataList: []
};
}
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();
}
Implémentez la méthode getList() pour récupérer les données à partir du fichier public/static/data/list.json :
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.
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy