Formulare mit Express verwalten

Eine der direktesten Möglichkeiten, Benutzerdaten in Webanwendungen zu erhalten, sind Formulare. Obwohl es viele Mechanismen gibt, damit diese Daten unsere Logik- und Anwendungscontroller erreichen, müssen sie im Grunde dieselben Regeln befolgen wie die Formulare HTML, verwenden Sie eine Methode HTTP um die Informationen zu senden.
Die Fähigkeit, Formulare zu verarbeiten und zu manipulieren, ist daher unabdingbar, wenn wir komplette Webanwendungen erstellen wollen, deren Funktionalitäten berücksichtigt werden können und unsere Ideen weiterentwickeln.
1- Um dieses Tutorial durchführen zu können, müssen wir einige vorherige Anforderungen erfüllen, zuerst müssen wir eine Installation von Node.js funktionsfähig, dann müssen wir ein Projekt mit haben äußernEs spielt keine Rolle, dass es keine Ordnerstruktur hat, aber wir benötigen das Framework, um am Speicherort verfügbar zu sein.
2- Wir müssen grundlegende Vorstellungen von haben npm, und von HTML, denn obwohl die Konzepte sehr einfach erklärt werden, gibt es Grundlagen, die nicht erklärt werden, z. B. was ein Tag oder ein HTML-Attribut ist.
3- Schließlich benötigen wir einen Browser und einen Texteditor, um unsere Anwendung schreiben und validieren zu können.
Bevor Sie den Betrieb von . sehen äußern Um die Formulare verarbeiten zu können, müssen wir deren grundlegende Aspekte etwas genauer kennen, da sie ein wesentlicher Bestandteil der Konstruktion unserer Anwendungen sind, wenn wir Benutzerdaten erfassen möchten oder müssen.
Sehen wir uns den folgenden Code an, in dem wir eine einfache Form eines Feldes erstellt haben, das unsere Lieblingsfrucht einfängt.

Ihre Lieblingsfrucht:Senden

In erster Linie muss ein Formular aus einem Label bestehen, in dem es mindestens ein Attribut geben muss Methode die unserem Browser die Art und Weise anzeigt, auf die er uns die Informationen sendet, kann es sein POST oder BEKOMMEN, die die grundlegenden HTTP-Methoden sind, können wir auch ein Attribut namens AktionIst dieser nicht vorhanden, wird das Formular an den gleichen Weg gesendet, der ihn bedient, falls vorhanden, an den angegebenen Weg wie im Beispiel.
Allgemeine MerkmaleIn unserem Formular funktionieren alle Etiketten HTML die wir wollen, aber wichtiger sind die Dateneingaben wie bei den Typen, da diese Labels und ihr Wert diejenigen sind, die zum Zeitpunkt der Ausführung gesendet werden einreichen Dies ist die andere Art von Eingabe, die wir benötigen, da es sich um die Aktionsschaltfläche handelt. Wir erhalten die Daten mit dem Namen, den wir den Objekten gegeben haben Süßkartoffel von jedem der Felder, die wir erstellt haben, ist es auch wichtig, jedem Feld ein ID-Attribut zuzuweisen, das eindeutig ist, um die Elemente darin bearbeiten zu können. SONNE auf elegante Weise.
Wie wir das Formular sehen HTML Obwohl es sich um ein sehr einfaches Element handelt, enthält es mehrere Details, die es wert sind, hervorgehoben, hervorgehoben und erklärt zu werden, um in Zukunft Verwirrung zu vermeiden.
Nach Erhalt eines Formulars haben wir viele Möglichkeiten, unabhängig von dem von uns verwendeten Framework, entweder äußern, Laravel, Django, etc. Es gibt einen Prozess, der gut zu befolgen ist, da dieser unserem Benutzer mitteilt, ob seine Daten empfangen wurden, ob sie verarbeitet wurden oder ob ein Fehler aufgetreten ist. Dieser Prozess kann in zwei Gruppen unterteilt werden, Reaktion und Umleitung.
AntwortenIn dieser Aktionsgruppe können wir, sobald der Benutzer das Formular absendet und wir eine Verarbeitung durchführen, eine Antwort senden HTML gleichzeitig, d.h. wir drucken eine Nachricht oder erstellen eine neue Ansicht, hier können wir Ihnen sagen, ob die Daten richtig waren oder ob ein Fehler aufgetreten ist. Diese Antwort kann Typ sein AJAX, so dass sie generiert wird, ohne die Seite komplett zu laden, oder beim erneuten Laden die neue Ansicht anzeigen, oder einfach eine animierte Nachricht mit generieren JavaScript.
WeiterleitungWenn wir in dieser anderen Gruppe die Informationen verarbeitet haben, die wir umleiten und den Benutzer entweder zu einer anderen Ansicht weiterleiten oder einfach zu einem Bildschirm, auf dem wir uns für die Verwendung unserer Anwendung bedanken, kann es wie die Antwort aussehen, aber was wir tun, ist den Benutzer an eine andere Stelle in unserer Anwendung schicken.
Zur Vorbereitung unserer Bewerbung äußern Um Formulare verarbeiten zu können, müssen wir zunächst ein Plugin namens . installieren Body-Parser, dieser hilft uns, die Daten zu manipulieren, die der Browser uns sendet. Um dies in unserer Konsole zu tun Node.js Wir müssen die Anweisung verwenden:

 npm install --save body-parser

