Echtzeit-Satzsuche mit Vue.js

Einführung

In diesem Projekt lernst du, wie du eine Webanwendung erstellen kannst, die es Benutzern ermöglicht, schöne Sätze aus der Literatur in Echtzeit zu durchsuchen und anzuzeigen. Die Anwendung wird die Daten aus einer JSON-Datei abrufen und Vue.js verwenden, um die Suchfunktionalität zu implementieren und die Ergebnisse anzuzeigen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du das Projekt einrichtest und die bereitgestellten Dateien und Verzeichnisse verstehst
• Wie du die Datenanfrage implementierst, um die Daten aus der data.json-Datei abzurufen
• Wie du die Echtzeit-Suchfunktionalität implementierst, um die passenden Sätze anzuzeigen
• Wie du dem Projekt einige abschließende Details hinzufügst, indem du die Webseite gestylst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Ein Webanwendungsprojekt mit HTML, CSS und JavaScript einzurichten
• Vue.js verwenden, um eine responsive und interaktive Webanwendung zu erstellen
• Daten aus einer JSON-Datei abzurufen und auf der Webseite anzuzeigen
• Echtzeit-Suchfunktionalität zu implementieren und die passenden Schlüsselwörter hervorzuheben
• Eine Webseite mit CSS zu stylen, um das allgemeine Erscheinungsbild und die Benutzererfahrung zu verbessern

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:

├── css
│   └── style.css
├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── vue.min.js

Darin:

• css/style.css ist die Styledatei.
• index.html ist die Hauptseite.
• data.json sind die Daten, die im Projekt verwendet werden.
• js/vue.min.js ist die Datei der vue2.x-Version, die im Projekt verwendet wird.
• js/axios.min.js ist die Axios-Datei.

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 auf der VM und aktualisiere es manuell, um die Seite zu sehen.

Datenanfrage implementieren

In diesem Schritt wirst du die Datenanfrage abschließen, um die Daten aus der data.json-Datei abzurufen.

1. Öffne die Datei index.html und finde den TODO-Kommentar im <script>-Abschnitt.
2. Füge innerhalb der data()-Funktion folgenden Code hinzu, um die Daten aus der data.json-Datei abzurufen:

data() {
  return {
    list: [],
    search: ""
  };
},
mounted() {
  this.getData();
},
methods: {
  async getData() {
    const res = await axios({ url: "./data.json" });
    this.list = res.data;
  }
}

Dieser Code legt die initialen Dateneigenschaften list und search fest und ruft dann in der mounted()-Hook-Methode die getData()-Methode auf, um die Daten aus der data.json-Datei abzurufen.

3. Speichere die Datei index.html und aktualisiere die Webseite. Du solltest nun die initialen Daten sehen, die aus der data.json-Datei geladen wurden.

Echtzeit-Suchfunktionalität implementieren

In diesem Schritt wirst du die Echtzeit-Suchfunktionalität implementieren, um die passenden Sätze basierend auf der Benutzereingabe anzuzeigen.

1. Öffne die Datei index.html und finde den TODO-Kommentar im Abschnitt <div class="search-form">.
2. Ersetze den Inhalt innerhalb des <div class="search-form">-Elements durch folgenden Code:

<input
  type="text"
  id="search"
  class="search"
  v-model="search"
  placeholder="Title Sentence Author"
/>
<ul class="suggestions">
  <li v-for="item in filterList">
    <span v-html="hightLight(item.poetry_content)" class="poet"></span>
    <span class="title">
      <span v-html="hightLight(item.title)"></span>
      -
      <span v-html="hightLight(item.author)"></span>
    </span>
  </li>
</ul>

Dieser Code verwendet Vue.js-Direktiven, um die Liste der passenden Sätze dynamisch basierend auf der Benutzereingabe zu rendern.

3. Füge anschließend folgenden Code zum mounted()-Sibling hinzu:

mounted() {
  this.getData();
},
computed: {
  hightLight() {
    return (text) => {
      if (this.search) {
        const reg = new RegExp(this.search, "g");
        return text.replace(
          reg,
          `<span class='highlight'>${this.search}</span>`
        );
      }
      return text;
    };
  },
  filterList() {
    let { search, list } = this;
    let str = search.trim();
    if (str.length == 0) {
      return [];
    } else {
      return search
       ? list.filter(
            (item) =>
              item.title.includes(search) ||
              item.author.includes(search) ||
              item.poetry_content.includes(search)
          )
        : [];
    }
  }
},

Die berechnete Eigenschaft hightLight ist eine Funktion, die die passenden Schlüsselwörter in das <span class='highlight'>-Tag umschließt. Die berechnete Eigenschaft filterList filtert die list der Sätze basierend auf der Benutzereingabe im Suchfeld.

4. Speichere die Datei index.html und aktualisiere die Webseite. Du solltest nun die Echtzeit-Suchfunktionalität funktionieren sehen, mit den passenden Sätzen angezeigt und den Schlüsselwörtern hervorgehoben.

Nach Abschluss sieht das Endresultat wie folgt aus:

Zusammenfassung

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