Advertisement
  1. Code
  2. Node.js

Erstellen Sie Webanwendungen mit Node.js.

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Einführung

Neben dem Erstellen von APIs eignet sich Node.js hervorragend zum Erstellen von Standard-Webanwendungen. Es verfügt über leistungsstarke Werkzeugs, die den Geschmack von Webentwicklern erfüllen. In diesem Lernprogramm erstellen Sie eine Webanwendung, die als lokale Bibliothek dienen kann.

Während des Erstellens lernen Sie einige Arten von Middleware kennen, erfahren, wie Sie mit dem Senden von Formularen in Node.js umgehen, und Sie können auch auf zwei Modelle verweisen.

Lass uns anfangen.

Loslegen

Installieren Sie zunächst den Expressgenerator auf Ihrer Maschine.

Führen Sie den Befehl express generator aus, um Ihre Anwendung zu generieren.

Migrieren Sie nun in Ihre Arbeit, öffnen Sie package.json und stellen Sie die Abhängigkeiten ähnlich wie unten dar.

Führen Sie den Befehl aus, um die Pakete zu installieren.

Richten Sie die Eingabedatei ein

app.js wurde erstellt, als Sie den Generatorbefehl ausgeführt haben. Sie müssen jedoch eine zusätzliche Konfiguration einrichten. Bearbeiten Sie die Datei so, dass sie wie folgt aussieht.

  1. Sie haben die beiden Routen benötigt, die Sie beim Erstellen dieser Anwendung verwenden werden. Sie werden die Routendatei in Kürze erstellen. Die erforderlichen Routen werden als Werte zwei verschiedenen Variablen zugewiesen, die beim Einrichten der Middleware für Ihre Routen verwendet werden.
  2. Sie setzen Mongoose auf global.Promise. Der Variablen MongoDB wird die MONGODB_URI Ihrer Umgebung oder der Pfad zu Ihrem lokalen Mongo-Server zugewiesen. Diese Variable wird als Argument für die Verbindung zum laufenden MongoDB-Server übergeben.
  3. Sie richten die Sitzungs-Middleware mit express-session ein. Diese Middleware ist wichtig, da in einigen Teilen Ihrer Anwendung Flash-Meldungen angezeigt werden.
  4. Sie richten die Middleware zur Validierung ein. Diese Middleware wird zur Überprüfung der Formulareingabe verwendet, um sicherzustellen, dass Benutzer der Anwendung kein leeres Formular senden. Die Validierung verwendet ein installiertes Paket, express-validator.
  5. Sie richten eine Middleware ein, die sich beim Anzeigen von Flash-Nachrichten als nützlich erweist. Diese Middleware verwendet connect-flash.
  6. Die Routen für die Anwendung sind so eingerichtet, dass sie die von Ihnen benötigte Routendatei verwenden. Anfragen, die auf /genres und /books verweisen, verwenden die Genres- bzw. Buchroutendateien. In diesem Moment haben Sie die Routendateien noch nicht erstellt, aber Sie werden dies bald tun.

Buch- und Genre-Modell

Das Buchmodell verwendet das Mungo-Schema, um zu definieren, wie die Bücher strukturiert werden. Erstellen Sie ein Verzeichnis mit dem Namen models und eine neue Datei mit dem Namen Book.js. So sieht es aus.

Hier haben Sie vier Felder. Das letzte Feld wird verwendet, um das Genre zu speichern, zu dem jedes Buch gehört. Das Genre-Feld hier verweist auf das Genre-Modell, das als nächstes erstellt wird. Aus diesem Grund wird der Typ auf Schema.Types.ObjectId festgelegt. Hier werden die IDs der einzelnen Genres gespeichert, auf die verwiesen wird. ref gibt das Modell an, auf das Sie verweisen. Beachten Sie, dass das Genre als Array gespeichert wird. Dies bedeutet, dass ein Buch mehr als ein Genre haben kann.

