Dynamisierung von Startseite-Daten

Einführung

In diesem Projekt lernst du, wie du die Startseite-Daten dynamisch mit Vue.js anzeigen kannst. Dieses Projekt ist so konzipiert, dass es dir hilft, den Prozess des Abrufens von Daten aus einer JSON-Datei und das Rendern dieser in einer Vue.js-Komponente zu verstehen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Startseite-Beitragsliste-Daten via Axios abrufst und an die List.vue-Komponente bindest.
• Wie du das Layoutdesign und die Effekte der Startseite implementierst, um mit dem bereitgestellten Design übereinzustimmen.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Mit Axios Daten aus einer JSON-Datei abzurufen.
• Die abgerufenen Daten an eine Vue.js-Komponente zu binden und in der Vorlage zu rendern.
• Die Komponenten zu stylen, um einem bestimmten Design zu entsprechen.
• Verschiedene Vue.js-Komponenten zu integrieren, um eine vollständige Startseite zu erstellen.

Projektsstruktur einrichten

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

Öffne den Projektordner. Die Verzeichnisstruktur ist wie folgt:

├── public
│   ├── static
│     ├── data
│        ├── list.json
│     ├── images
│   ├── favicon.ico
│   ├── index.html
├── src
│   ├── assets
│   ├── components
│     ├── Header.vue
│     ├── List.vue
│     ├── Recommend.vue
│   ├── router
│   ├── views
│     ├── Home.vue
│   ├── App.vue
│   ├── main.js
└── package-lock.json
└── package.json
└── README.md

Darin:

• components/List.vue ist die Artikel-Listen-Komponente, die für diese Herausforderung hinzugefügt werden soll.
• public/static/data/list.json ist die Daten-Datei, um die Liste der Artikel zu erhalten.
• public/static/images ist die Bilderdatei, die für die Artikel-Liste verwendet wird.

Als nächstes lade die Abhängigkeiten mit dem Befehl npm install im Terminal herunter, warte, bis die Abhängigkeiten heruntergeladen sind, und starte dann das Projekt mit dem Befehl npm run serve.

Sobald das Projekt erfolgreich gestartet ist, klicke auf "Web 8080", um es in deinem Browser anzuschauen. Die Ausführungsweise der Seite ist in dem folgenden Bild dargestellt.

Fertigstellung der Listenanzeigefunktion

In diesem Schritt wirst du lernen, wie du die Startseite-Beitragsliste-Daten via axios abrufst und an die List.vue-Komponente bindest.

1. Öffne die Datei List.vue im Ordner src/components.
2. Importiere die axios-Bibliothek unter <script>:

// TODO
import axios from "axios";

3. Definiere in der data()-Funktion eine dataList-Eigenschaft, um die Listen-Daten zu speichern:

data() {
  return {
    dataList: []
  };
}

4. Rufe in der created()-Lebenszyklushook die getList()-Methode auf, um die Listen-Daten abzurufen:

created() {
  this.getList();
}

5. Implementiere die getList()-Methode, um die Daten aus der Datei public/static/data/list.json abzurufen:

methods: {
  getList() {
    axios.get("./static/data/list.json").then((res) => {
      this.dataList = res.data.data.listInfo;
    });
  }
}

6. Der vollständige Code innerhalb von <script> lautet wie folgt:

<script>
// TODO
import axios from "axios";
export default {
  data() {
    return {
      dataList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios.get("./static/data/list.json").then((res) => {
        this.dataList = res.data.data.listInfo;
      });
    }
  }
};
</script>

7. Verwende im Template eine v-for-Direktive, um die Listenelemente zu rendern:

<template>
  <div class="list">
    <!-- TODO -->
    <div class="list-item" v-for="item in dataList" :key="item.id">
      <img class="list-pic" :src="item.imgUrl" />
      <div class="list-info">
        <p class="title">{{ item.title }}</p>
        <p class="desc">{{ item.desc }}</p>
      </div>
    </div>
  </div>
</template>

In diesem Schritt wird sichergestellt, dass die Startseite-Beitragsliste-Daten aus der Datei public/static/data/list.json abgerufen und an die List.vue-Komponente gebunden werden.

Indem du diese Schritte folgst, hast du die Dynamisierung der Startseite-Daten abgeschlossen, einschließlich des Abrufens der Daten aus der Datei public/static/data/list.json und des Renderns der Listenelemente im gewünschten Layout.

Das fertige Ergebnis ist wie folgt:

Zusammenfassung

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