Implementieren Sie einen Vue.js Warenkorb mit Drag and Drop

Einführung

In diesem Projekt lernst du, wie du einen Online-Warenkorb mit Drag-and-Drop-Funktionalität implementierst. Ziel dieses Projekts ist es, dir das Verständnis und die Anwendung der Konzepte von Vue.js und der von Webbrowsern bereitgestellten Drag-and-Drop-APIs zu vermitteln.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du das Projekt einrichtest und dich mit den bereitgestellten Dateien und der Struktur vertraut machst.
Wie du die Drag-and-Drop-Funktionalität für den Online-Warenkorb implementierst, um Benutzern das Hinzufügen von Produkten zum Warenkorb zu ermöglichen.
Wie du die Warenkorbinformationen anzeigst, einschließlich der Anzahl der Produkte, der Produkt Details und des Gesamtpreises.
Wie du den Online-Warenkorb testest und sicherstellst, dass die Funktionalität wie erwartet funktioniert.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Vue.js zum Aufbau einer Webanwendung zu verwenden.
Die Drag-and-Drop-Funktionalität mit den eingebauten APIs des Webbrowsers zu implementieren.
Dynamische Daten anzuzeigen und die Benutzeroberfläche basierend auf Benutzereingaben zu aktualisieren.
Sauberen und wartbaren Code zu schreiben, indem du deine Anwendung in Komponenten organisiert.

Projekstruktur 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:

├── images
│   ├── book.jpeg
│   ├── box.jpeg
│   ├── paper.jpeg
│   ├── trolley.jpeg
│   └── tv.jpg
├── index.css
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└── trolley.vue

Darin:

Der images-Ordner liefert die von der Seite benötigten Produktbilder.
index.css ist die Stylesheet-Datei.
index.html ist die Hauptseite.
js/vue.min.js und js/http-vue-loader.js sind Dateien, die mit der Vue-Bibliothek zusammenhängen.
trolley.vue ist die zu vervollständige Komponentendatei.

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.

Die Drag-and-Drop-Funktionalität implementieren

In diesem Schritt wirst du die Drag-and-Drop-Funktionalität für den Online-Warenkorb implementieren.

Öffne die Datei trolley.vue.
In der data()-Funktion siehst du das goods-Array, das die Produktinformationen enthält. Diese Daten werden verwendet, um die Produkte im Abschnitt "Warenliste" anzuzeigen.
Füge den folgenden Code im Abschnitt methods hinzu:

methods: {
  dragstart(e, good) {
    e.dataTransfer.setData("name", good.name);
    e.dataTransfer.setData("price", good.price);
  },
  dragover(e) {
    e.preventDefault();
  },
  drop(e) {
    const { bought } = this;
    const name = e.dataTransfer.getData("name");
    const price = e.dataTransfer.getData("price");
    bought.push({ name, price: Number(price) });
  }
}

Erklärung:

Die dragstart-Methode wird aufgerufen, wenn der Benutzer beginnt, ein Produkt zu ziehen. Sie setzt den Produktnamen und den Preis im dataTransfer-Objekt, das später in der drop-Methode abgerufen werden kann.
Die dragover-Methode wird aufgerufen, wenn das gezogene Element über dem Warenkorb ist. Sie verhindert das Standardverhalten des Browsers, was erforderlich ist, damit das drop-Ereignis funktioniert.
Die drop-Methode wird aufgerufen, wenn der Benutzer das gezogene Element in den Warenkorb fallen lässt. Sie ruft den Produktnamen und den Preis aus dem dataTransfer-Objekt ab und fügt das Produkt dem bought-Array hinzu.

Im Abschnitt computed füge den folgenden Code hinzu:

computed: {
  totalPrice() {
    const { bought } = this;
    var sum = 0;
    for (key in bought) {
      sum += bought[key].price;
    }
    return sum;
  },
  goodsDetail() {
    const { bought } = this;
    const names = [];
    const goods = [];
    for (key in bought) {
      names.push(bought[key].name);
    }
    function getRepeatNum() {
      return names.reduce(function (prev, next) {
        prev[next] = prev[next] + 1 || 1;
        return prev;
      }, {});
    }
    for (key in getRepeatNum()) {
      goods.push(`${key}*${getRepeatNum()[key]}`);
    }
    return goods.join(" ");
  }
},

Erklärung:

Die berechnete Eigenschaft totalPrice berechnet den Gesamtpreis der Produkte im Warenkorb.
Die berechnete Eigenschaft goodsDetail generiert die Details der Produkte im Warenkorb, indem der Produktname und die Menge angezeigt werden.

Bindung von Drag-and-Drop-Events an HTML

In diesem Schritt müssen wir das Drag-and-Drop-Ereignis an das div-Tag binden.

Im template-Abschnitt der Datei trolley.vue finde das <div class="good-list">-Element.
Ändere das <div class="good-list">-Element in folgenden Code um:

<div class="good-list">
  <div
    v-for="good in goods"
    :key="good.name"
    class="good"
    draggable="true"
    @dragstart="dragstart($event, good)"
  >
    <img :src="good.cover" draggable="false" />
    <span>{{ good.name }}</span>
    <span>$ {{ good.price }}</span>
  </div>
</div>

Finde das <div class="trolley" id="trolley">-Element.
Ändere das <div class="trolley" id="trolley">-Element in folgenden Code um:

<div id="trolley" class="trolley" @dragover="dragover" @drop="drop">
  <span id="bought" class="bought" v-if="bought.length!== 0"
    >{{ bought.length }}</span
  >
  <img src="./images/trolley.jpeg" />
</div>

Testen des Online-Warenkorbs

Speichere die Datei trolley.vue.
Aktualisiere die Seite, um den Ausgangszustand des Online-Warenkorbs zu sehen.
Versuche, die Produktbilder per Drag-and-Drop in den Warenkorb zu ziehen.
Beobachte die Änderungen im Warenkorb, einschließlich der Anzahl der Produkte, der Produkt Details und des Gesamtpreises.
Stellen Sie sicher, dass die Funktionalität wie erwartet funktioniert.

Die endgültige Implementierung sieht wie folgt aus:

Herzlichen Glückwunsch! Sie haben den Online-Warenkorb erfolgreich mit der bereitgestellten Basisprojekt und der Drag-and-Drop-Funktionalität implementiert.