Lassen Sie uns fortfahren und das Genre-Modell erstellen.

Für Ihr Genre benötigen Sie nur ein Feld: name.

Genre Index Route und Ansicht

In diesem Tutorial verwenden Sie zwei Routenpfade für Ihr Genre: einen Pfad zum Hinzufügen neuer Genres und einen anderen, der die Genres auflistet, über die Sie verfügen. Erstellen Sie in Ihrem Routenverzeichnis eine Datei mit dem Namen genres.js.

Beginnen Sie damit, dass Sie alle Module benötigen, die Sie verwenden werden.

Geben Sie als Nächstes die Route ein, die die Indexdatei für Ihre Genres verarbeitet.

Diese Route wird immer dann aufgerufen, wenn Anfragen an /genres gestellt werden. Hier rufen Sie die Suchmethode für Ihr Genre-Modell auf, um alle erstellten Genres abzurufen. Diese Genres werden dann in einer Vorlage namens genres gerendert. Lassen Sie uns fortfahren und das erstellen, aber aktualisieren Sie zuerst Ihr layout.pug so, dass es so aussieht:

Dies gibt Ihren Ansichten eine schöne Struktur, um die Navigation zu erleichtern. Erstellen Sie nun eine Ansichtsdatei mit dem Namen genre.pug. In dieser Datei durchlaufen Sie die erstellten Genres und geben jedes Genre in einer ungeordneten Liste aus.

So sollte die Datei aussehen.

Neue Genre-Routen hinzufügen und anzeigen

Kehren Sie zu Ihren routes/genres.js zurück, um die Routen hinzuzufügen, die für die Erstellung neuer Genres verwendet werden.

  1. Die Aufgabe dieses Routers besteht darin, einfach die Seite zum Hinzufügen neuer Routen anzuzeigen. Dieser Router wird aufgerufen, wenn Anforderungen an /genres/add path gestellt werden.
  2. Dieser Router übernimmt die Übermittlung des Formulars. Wenn das Formular gesendet wird, prüfen wir, ob der Benutzer einen Namen eingegeben hat. Wenn kein Name eingegeben wird, wird die Seite neu gerendert. Wenn die Überprüfungen noch nicht abgeschlossen sind, wird das Genre gespeichert und der Benutzer wird zur Seite /genres weitergeleitet.
  3. Das Modul wird als Router exportiert.

Jetzt können Sie die Seite zum Hinzufügen eines neuen Genres erstellen.

Bücher Routen und Ansicht

Erstellen Sie eine neue Routendatei für Bücher und nennen Sie sie books.js. Wie Sie es zuvor mit dem Genre getan haben, benötigen Sie zunächst die erforderlichen Module.

Richten Sie als Nächstes den Router für die Anzeige aller in der Bibliothek gespeicherten Bücher ein. Versuchen Sie das selbst auf die Art und Weise, wie Sie das Genre einrichten. Sie können jederzeit zurückschauen, um Korrekturen vorzunehmen.

Ich denke, Sie haben das ausprobiert - so sollte es aussehen.

Wenn dieser Router aufgerufen wird, wird eine Anforderung gestellt, alle in der Datenbank gespeicherten Bücher zu finden. Wenn alles gut geht, werden die Bücher auf der Seite /books angezeigt, andernfalls wird ein Fehler ausgegeben.

Sie müssen eine neue Datei erstellen, um alle Bücher anzuzeigen. So sollte sie aussehen.

Sie durchlaufen einfach die zurückgegebenen Bücher und geben den Namen und die Beschreibung jedes Buches mithilfe einer ungeordneten Liste aus. Der Name des Buches verweist auf die einzelne Seite des Buches.

Neue Buchrouten hinzufügen und anzeigen

Der nächste von Ihnen eingerichtete Router übernimmt das Hinzufügen neuer Bücher. Hier werden zwei Router verwendet: Einer rendert einfach die Seite und ein anderer übernimmt die Übermittlung des Formulars.

