Responsives Produktlistenlayout | Vue.js-Tutorial

Einführung

In diesem Projekt lernst du, wie du eine responsive Produktliste mit einem Schaltfeature erstellen kannst. Dieses Feature ermöglicht es Benutzern, leicht zwischen einer Grid-Ansicht und einer Listenansicht der Produktitems umzuschalten.

👀 Vorschau

responsive layout switching demo

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Projektstruktur einrichtest und den Zweck jeder Datei und jedes Ordners verstehst
Wie du Daten aus einer JSON-Datei abrufst und die Produktliste befüllst
Wie du die Layoutumschaltfunktionalität mit Vue.js implementierst
Wie du die Grid- und Listenlayouts bedingt basierend auf der ausgewählten Ansicht rendierst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Ein Vue.js-Projekt effektiv zu strukturieren
Axios verwenden, um Daten aus einer JSON-Datei abzurufen
Vue.js-Direktiven wie v-if und v-else nutzen, um Inhalte bedingt zu rendern
Benutzerinteraktionen zu verarbeiten und die Benutzeroberfläche entsprechend zu aktualisieren

Projektstruktur einrichten

In diesem Schritt lernst du, wie du die Projektstruktur für das Layoutumschaltprojekt einrichtest. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner für dieses Projekt. Die Verzeichnisstruktur ist wie folgt:

├── css
├── images
├── js
│    ├── axios.min.js
│    └── vue.js
├── goodsList.json
└── index.html

Vertraut dich mit dem Zweck jedes Ordners und jeder Datei:
- css: Dieser Ordner ist für Stylingsdateien.
- images: Dieser Ordner ist für Bilder.
- js/vue.js: Dies ist die Vue 2.x-Datei.
- js/axios.min.js: Dies ist die Axios-Datei.
- goodsList.json: Dies sind die für die Anfrage erforderlichen Daten.
- index.html: Dies enthält das Seitenlayout und die Logik.
Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
Öffne "Web 8080" oben im VM und aktualisiere es manuell, um die Seite zu sehen.

Datenabruf implementieren

In diesem Schritt lernst du, wie du die für das Projekt erforderlichen Daten abrufst. Folge den Schritten unten, um diesen Schritt abzuschließen:

Im index.html-File finde das <script>-Tag am Ende der Datei.
Innerhalb des <script>-Tags erstelle eine neue Vue-Instanz mit new Vue().
Im data-Option der Vue-Instanz füge eine goodsList-Eigenschaft hinzu und initialisiere sie als leeres Array.
Im mounted-Hook der Vue-Instanz nutze Axios, um die Daten aus der goodsList.json-Datei abzurufen.
Aktualisiere die goodsList-Daten-Eigenschaft mit den abgerufenen Daten.

Dein Code sollte ungefähr so aussehen:

var vm = new Vue({
  el: "#app",
  data: {
    goodsList: []
  },
  mounted() {
    axios.get("./goodsList.json").then((res) => (this.goodsList = res.data));
  }
});

Layoutumschaltung implementieren

In diesem Schritt lernst du, wie du die Funktionalität der Umschaltung des Produktlistenlayouts implementierst. Folge den Schritten unten, um diesen Schritt abzuschließen:

Im index.html-File finde das <div class="bar">-Element.
Innerhalb dieses Elements füge zwei <a>-Elemente mit den Klassenamen grid-icon und list-icon hinzu.

<div class="bar">
  <a class="grid-icon"></a>
  <a class="list-icon"></a>
</div>

Erstelle eine changeBar-Daten-Eigenschaft in der Vue-Instanz, um den aktuellen Layoutstatus zu verfolgen. Setze den Standardwert auf 0, d.h. es standardmäßig auf das Grid-Layout.

var vm = new Vue({
  el: "#app",
  data: {
    changeBar: 0
    //...
  }
});

Binde das @click-Ereignis an jedes <a>-Element. Wenn der grid-icon-Button geklickt wird, setze changeBar auf 0 und füge die active-Klasse zum grid-icon hinzu. Entferne die active-Klasse vom list-icon.

<div class="bar">
  <a
    class="grid-icon"
    :class="changeBar == 0? 'active' : ''"
    @click="changeBar = 0"
  ></a>
  <!--... -->
</div>

Binde das @click-Ereignis an jedes <a>-Element. Wenn der list-icon-Button geklickt wird, setze changeBar auf 1 und füge die active-Klasse zum list-icon hinzu. Entferne die active-Klasse vom grid-icon.

<div class="bar">
  <!--... -->
  <a
    class="list-icon"
    :class="changeBar == 1? 'active' : ''"
    @click="changeBar = 1"
  ></a>
</div>

Verwende die v-if- und v-else-Direktiven, um die Grid- und Listenlayouts bedingt basierend auf dem Wert von changeBar zu rendern.

<ul class="grid" v-if="changeBar == 0">
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.large" />
    </a>
  </li>
</ul>
<ul class="list" v-else>
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.small" />
    </a>
    <p>{{item.title}}</p>
  </li>
</ul>

Projekt abschließen

In diesem letzten Schritt überprüfst du das abgeschlossene Projekt und stellst sicher, dass es den Anforderungen entspricht.

Vergewissere dich, dass die Daten korrekt aus der goodsList.json-Datei abgerufen werden.
Stelle sicher, dass die Layoutumschaltfunktionalität wie erwartet funktioniert:
- Klicken auf das Grid-Icon ändert das Layout in die Grid-Ansicht und fügt der Grid-Icon die active-Klasse hinzu.
- Klicken auf das Listen-Icon ändert das Layout in die Listenansicht und fügt der Listen-Icon die active-Klasse hinzu.
Teste das Projekt, indem du auf die Symbole klickst und sicherstellst, dass das Layout wie erwartet geändert wird.

Herzlichen Glückwunsch! Du hast das Layoutumschaltprojekt abgeschlossen. Du hast gelernt, wie du: