Erstellen eines dynamischen Menübäums mit Suchfunktion mit Vue.js

Einführung

In diesem Projekt lernst du, wie du mithilfe von Vue.js eine dynamische Menübaum-Suchfunktionalität aufbaust. Das Projekt umfasst das Abrufen von sekundären Menüdaten aus einer JSON-Datei, die Implementierung einer Suchfunktion mit Verwirrungs-Suche und das Anzeigen des gefilterten Menübäumes auf der Seite.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du sekundäre Menüdaten aus einer JSON-Datei mithilfe der axios-Bibliothek abrufst
• Wie du eine Suchfunktionalität implementierst, um die Menüpunkte basierend auf der Benutzereingabe zu filtern
• Wie du den gefilterten Menübäumen auf der Seite anzeigst und den passenden Text hervorhebst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Ein dynamisches und interaktives Benutzeroberflächen mit Vue.js zu entwickeln
• Daten aus einer JSON-Datei abzurufen und asynchrone Datenabrufe zu verarbeiten
• Eine Suchfunktion mit Verwirrungs-Suche zu implementieren, um Daten basierend auf der Benutzereingabe zu filtern
• Eine hierarchische Menübaumstruktur anzuzeigen und den passenden Text hervorzuheben

Skills Graph

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur ist wie folgt:

├── js
│    ├── axios.min.js ## Ajax-Kapsellierungsbibliothek zur asynchronen Datenabholung
│    ├── index.js ## Logikcode zur Implementierung der Seitenfunktionen
│    └── vue.js ## Version 2.x des Vue.js-Frameworks
├── data.json ## Die Gesamt-Daten des sekundären Menüs
└── index.html ## Seitenlayout

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben im VM und aktualisiere es manuell, und du wirst die Seite sehen.

Derzeit wird nur das statische Layout angezeigt, und die asynchrone Abholung und Anzeige von sekundären Menüdaten sowie die Suchfunktion mit Verwirrungs-Suche sind nicht implementiert.

Sekundäre Menüdaten abrufen

In diesem Schritt wirst du lernen, wie du die sekundären Menüdaten aus der data.json-Datei mithilfe der axios-Bibliothek abrufst.

1. Öffne die index.js-Datei im Verzeichnis /js.
2. Im Lebenszyklushaken created() verwende die axios.get()-Methode, um die Daten aus der data.json-Datei abzurufen:

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

Dieser Code ruft die Daten aus der data.json-Datei ab und speichert sie in den Daten-Eigenschaften list und resultList.

Suchfunktionalität implementieren

In diesem Schritt wirst du lernen, wie du die Suchfunktionalität für die sekundären Menüpunkte implementierst.

1. In der index.js-Datei füge eine searchData()-Methode zum methods-Objekt hinzu:

methods: {
  searchData() {
    // TODO: Implementing the search function
    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;
  }
}

2. Aktualisiere die resultList-Daten-Eigenschaft basierend auf der Suchanfrage. Die searchData()-Methode durchläuft die list-Daten und fügt alle passenden Elemente einem Set-Objekt hinzu. Das Set-Objekt wird dann der resultList-Daten-Eigenschaft zugewiesen.

Diese Implementierung wird die sekundären Menüpunkte anzeigen, die mit der Suchanfrage übereinstimmen, wobei der passende Text mit einem gelben Hintergrund hervorgehoben wird.

Mit diesen Änderungen wird die Seite jetzt den gefilterten Menübäumen basierend auf der Suchanfrage anzeigen, wobei der passende Text hervorgehoben ist.

Der endgültige Implementierungseffekt ist wie folgt:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.