Mise en page de liste de produits responsive | Tutoriel Vue.js

Introduction

Dans ce projet, vous allez apprendre à créer une mise en page de liste de produits responsive avec une fonction de basculement. Cette fonction permet aux utilisateurs de basculer facilement entre une vue en grille et une vue en liste des articles de produit.

👀 Aperçu

responsive layout switching demo

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer la structure du projet et comprendre le but de chaque fichier et dossier
Comment extraire des données à partir d'un fichier JSON et alimenter la liste de produits
Comment implémenter la fonctionnalité de basculement de mise en page à l'aide de Vue.js
Comment rendre conditionnellement les mises en page en grille et en liste en fonction de la vue sélectionnée

🏆 Réalisations

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

Structurer efficacement un projet Vue.js
Utiliser Axios pour extraire des données à partir d'un fichier JSON
Utiliser des directives Vue.js telles que v-if et v-else pour rendre conditionnellement du contenu
Gérer les interactions de l'utilisateur et mettre à jour l'interface utilisateur en conséquence

Configurer la structure du projet

Dans cette étape, vous allez apprendre à configurer la structure du projet pour le projet de basculement de mise en page. Suivez les étapes ci-dessous pour terminer cette étape :

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

├── css
├── images
├── js
│    ├── axios.min.js
│    └── vue.js
├── goodsList.json
└── index.html

Familiarisez-vous avec le but de chaque dossier et fichier :
- css : Ce dossier est pour les fichiers de style.
- images : Ce dossier est pour les images.
- js/vue.js : Ceci est le fichier Vue 2.x.
- js/axios.min.js : Ceci est le fichier Axios.
- goodsList.json : Ce sont les données requises pour la demande.
- index.html : Ce fichier contient la mise en page et la logique de la page.
Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement pour voir la page.

Implémenter la récupération de données

Dans cette étape, vous allez apprendre à récupérer les données requises pour le projet. Suivez les étapes ci-dessous pour terminer cette étape :

Dans le fichier index.html, localisez la balise <script> en bas du fichier.
À l'intérieur de la balise <script>, créez une nouvelle instance Vue en utilisant new Vue().
Dans l'option data de l'instance Vue, ajoutez une propriété goodsList et initialisez-la comme un tableau vide.
Dans le hook mounted de l'instance Vue, utilisez Axios pour récupérer les données à partir du fichier goodsList.json.
Mettez à jour la propriété de données goodsList avec les données récupérées.

Votre code devrait ressembler à ceci :

var vm = new Vue({
  el: "#app",
  data: {
    goodsList: []
  },
  mounted() {
    axios.get("./goodsList.json").then((res) => (this.goodsList = res.data));
  }
});

Implémenter le basculement de mise en page

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité de basculement de la mise en page de la liste de produits. Suivez les étapes ci-dessous pour terminer cette étape :

Dans le fichier index.html, localisez l'élément <div class="bar">.
À l'intérieur de cet élément, ajoutez deux éléments <a> avec respectivement les noms de classes grid-icon et list-icon.

<div class="bar">
  <a class="grid-icon"></a>
  <a class="list-icon"></a>
</div>

Créez une propriété de données changeBar dans l'instance Vue pour suivre la mise en page actuelle, en définissant la valeur par défaut sur 0, c'est-à-dire qu'elle est par défaut en mode mise en page en grille.

var vm = new Vue({
  el: "#app",
  data: {
    changeBar: 0
    //...
  }
});

Associez l'événement @click à chaque élément <a>, lorsque le grid-icon est cliqué, définissez changeBar sur 0 et ajoutez la classe active au grid-icon. Retirez la classe active du list-icon.

<div class="bar">
  <a
    class="grid-icon"
    :class="changeBar == 0? 'active' : ''"
    @click="changeBar = 0"
  ></a>
  <!--... -->
</div>

Associez l'événement @click à chaque élément <a>, lorsque le list-icon est cliqué, définissez changeBar sur 1 et ajoutez la classe active au list-icon. Retirez la classe active du grid-icon.

<div class="bar">
  <!--... -->
  <a
    class="list-icon"
    :class="changeBar == 1? 'active' : ''"
    @click="changeBar = 1"
  ></a>
</div>

Utilisez les directives v-if et v-else pour rendre conditionnellement les mises en page en grille et en liste en fonction de la valeur de changeBar.

<ul class="grid" v-if="changeBar == 0">
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.large" />
    </a>
  </li>
</ul>
<ul class="list" v-else>
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.small" />
    </a>
    <p>{{item.title}}</p>
  </li>
</ul>

Terminer le projet

Dans cette dernière étape, vous allez réviser le projet terminé et vous assurer qu'il répond aux exigences.

Vérifiez que les données sont correctement extraites du fichier goodsList.json.
Assurez-vous que la fonctionnalité de basculement de mise en page fonctionne comme prévu :
- Cliquez sur l'icône en grille pour changer la mise en page en vue en grille et ajoutez la classe active à l'icône en grille.
- Cliquez sur l'icône en liste pour changer la mise en page en vue en liste et ajoutez la classe active à l'icône en liste.
Testez le projet en cliquant sur les icônes et assurez-vous que la mise en page change comme prévu.

Félicitations ! Vous avez terminé le projet de basculement de mise en page. Vous avez appris à :

Configurer la structure du projet
Extraire des données à partir d'un fichier JSON
Implémenter la fonctionnalité de basculement de mise en page à l'aide de Vue.js

Résumé

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

Liste de produits avec basculement de mise en page