Wish Sticky Note App mit Vue.js

Einführung

In diesem Projekt lernst du, wie du eine Anwendung "Wunsch-Sticky Note" mit Vue.js und der Element-UI-Bibliothek erstellst. Ziel des Projekts ist es, eine anonyme und bequeme Plattform bereitzustellen, auf der Menschen ihre Ziele, Ideale und Aspirationen auf sichere und vertrauliche Weise ausdrücken können.

👀 Vorschau

Wenn die Feldvalidierungsbedingungen nicht erfüllt sind, wird der folgende Fehler gemeldet:

Nachdem die Bedingungen erfüllt und der Wunsch abgeschickt wurden, sieht das Ergebnis wie folgt aus:

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Projektstruktur einrichtest und die erforderlichen Dateien und Ordner vorbereitest.
• Wie du das abgeschlossene Formular auf der Wunschmauer darstellst.
• Wie du die Formulareingabe validierst, um sicherzustellen, dass die Eingabefelder die erforderlichen Kriterien erfüllen.
• Wie du die Formularübermittlung und die Zurücksetzung der Funktionen behandelst.
• Wie du die Bildhochladung und die Vorschaufunktion implementierst.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Ein Vue.js-Projekt zu strukturieren und zu organisieren.
• Die Element-UI-Bibliothek zum Erstellen von Formularen und zur Behandlung von Benutzereingaben zu verwenden.
• Die Formulareingabe mit den Element-UI-Validierungsregeln zu validieren.
• Dateihochladungen und Bildvorschaus in einer Vue.js-Anwendung zu behandeln.
• Den Zustand zu verwalten und die Benutzeroberfläche basierend auf Benutzereingaben zu aktualisieren.

Projektstruktur einrichten

In diesem Schritt wirst du die Projektstruktur einrichten und die erforderlichen Dateien und Ordner vorbereiten.

Öffne den Projektordner in deinem Code-Editor. Die Verzeichnisstruktur ist wie folgt:

├── css
│   ├── fonts
│   │   ├── element-icons.ttf
│   │   └── element-icons.woff
│   ├── index.css
│   └── wish.css
├── images
│   ├── bg.jfif
│   └── ding.png
├── index.html
└── js
    ├── index.js
    └── vue.min.js

Dabei gilt:

• css ist der Ordner, in dem die Projektstile für element-ui gespeichert sind.
• images ist der Bilderordner.
• index.html ist die Hauptseite.
• js ist der Ordner für die von dem Projekt abhängigen JavaScript-Bibliotheken.

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 auf der VM und aktualisiere es manuell, um die Seite zu sehen.

Die Seite führt keine Validierung der Eingabemaske beim Initialisieren durch und der Wunschbeitrag erscheint nicht, nachdem die Eingabe abgeschickt wurde.

Vollständiges Formular auf der Wunschmauer anzeigen

In diesem Schritt wirst du die Datei index.html ändern, um das fertige Formular auf der Wunschmauer darzustellen.

1. Öffne die Datei index.html im Projektordner.
2. Suche den TODO-Kommentar in der Datei index.html und nachdem ich das Problem im Code beobachtet habe, stellte ich fest, dass der Code in v-for="(item,index) in []" problematisch ist und habe es in den folgenden Code geändert:

<!-- TODO -->
<div
  class="card"
  :class="item.css"
  v-for="(item,index) in wishList"
  :key="index"
>
  <!--... -->
</div>

Der Code im <div>-Element mit dem Attribut class="card" wird den Namen, den Inhalt und das Bild (sofern vorhanden) des fertigen Formulars auf der Wunschmauer anzeigen.

Formulareingaben validieren

In diesem Schritt wirst du die Formulareingabe validieren, um sicherzustellen, dass die Eingabefelder die erforderlichen Kriterien erfüllen.

1. Öffne die Datei index.html im Projektordner.
2. Suche das rules-Objekt im data-Abschnitt deiner Vue-Instanz und füge den folgenden Code hinzu:

rules: {
  // TODO
  name: [
    {
      required: true,
      message: "Bitte gib deinen Namen ein",
      trigger: "blur"
    },
    {
      min: 2,
      max: 4,
      message: "Die Länge sollte zwischen 2 und 4 Zeichen betragen",
      trigger: "blur"
    }
  ],
  content: [
    {
      required: true,
      message: "Bitte gib einen Inhalt ein",
      trigger: "blur"
    },
    {
      min: 1,
      max: 30,
      message: "Die Länge sollte zwischen 1 und 30 Zeichen betragen",
      trigger: "blur"
    }
  ]
},

3. Definiere in den name- und content-Eigenschaften des rules-Objekts die Validierungsregeln:

   • name: Das Namensfeld ist erforderlich und muss zwischen 2 und 4 Zeichen lang sein.
   • content: Das Inhaltsfeld ist erforderlich und muss zwischen 1 und 30 Zeichen lang sein.

4. Mit diesen Validierungsregeln wird das Formular nun Fehlermeldungen anzeigen, wenn die Eingabefelder die angegebenen Kriterien nicht erfüllen.

5. Nachdem die Bedingungen erfüllt und der Wunsch abgeschickt wurden, sieht das Ergebnis 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.