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.
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:
├── 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.cssist die Stylesheet-Datei.index.htmlist die Hauptseite.js/vue.min.jsundjs/http-vue-loader.jssind Dateien, die mit der Vue-Bibliothek zusammenhängen.trolley.vueist 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.
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 dasgoods-Array, das die Produktinformationen enthält. Diese Daten werden verwendet, um die Produkte im Abschnitt "Warenliste" anzuzeigen. - Füge den folgenden Code im Abschnitt
methodshinzu:
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 imdataTransfer-Objekt, das später in derdrop-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 dasdrop-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 demdataTransfer-Objekt ab und fügt das Produkt dembought-Array hinzu.
- Im Abschnitt
computedfü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
totalPriceberechnet den Gesamtpreis der Produkte im Warenkorb. - Die berechnete Eigenschaft
goodsDetailgeneriert die Details der Produkte im Warenkorb, indem der Produktname und die Menge angezeigt werden.
Bindung von Drag- und Drop-Events an HTML
In diesem Schritt müssen wir das Drag-and-Drop-Ereignis an das div-Tag binden.
- Im
template-Abschnitt der Dateitrolley.vuefinde 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>
Den Online-Warenkorb testen
- 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.
Zusammenfassung
Herzlichen Glückwunsch! Sie haben dieses Projekt abgeschlossen. Sie können in LabEx weitere Übungen absolvieren, um Ihre Fähigkeiten zu verbessern.
