Datenformatierung und Visualisierung mit Vue.js

Einführung

In diesem Projekt lernst du, wie du Tabellendaten umwandeln und formatieren kannst, um sie auf benutzerfreundliche Weise anzuzeigen. Dies ist eine häufige Aufgabe, der sich Frontend-Entwickler oft bei der Arbeit mit Daten aus dem Backend gegenüber sehen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du einen HTTP-Anfrage sendest, um Daten aus einer JSON-Datei abzurufen
• Wie du die Daten formatierst, um das erforderliche Format für die Anzeige zu entsprechen
• Wie du die formatierten Daten in einer HTML-Tabelle mit Vue.js und Element UI rendern

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• axios zum Senden von HTTP-Anfragen und Abrufen von Daten zu verwenden
• Daten manipulieren und in das gewünschte Format transformieren
• Vue.js und Element UI zu integrieren, um einen responsiven und visuell ansprechenden Tabellenkomponenten zu erstellen

Projektstruktur einrichten

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

Öffne das Projektverzeichnis. Die Verzeichnisstruktur sieht wie folgt aus:

├── axios.min.js
├── element-ui.css
├── element-ui.js
├── fetchTableData.json
├── index.html
└── vue.js

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, und du wirst die Seite sehen.

Eine Anfrage senden, um die Daten abzurufen

In diesem Schritt wirst du lernen, wie du einen HTTP-Request sendest, um die Daten aus der Datei fetchTableData.json abzurufen.

1. Öffne die Datei index.html im Code-Editor.
2. Im <script>-Abschnitt füge eine neue getTableData()-Methode zu den methods in der Vue-Instanz hinzu.
3. Innerhalb der getTableData()-Methode nutze die axios.get()-Funktion, um einen GET-Request an die Datei fetchTableData.json zu senden:

methods: {
  getTableData() {
    axios.get("./fetchTableData.json").then((response) => {
      // TODO: Formatieren Sie die Daten und weisen Sie sie der tableData zu
    });
  }
}

4. Rufe die getTableData-Funktion in der mounted-Methode der Vue-Instanz auf.

mounted() {
  this.getTableData();
},

Die Daten formatieren

In diesem Schritt wirst du lernen, wie du die Daten in das erforderliche Format bringen und sie der tableData-Eigenschaft zuweisen.

1. Öffne die Datei index.html im Code-Editor.
2. Im <script>-Abschnitt finde die getTableData()-Methode innerhalb der Vue-Instanz.
3. Innerhalb des erfolgreichen Callbacks der then()-Methode in der getTableData()-Funktion, extrahiere die data-Eigenschaft aus dem Response-Objekt:

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
   });
}

4. Gehe durch das resData-Array und formatiere die Daten gemäß den Anforderungen:
   • Für das datetime-Feld, konvertiere das Format von YYYYMMDD zu YYYY-MM-DD.
   • Für das sex-Feld, konvertiere den Wert von 1 zu "Mann" und 0 zu "Frau".
   • Für das vip-Feld, konvertiere den Wert von 1 zu "Ja" und 0 zu "Nein".

Hier ist der Code, um die Daten zu formatieren:

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
      resData.forEach((item) => {
         item.datetime = `${item.datetime.substring(0, 4)}-${item.datetime.substring(4, 6)}-${item.datetime.substring(6)}`;
         item.sex = item.sex? "Mann" : "Frau";
         item.vip = item.vip? "Ja" : "Nein";
      });
   });
}

5. Nachdem die Daten formatiert sind, weise das resData-Array der tableData-Eigenschaft zu:

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      //...
      this.tableData = resData;
   });
}

Jetzt sind die Daten formatiert und der tableData-Eigenschaft zugewiesen, die verwendet werden wird, um die Tabelle im HTML zu rendern.

Das endgültige Ergebnis sieht wie folgt aus:

Zusammenfassung

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