Créer une recherche d'arborescence de menu dynamique avec Vue.js

Introduction

Dans ce projet, vous allez apprendre à construire une fonctionnalité de recherche d'arborescence de menu dynamique à l'aide de Vue.js. Le projet consiste à récupérer les données de menu secondaire à partir d'un fichier JSON, à implémenter une fonctionnalité de recherche approximative et à afficher l'arborescence de menu filtrée sur la page.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment récupérer les données de menu secondaire à partir d'un fichier JSON à l'aide de la bibliothèque axios
Comment implémenter une fonctionnalité de recherche pour filtrer les éléments de menu en fonction de l'entrée de l'utilisateur
Comment afficher l'arborescence de menu filtrée sur la page, en mettant en évidence le texte correspondant

🏆 Réalisations

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

Développer une interface utilisateur dynamique et interactive à l'aide de Vue.js
Récupérer des données à partir d'un fichier JSON et gérer la récupération asynchrone de données
Implémenter une fonctionnalité de recherche approximative pour filtrer les données en fonction de l'entrée de l'utilisateur
Afficher une structure d'arborescence de menu hiérarchique et mettre en évidence le texte correspondant

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 :

├── js
│    ├── axios.min.js ## Bibliothèque d'encapsulation Ajax utilisée pour l'acquisition asynchrone de données
│    ├── index.js ## Code logique pour implémenter les fonctions de la page
│    └── vue.js ## Version 2.x du framework Vue.js
├── data.json ## Les données totales du menu secondaire
└── index.html ## Mise en page de la page

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, vous verrez la page.

Actuellement, seule la mise en page statique est affichée, et l'acquisition et l'affichage asynchrones des données du menu secondaire ainsi que la fonction de recherche approximative ne sont pas implémentées.

Dans cette étape, vous allez apprendre à récupérer les données du menu secondaire à partir du fichier data.json à l'aide de la bibliothèque axios.

Ouvrez le fichier index.js dans le répertoire /js.
Dans le hook de cycle de vie created(), utilisez la méthode axios.get() pour récupérer les données à partir du fichier data.json :

created() {
  axios.get("../data.json").then((res) => {
    this.list = res.data;
    this.resultList = res.data;
  });
},

Ce code récupérera les données à partir du fichier data.json et les stockera dans les propriétés de données list et resultList.

Implémenter la fonctionnalité de recherche

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité de recherche pour les éléments de menu secondaire.

Dans le fichier index.js, ajoutez une méthode searchData() à l'objet methods :

methods: {
  searchData() {
    // TODO: Implémenter la fonction de recherche
    this.resultList = [];
    let set = new Set();
    this.list.forEach((item1) => {
      if (item1.meta.title.search(this.search)!== -1) {
        set.add(item1);
      }
      if (item1.children) {
        item1.children.forEach((item2) => {
          if (item2.meta.title.search(this.search)!== -1) {
            set.add(item1);
          }
        });
      }
    });
    this.resultList = set;
  }
}

Mettez à jour la propriété de données resultList en fonction de l'entrée de recherche. La méthode searchData() parcourra la donnée list et ajoutera tous les éléments correspondants à un objet Set. L'objet Set est ensuite assigné à la propriété de données resultList.

Cette implémentation affichera les éléments de menu secondaire qui correspondent à la requête de recherche, le texte correspondant étant mis en évidence avec un fond jaune.

Avec ces modifications, la page affichera désormais l'arborescence de menu filtrée en fonction de l'entrée de recherche, le texte correspondant étant mis en évidence.

L'effet d'implémentation 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.