Sehen wir uns die Antwort an, die durch die Ausführung dieser Anweisung generiert wird:

Dann schon in unserer Datei app.js oder den Namen, den wir platziert haben, müssen wir einfach diese Middleware einbinden, um uns bei der Interaktion zu helfen:

 app.use (erfordern ('body-parser') ());

Damit sind wir bereit, den Inhalt unserer Formulare direkt in unserer Bewerbung zu bearbeiten äußern, Es mag etwas komplex erscheinen, da andere Frameworks diese Art der Installation jedoch nicht erfordern äußern tut es, um uns die Freiheit zu geben, die Informationen nach unseren Wünschen zu verarbeiten, dies ist nur ein Weg von vielen, die es gibt.
Wir werden ein Formular erstellen, das die Funktion hat, die Lieblingsfrucht des Benutzers zu erfassen. Wir werden das im vorherigen Abschnitt des Tutorials erstellte Formular in unserem Ordner verwenden, in dem wir installiert haben äußern, erstellen wir eine Datei namens server.js, app.js oder welchen Namen wir auch immer nennen wollen, aber der Inhalt ist das Wichtigste. Im Inneren werden wir damit beginnen, die Verwendung von zu fordern äußern, dann müssen wir ein Anwendungsobjekt generieren und dieses muss die Middleware verwenden Body-Parser.
Definiere die RoutenAls Nächstes müssen wir die Routen definieren. In unserem Fall verwenden wir die Root-Route, um das Formular anzuzeigen. Wenn wir also direkt auf unsere Anwendung zugreifen, haben wir das Ergebnis direkt und erstellen dann eine Route namens process, die das Methode POST, dies, was es tut, ist die Formulardaten zu erhalten, um schließlich zu drucken a HTML zeigt die empfangenen Daten an.
Dadurch können wir den Ablauf unseres Programms nachvollziehen und damit in Zukunft auch komplexere Formulare verarbeiten. Sehen wir uns den unten erklärten Code an:

 var express = erfordern ('express'); var bodyParser = require ('body-parser'); var app = express(); app.use (bodyParser()); app.set ('port', process.env.PORT || 3001); app.get ('/', Funktion (req, res) {var html = '' + '' + ''+' Deine Lieblingsfrucht: '+' '+''+''+' Senden '+''+''; erneut senden (html); }); app.post ('/process', function (req, res) {var fruit = req.body.fruit; var html =' Deine Lieblingsfrucht ist: '+fruit +'.
'+' Versuchen Sie es erneut.'; erneut senden (html); }); app.listen (app.get ('port'), function () {console.log ('Express startete bei http: // localhost:' + app.get ('port') + '; drücke Strg-C zum Schließen der Kellner. ');});

Damit haben wir die Erstellung unserer Anwendung abgeschlossen, jetzt werden wir überprüfen, wie sie angezeigt wird, dazu müssen wir einfach die Anweisung schreiben:

 Knotenserver.js

Wo server.js Es ist der Name, den wir in unsere Anwendung eingegeben haben, und je nach Port, den wir platziert haben, können wir unser Formular im Browser sehen:

Natürlich kann dies ästhetischer sein, mit Bootstrap, oder Stile CSSFür die Zwecke und den Umfang dieses Tutorials ist es jedoch perfekt, um die Handhabung von Formularen zu verstehen. Wenn wir damit interagieren, indem wir etwas in das Feld schreiben und auf Senden klicken, werden wir sehen, wie wir zu unserem gelangen URL Prozess:

In diesem Fall haben wir einen Link hinterlassen, um zum Anfang zurückzukehren, diese Verarbeitung gehört zur Art der Umleitung, da wir den Benutzer auf eine andere Route geschickt und dort das Ergebnis seiner Abfrage erhalten haben, gibt es natürlich viele Validierungen, die uns fehlen in diesem Beispiel, z. B. ob das leere Feld gesendet wird, wie wir überprüfen, ob eine Sendung von einem anderen Ursprungsort stammt usw. Sie sind gültige Dinge, aber sie entgehen dem Ziel des Tutorials, wir erwähnen sie nur, damit Sie wissen, dass andere Schritte in ihrer Entwicklung als Programmierer folgen äußern.
Damit haben wir dieses Tutorial beendet, wie wir sehen äußern Es erleichtert uns vieles, wenn wir die Informationen aus dem Front-End in unsere Logik übertragen, die vereinfachte Handhabung der Routen und der Einsatz von Middleware zur Entschlüsselung von Informationen machen es perfekt, um uns Entwicklungszeit zu sparen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben