Kinokartenbuchungssystem

Einführung

In diesem Projekt lernst du, wie ein Filmkartenbuchungssystem aufgebaut wird. Das Projekt umfasst das asynchrone Abrufen von Filmdaten, das Rendern der Filminformationen auf der Webseite und die Implementierung der Funktionen für die Sitzplatzauswahl und die Gesamtpreisberechnung.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du mit der axios-Bibliothek Daten asynchron abrufst
• Wie du Filminformationen, einschließlich des Filmnamens, des Preises und der Sitzplatzverfügbarkeit, auf der Webseite darstellst
• Wie du die Funktionalität der Sitzplatzauswahl implementierst und die Anzahl der ausgewählten Sitze und den Gesamtpreis entsprechend aktualisierst
• Wie du die Anzeige aktualisierst, um die aktuelle Anzahl der ausgewählten Sitze und den Gesamtpreis anzuzeigen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Daten asynchron mit der axios-Bibliothek abzurufen
• Die DOM manipulieren, um dynamische Inhalte anzuzeigen
• Interaktive Benutzeroberflächen mit Ereignisbehandlung zu implementieren
• Die Benutzeroberfläche basierend auf Benutzeraktionen zu aktualisieren

Skills Graph

Projektstruktur einrichten

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

Öffne das Projektverzeichnis. Die Verzeichnisstruktur ist wie folgt:

├── css
│   └── style.css
├── data.json
├── index.html
├── effect.gif
└── js
    ├── axios.min.js
    └── script.js

Darin:

• index.html ist die Hauptseite.
• css/style.css ist die bereitgestellte Seitenstildatei.
• data.json ist die zu erfragende Datendatei.
• js/axios.min.js ist die axios-Anfragebibliothekdatei.
• js/script.js ist die Datei, in der du den Code ergänzen musst.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne die Option "Web 8080" oben im VM und aktualisiere die Seite manuell, um das folgende Ergebnis in deinem Browser zu sehen:

Asynchrone Datenabrufen und Rendern

In diesem Schritt wirst du lernen, wie du mit der axios-Bibliothek Daten asynchron abrufst und die Filminformationen auf die Webseite rendern.

1. Öffne die Datei js/script.js.

2. Verwende axios.get(), um die Daten aus der Datei data.json abzurufen:

   let data = {};
   axios
     .get("../data.json")
     .then((res) => {
       console.log(res);
       data = res.data;
       movieNameNode.innerHTML = data.name;
       moviePriceNode.innerHTML = data.price;
       data.seats.forEach((item) => {
         let row = document.createElement("div");
         row.className = "row";
         item.forEach((item) => {
           let seat = document.createElement("div");
           seat.className = "seat";
           row.appendChild(seat);
           if (item) {
             seat.classList.add("occupied");
           }
         });
         seatAreaNode.appendChild(row);
       });
     })
     .catch((err) => {
       console.log(err);
     });

3. Der obige Code ruft die Daten aus der Datei data.json ab, aktualisiert dann den Filmnamen und den Preis in den entsprechenden DOM-Knoten. Er erzeugt auch die Sitzfläche, indem er für jede Reihe im data.seats-Array eine Reihe von Sitzknoten erstellt und der "occupied"-Klasse denjenigen Sitzplätzen hinzufügt, die bereits gebucht sind.

Sitzplatzauswahl und Gesamtpreisberechnung

In diesem Schritt wirst du die Funktionalität der Sitzplatzauswahl und der Gesamtpreisberechnung implementieren.

1. Öffne die Datei js/script.js.

2. Initialisiere die Variablen, um alle Sitzknoten in der Sitzfläche zu erhalten:

   const seatNodes = document.querySelectorAll(".seat");

3. Initialisiere die Variablen, um die Anzahl der ausgewählten Sitze und den Gesamtpreis zu verfolgen:

   let selectedSeatsCount = 0;
   let totalPrice = 0;

4. Füge einem Klickereignis-Listener zur Sitzfläche hinzu:

   seatAreaNode.addEventListener("click", (event) => {
     const clickedSeat = event.target;
     if (
       clickedSeat.classList.contains("seat") &&
       !clickedSeat.classList.contains("occupied")
     ) {
       clickedSeat.classList.toggle("selected");
       if (clickedSeat.classList.contains("selected")) {
         selectedSeatsCount++;
         totalPrice += data.price;
       } else {
         selectedSeatsCount--;
         totalPrice -= data.price;
       }
   
       updateDisplay();
     }
   });

   Der obige Code fügt einem Klickereignis-Listener zur Sitzfläche hinzu. Wenn ein nicht belegter Sitz angeklickt wird, wechselt er die "selected"-Klasse am Sitzknoten und aktualisiert die Variablen selectedSeatsCount und totalPrice entsprechend.

5. Implementiere die updateDisplay()-Funktion, um die Anzahl der ausgewählten Sitze und den Gesamtpreis zu aktualisieren:

   function updateDisplay() {
     count.textContent = selectedSeatsCount;
     total.textContent = totalPrice;
   }

   Diese Funktion aktualisiert den Textinhalt der Knoten mit den IDs "count" und "total", um die aktuelle Anzahl der ausgewählten Sitze und den Gesamtpreis anzuzeigen.

Nach Abschluss dieser Schritte sollte die Funktionalität der Filmkartenbuchung vollständig implementiert sein, sodass Benutzer Sitzplätze auswählen und den Gesamtpreis sehen können. Die Endseite sieht wie folgt aus:

Zusammenfassung

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