Dies macht die Fähigkeit zur Verarbeitung und Bearbeitung von Formularen für die Erstellung vollständiger Webanwendungen mit Funktionen, die berücksichtigt werden können und die unsere Ideen entwickeln, von entscheidender Bedeutung.

Anforderungen

– Para poder llevar a cabo este tutorial necesitamos cumplir algunos requerimientos previos, en primer lugar debemos tener una instalación de Node.js funcional, luego debemos tener un proyecto con Express , no importa que no tenga estructura de carpetas, pero si necesitamos que el framework esté disponible en la ubicación. 1 – Um dieses Tutorial ausführen zu können, müssen wir einige vorherige Anforderungen erfüllen, zuerst müssen wir eine funktionierende Node.js- Installation haben, dann müssen wir ein Projekt mit Express haben , es ist egal, dass es keine Ordnerstruktur hat, aber wir brauchen die Framework ist in der Location verfügbar.

– Tenemos que tener nociones básicas de npm , y de HTML , ya que aunque se explican los conceptos de forma muy sencilla, hay fundamentos que no se explican como por ejemplo que es una etiqueta, o que es un atributo HTML. 2 – Wir müssen Grundbegriffe von npm und HTML haben , denn obwohl die Konzepte sehr einfach erklärt werden, gibt es Grundlagen, die nicht als beispielsweise eine Bezeichnung oder ein HTML-Attribut erklärt werden.

– Por ultimo necesitamos un navegador, y un editor de texto para poder escribir y validar nuestra aplicación. 3 – Schließlich benötigen wir einen Browser und einen Texteditor, um unsere Anwendung zu schreiben und zu validieren.

Grundlegende Aspekte eines Formulars

Bevor wir uns mit der Funktionsweise von Express für die Verarbeitung der Formulare befassen, müssen wir uns mit den grundlegenden Aspekten dieser Funktionen vertraut machen, da sie für die Erstellung unserer Anwendungen von entscheidender Bedeutung 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 erfasst.

 <form action = "/ process" method = "POST"> <input type = "hidden" name = "hidden" val = "verstecktes Feld, aber nicht unsichtbar!"> <div> <label for = "campofruta"> Ihre Lieblingsfrucht: </ label> <input type = "text" id = "campofruta" name = "fruit"> </ div> <div> <button type = "submit"> Senden </ button> </ div> </ form> 

In der ersten Instanz muss ein Formular aus einem <form> -Tag bestehen. In diesem muss mindestens ein Methodenattribut vorhanden sein , das unserem Navigator angibt, auf welche Weise die Informationen an uns gesendet werden. Es kann sich um POST oder GET handeln Bei den grundlegenden HTTP-Methoden können wir auch ein Attribut mit dem Namen action platzieren . Ist dies nicht der Fall, wird das Formular an dieselbe Route gesendet, die es bedient. Ist dies der Fall, wird es an die angegebene Route gesendet, wie im Beispiel.

Da wir das HTML- Formular als sehr einfaches Element betrachten, gibt es einige Details, die es wert sind, gerettet, hervorgehoben und erklärt zu werden, um Verwirrung in der Zukunft zu vermeiden.

Was passiert nach dem Absenden eines Formulars?

Nachdem wir ein Formular erhalten haben, haben wir viele Optionen, unabhängig davon, welches Framework wir verwenden, ob Express , Laravel , Django usw. Es gibt einen Prozess, der gut zu befolgen ist, da dies derjenige ist, der unserem Benutzer mitteilt, ob seine Daten empfangen wurden, ob sie verarbeitet wurden oder ob ein Fehler aufgetreten ist. Dieser Vorgang kann in zwei Gruppen unterteilt werden: Antwort und Umleitung.

Verwenden Sie die Middleware

Damit unsere Express- Anwendung Formulare verarbeiten kann, müssen wir zunächst ein Add-On namens Body-Parser installieren. Dieses Add-On hilft uns bei der Bearbeitung der Daten, die der Browser an uns sendet. Um dies in unserer Konsole Node.js zu tun, müssen wir die Anweisung verwenden:

 npm install --save body-parser 

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

