Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Moderne Webanwendungen mit Node.js und Express.js

Daten via POST entgegennehmen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Formulardaten erlauben es dem Nutzer, Daten mittels POST an den eigenen Server zu übertragen und für die Verarbeitung zu verwenden.

Transkript

Web-Anwendungen leben davon, dass Nutzer Dateneingaben machen. Letztendlich ist es also Ziel, Formulardaten eines Nutzers entgegenzunehmen und weiterzuverarbeiten. Für diesen Zweck gibt es die Konvention des "bodyParser" im Express Framework. Das Kombinieren von Formulardaten und bodyParser ist Thema des folgenden Videos. Mein Ziel ist es jetzt, auf meinen Artikeln Kommentare von Nutzern entgegennehmen zu können. Dafür begebe ich mich einmal in mein Datenmodell und sehe aktuell, dass die Posts über dieses Objekt gesteuert werden. Sobald mir jemand einen Kommentar schicken will, muss ich zwischen beiden Posts unterscheiden können, weshalb ich nun zusätzlich eine ID vergeben werde. Des weiteren brauche ich nun Platz, um die Kommentare zu speichern. Um die Kommentare auch zu behalten und nicht nur innerhalb des Render-Aufrufs immer wieder neu zu initialisieren, speichere ich sie nun außerhalb der Methode. Das Resultat samt IDs und vorinitialisierten Kommentaren sieht dann so aus: Aktuell sind keine Kommentare hinterlegt. Innerhalb meines JSON-Objektes referenziere ich jetzt lediglich nur noch das Objekt "posts" von außen. Zum jetzigen Zeitpunkt habe ich also Möglichkeiten, Kommentare zu sichern, aber noch nicht anzuzeigen. Deshalb öffne ich nun meine "posts.jade"-VIEW-Datei und füge hier entsprechend diese Möglichkeit hinzu. Ich prüfe also an dieser Stelle, ob Kommentare vorliegen und sobald das der Fall ist, füge ich entsprechend für jeden Kommentar einen neuen Eintrag hinzu. Als nächstes muss ich noch die Möglichkeit schaffen, einen Kommentar auch eintragen zu können. Ich trenne also noch einmal einen Bereich ab, lege ein Formular an, das mit einer "post"-Aktion auf die URL "/posts/addcomment" schreibt. Es gibt ein Field "_id", das entsprechend aus dem Post die ID bezieht und ein Feld mit der Bezeichnung "Kommentar", das den Kommentar repräsentieren wird, der dann an den Server übertragen wird. Als nächstes muss ich also dafür sorgen, dass die Route "/posts/addcomment" existiert. Ich kehre also zurück in die "posts.js"-Datei und füge eine neue Route hinzu. Das Besondere an dieser Route ist also nun, dass sie mit "addcomment" bezeichnet ist und dass sie statt dem "get"-Befehl den "post"-Befehl entgegennimmt. Was ich jetzt schon mit Bestimmtheit sagen kann, ist, dass ich sobald ich eine Antwort bekomme, vom Client, also vom Browser, muss ich in meiner Liste von Posts nach dem richtgen Post suchen und den Kommentar hinzufügen, der sich zu diesem Zeitpunkt in der Variable "comment" befinden wird. Sobald ich das getan habe, möchte ich, dass der Nutzer automatisch weitergeleitet wird, um die Posts-Seite wieder zu sehen. Dafür nutze ich also den Befehl "res.redirect" auf die URL "/posts". Als nächstes nutze ich nun eine Funktionalität einer Bibliothek für Express, dem sogenannten "bodyParser", um die Variablen aus der Anfrage herauszulesen. Auf dem "body"-Objekt des Requests befindet sich also "comment" und "_id", das die jeweiligen Felder des Formulars sind. Diese übertrage ich in meine Variablen "comment" und "_id", um entsprechend hier an der Stelle damit weiterzuarbeiten. Als nächstes muss ich also das Modul "bodyParser" mit "npm install" in meinem Projekt installieren. Die letzten Änderungen nehme ich nun am Ordner "bin" an der "www.js" vor. Hier muss der bodyParser entsprechend eingebunden werden. Mit dem Befehl "app.use" und "bodyParser.json" wandle ich also nun Anfragen, die als URL encodiert vom Webbrowser kommen, in JSON um, die im Umkehrschluss dann auf der Route vom "body"-Objekt gelesen werden. Ich starte nun also meine Anwendung und erhalte die Fehlermeldung, dass "bodyParser.json" nicht bekannt ist. Das ist ein typischer Fehler, der darauf zurückgeht, dass ich zunächst einmal natürlich das Modul "bodyParser" laden muss. Starte ich die Anwendung nun noch einmal, startet alles wie erwartet und auf meiner Posts-Seite finde ich nun die Möglichkeit, Kommentare hinzuzufügen. Ich füge nun den Kommentar "Test" hinzu und dieser wurde auf dem Artikel hinterlegt. Hierbei bleiben allerdings noch einige Bauchschmerzen zurück. Denn wenn ich nun den Server neu starte und die Website nun aktualisiere, so sind alle meine Kommentare nun verloren. Das liegt daran, dass sie nur im Arbeitsspeicher gesichert werden und nicht auf der Festplatte. Mithilfe von Formulardaten habe ich nun also eine Kommentarfunktion als Formular implementiert. Dafür war es notwendig, eine neue Route hinzuzufügen, die entsprechende Post-Daten entgegennimmt. Der bodyParser kümmert sich dann darum, die Daten aus dem Formular in JSON-Form zu bringen und mir dann bereitzustellen, sodass ich sie weiterverarbeiten kann.

Moderne Webanwendungen mit Node.js und Express.js

Entwickeln Sie auf der Open-Source-Plattform Node.js kompakte und performante Webapplikationen und lernen Sie weiterführende Konzepte professioneller Webentwicklung kennen.

2 Std. 20 min (24 Videos)
Info: rester(options) unsupported since v2.0
Heiko K.

Zur info ab 2:24 min: rest.rester(options) wird seit Version 2.0 nicht mehr unterstützt. Stattdessen: var Rest = require('connect-rest'); ... var rest = Rest.create(options); ... // Alle Posts abfragen: app.use(rest.processRequest()); ... Grund war die Verbesserung von Stabilität und Leistung. https://www.npmjs.com/package/connect-rest btw: Super Tutorial!

 
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2015

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!