Zeitumrechnungstool mit Vue.js

Einführung

In diesem Projekt lernst du, wie du mithilfe von Vue.js ein Zeitumrechnungstool erstellen kannst. Dieses Tool ermöglicht es dir, zwischen Daten und Zeitstempeln umzurechnen, was in vielen Geschäftsanwendungen ein häufiges Anforderung ist.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du ein Vue.js-Projekt einrichtest und die bereitgestellte Code-Struktur verstehst
• Wie du die Funktionalität implementierst, um zwischen Daten und Zeitstempeln umzurechnen
• Wie du sicherstellst, dass die Umrechnungsergebnisse im gewünschten Format korrekt angezeigt werden

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Vue.js zum Erstellen einer einfachen Webanwendung zu verwenden
• Datum- und Zeitdaten in einer Webanwendung zu verarbeiten
• Zwischen verschiedenen Zeitdarstellungen, wie Daten und Zeitstempeln, umzurechnen
• Die Korrektheit der Umrechnungsfunktionalität zu testen und zu verifizieren

Projektstruktur 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 sieht wie folgt aus:

├── element-ui.css
├── element-ui.js
├── index.html
└── vue.js

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

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Echtzeit-Suchfunktionalität implementieren

In diesem Schritt wirst du die Funktionalität implementieren, um zwischen Daten und Zeitstempeln umzurechnen.

1. Locate the handleTransform() method in the Vue.js instance.

2. Inside the handleTransform() method, you need to add the logic to convert between dates and timestamps.

3. If the formInline.date is not empty and the formInline.timeStamp is empty, you should convert the date value to a 13-digit timestamp and update the formInline.timeStamp accordingly.

   let date = this.formInline.date;
   let timeStamp = this.formInline.timeStamp;
   if (date && !timeStamp) {
     let newValue = new Date(date);
     this.formInline.timeStamp = newValue.getTime();
   }
   

4. If the formInline.date is empty and the formInline.timeStamp is not empty, you should convert the timestamp value to a date string in the format YYYY-MM-DD hh:mm:ss and update the formInline.date accordingly.

   if (!date && timeStamp) {
     timeStamp = new Number(timeStamp);
     let d = new Date(timeStamp);
     var Y = d.getFullYear() + "-";
     var M =
       (d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1) +
       "-";
     var D = d.getDate() < 10 ? "0" + d.getDate() + " " : d.getDate() + " ";
     var H = d.getHours() + ":";
     var M2 =
       (d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes()) + ":";
     var S = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
     this.formInline.date = Y + M + D + H + M2 + S;
   }
   

5. The full code is below:

   handleTransform() {
      // TODO
      let date = this.formInline.date;
      let timeStamp = this.formInline.timeStamp;
      if (date &&!timeStamp) {
        let newValue = new Date(date);
        this.formInline.timeStamp = newValue.getTime();
      }
      if (!date && timeStamp) {
        timeStamp = new Number(timeStamp);
        let d = new Date(timeStamp);
        var Y = d.getFullYear() + "-";
        var M =
          (d.getMonth() + 1 < 10
           ? "0" + (d.getMonth() + 1)
            : d.getMonth() + 1) + "-";
        var D =
          d.getDate() < 10? "0" + d.getDate() + " " : d.getDate() + " ";
        var H = d.getHours() + ":";
        var M2 =
          (d.getMinutes() < 10? "0" + d.getMinutes() : d.getMinutes()) +
          ":";
        var S =
          d.getSeconds() < 10? "0" + d.getSeconds() : d.getSeconds();
        this.formInline.date = Y + M + D + H + M2 + S;
      }
   }
   

6. Save the index.html file and refresh the web page. Test the conversion functionality by entering or selecting a date and time, and then clicking the "convert" button.

Überprüfen der Umrechnungsergebnisse

In diesem Schritt wirst du überprüfen, ob die Umrechnung zwischen Daten und Zeitstempeln wie erwartet funktioniert.

1. Öffne die Webseite und beobachte die Umrechnungsergebnisse.
2. Wenn du ein Datum und eine Uhrzeit im Datum-Uhrzeit-Wähler eingibst oder auswählst, sollte das Zeitstempel-Eingabefeld die entsprechende 13-stellige Zeitstempel anzeigen.
3. Wenn du eine 13-stellige Zeitstempel im Zeitstempel-Eingabefeld eingibst, sollte der Datum-Uhrzeit-Wähler das richtige Datum und die richtige Uhrzeit anzeigen.
4. Stelle sicher, dass das Datumsformat als YYYY-MM-DD hh:mm:ss angezeigt wird und dass der Zeitstempel 13 Stellen lang ist.
5. Teste die Umrechnung in beiden Richtungen, um sicherzustellen, dass sie richtig funktioniert.

Glückwunsch! Du hast erfolgreich das Datum-Zeitstempel-Umrechnungstool mit Vue.js implementiert. Wenn du weitere Fragen hast oder zusätzliche Hilfe benötigst, kannst du gerne fragen.

Zusammenfassung

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