Dann müssen wir bereits in unserer app.js- Datei oder dem von uns platzierten Namen einfach diese Middleware einfügen , um uns bei der Interaktion zu helfen:

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

Damit sind wir bereit, den Inhalt unserer Formulare direkt in unserer Express- Anwendung zu verarbeiten. Dies kann komplex erscheinen, da für andere Frameworks diese Art der Installation nicht erforderlich ist. Express tut dies jedoch, um uns die Freiheit zu geben, Informationen so zu verarbeiten Wünschen wir uns, dies ist nur einer der vielen Wege, die es gibt.

Unser Formular erstellen

Wir werden ein Formular erstellen, das die Funktion hat, die Lieblingsfrüchte des Benutzers zu erfassen. Wir werden das Formular verwenden, das wir im vorherigen Abschnitt des Tutorials erstellt haben. In unserem Ordner, in dem wir Express installiert haben, werden wir eine Datei mit dem Namen server.js erstellen . app.js oder welcher Name auch immer, der Inhalt ist jedoch wichtig. Im Inneren werden wir zunächst die Verwendung von Express erfordern, dann müssen wir ein Anwendungsobjekt generieren und dies muss die Body-Parser- Middleware verwenden.

Auf diese Weise können wir den Ablauf unseres Programms verstehen und in Zukunft komplexere Formulare verarbeiten. Nachfolgend sehen wir den erklärten Code:

 var express = require ('express'); var bodyParser = require ('body-parser'); var app = express (); app.use (bodyParser ()); app.set ('port', process.env.PORT || 3001); app.get ('/', function (req, res) { var html = '<form action = "/ process" method = "POST">' + '<input type = "hidden" name = "hidden" val = "verstecktes Feld, aber nicht unsichtbar!">' + '<div>' + '<label for = "campofruta"> Ihre Lieblingsfrucht: </ label>' + '<input type = "text" id = "campofruta" name = "fruit">' + '</ div>' + '<div>' + '<button type = "submit"> Senden </ button>' + '</ div>' + '</ form>'; res.send (html); }); app.post ('/ process', function (req, res) { var fruit = req.body.fruta; var html = 'Ihre Lieblingsfrucht ist:' + fruit + '. <br>' + '<a href="/"> Versuchen Sie es erneut. </a>'; res.send (html); }); app.listen (app.get ('port'), function () { console.log ('Express wurde unter http: // localhost:' + gestartet app.get ('port') + '; Drücken Sie Strg-C, um den Server zu schließen. ' ); }); 

Damit haben wir die Erstellung unserer Anwendung abgeschlossen. Nun werden wir überprüfen, wie sie angezeigt werden soll. Dazu schreiben wir einfach die Anweisung:

 Knoten server.js 

Wobei server.js der Name ist, den wir unserer Anwendung gegeben haben, und je nach dem Port, den wir gegeben haben, können wir unser Formular im Browser sehen:

Natürlich kann dies ästhetischer sein, wenn Bootstrap- oder CSS- Stile verwendet werden. Für die Zwecke und den Umfang dieses Tutorials ist es jedoch perfekt, um die Handhabung der Formulare zu verstehen. Wenn wir damit interagieren, während wir etwas in das Feld schreiben und auf Senden klicken, werden wir sehen, wie wir zu unserer URL gelangen, um sie zu verarbeiten:

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 das Ergebnis seiner Abfrage erhalten haben. Natürlich gibt es in diesem Beispiel viele Validierungen, die uns fehlen B. wenn das Feld in Weiß gesendet wird, wir überprüfen, ob eine Sendung aus einer anderen Quelle stammt usw. Sie sind gültig, aber sie entziehen sich dem Lernziel des Lernprogramms. Wir erwähnen sie nur, damit sie wissen, dass andere Schritte in ihrer Entwicklung als Programmierer in Express folgen.

Damit haben wir dieses Tutorial abgeschlossen, da Express die Übertragung der Front-End-Informationen in unsere Logik erheblich vereinfacht. Die vereinfachte Handhabung der Routen und der Einsatz von Middleware zur Dekodierung von Informationen machen es perfekt für Sparen Sie uns Entwicklungszeit.