So sehen die Router aus.

Im ersten Router wird die Seite /addBooks angezeigt. Dieser Router wird aufgerufen, wenn eine Anforderung an /add path gestellt wird. Da hinzugefügte Bücher Genres haben sollen, möchten Sie die Genres anzeigen, die in der Datenbank gespeichert wurden.

Der obige Code findet alle Genres in Ihrer Datenbank und gibt sie in den variablen Genres zurück. Auf diese Weise können Sie die Genres durchlaufen und als Kontrollkästchen anzeigen.

Der zweite Router übernimmt die Übermittlung des Formulars. Zunächst überprüfen Sie den Hauptteil der Anforderung, um sicherzustellen, dass einige Felder nicht leer sind. Hier bietet sich die in app.js festgelegte express-validator-Middleware an. Bei Fehlern wird die Seite neu gerendert. Wenn keine vorhanden sind, wird die neue Buchinstanz gespeichert und der Benutzer wird zur Seite /books weitergeleitet.

Lassen Sie uns fortfahren und die Ansichten dafür erstellen.

Erstellen Sie eine neue Ansichtsdatei mit dem Namen addBooks.pug. Beachten Sie, dass der Name der Ansicht mit dem ersten Parameter übereinstimmt, der res.render zugewiesen wurde. Dies liegt daran, dass Sie eine Vorlage rendern. Während der Umleitung übergeben Sie einfach den Pfad, zu dem Sie umleiten möchten, wie Sie es mit res.redirect('/books') getan haben.

Nachdem dies festgestellt wurde, sollten die Ansichten wie folgt aussehen.

Das Wichtigste dabei ist die Formaktion und -methode. Wenn Sie auf die Schaltfläche "Senden" klicken, senden Sie eine POST-Anfrage an /books/add. Eine andere Sache - Sie durchlaufen erneut die Sammlung der zurückgegebenen Genres und zeigen jedes einzelne an.

Buch Route und Ansicht anzeigen

Lassen Sie uns in die Route eintauchen, um die an jede Buchseite gestellten Anfragen zu bearbeiten. Während Sie dort sind, ist es wichtig, auch Ihr Modul zu exportieren.

Hier passiert keine Magie.

Erstens müssen Anforderungen an diesen Router eine ID haben: die ID des Buches. Diese ID wird aus den Parametern der Anforderung mit req.params.id abgerufen. Dies wird verwendet, um das spezifische Buch zu identifizieren, das aus der Datenbank abgerufen werden soll, da die IDs eindeutig sind. Wenn das Buch gefunden wurde, wird der Genrewert des Buches mit allen Genres gefüllt, die in dieser Buchinstanz gespeichert wurden. Wenn alles gut geht, wird die Buchansicht gerendert, andernfalls wird ein Fehler ausgegeben.

Lassen Sie uns die Ansicht für ein Buch erstellen. So sollte es aussehen.

Sie können Ihren Knotenserver starten, indem Sie Folgendes ausführen:

Abschluss

Jetzt wissen Sie, wie Sie in Node.js eine Standard-Webanwendung erstellen, nicht nur eine einfach zu erledigende App. Sie konnten die Formularübermittlung durchführen, auf zwei Modelle verweisen und Middleware einrichten.

Sie können noch weiter gehen, indem Sie die Anwendung erweitern. Versuchen Sie, die Möglichkeit zum Löschen eines Buches hinzuzufügen. Fügen Sie zuerst eine Schaltfläche zur Show-Seite hinzu, gehen Sie dann zu den Routendateien und fügen Sie dazu einen Router hinzu. Beachten Sie, dass dies eine POST-Anforderung sein wird.

Sie können sich auch weitere Funktionen vorstellen, die Sie der Anwendung hinzufügen können. Ich hoffe, dass es Ihnen gefallen hat.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.