Hantera formulär med Express

Ett av de mest direkta sätten för hur vi kan få användardata i webbapplikationer är genom formulär, även om det finns många mekanismer för att få dessa data att nå våra logik- och applikationskontrollanter, måste de inuti följa samma regler som formulärerna HTML, använd någon metod HTTP för att skicka informationen.
Detta gör möjligheten att bearbeta och manipulera formulär avgörande om vi vill göra kompletta webbapplikationer, med funktioner som kan beaktas och som utvecklar våra idéer.
1- För att kunna genomföra denna handledning måste vi uppfylla några tidigare krav, först måste vi ha en installation av Node.js funktionell, då måste vi ha ett projekt med uttryckaDet spelar ingen roll att den inte har en mappstruktur, men vi behöver ramverket för att vara tillgängligt på platsen.
2- Vi måste ha grundbegrepp om npm, och av HTML, eftersom även om begreppen förklaras på ett mycket enkelt sätt, finns det grundläggande som inte förklaras, till exempel vad som är en tagg eller vad som är ett HTML -attribut.
3- Slutligen behöver vi en webbläsare och en textredigerare för att kunna skriva och validera vår applikation.
Innan du får se hur uttrycka För att bearbeta formulärerna måste vi veta lite mer på djupet de grundläggande aspekterna av dessa, eftersom de är en viktig del av konstruktionen av våra applikationer när vi vill eller behöver fånga användardata.
Låt oss se följande kod där vi har skapat en enkel form av ett fält som fångar vår favoritfrukt.

Din favoritfrukt:Skicka

I första hand måste ett formulär vara sammansatt av en etikett inom detta måste det finnas minst ett attribut metod som kommer att indikera för vår webbläsare hur det kommer att skicka informationen till oss, det kan vara POSTA eller SKAFFA SIG, som är de grundläggande HTTP -metoderna, kan vi också placera ett attribut som heter handlingOm detta inte existerar skickas formuläret till samma rutt som tjänar det, om det finns skickas det till den rutt som anges som i exemplet.
Allmänna funktionerInom vår form fungerar alla etiketter HTML som vi vill ha, men de som är viktigare är datainmatningen som för typerna eftersom dessa etiketter och deras värde är de som kommer att skickas vid tidpunkten för genomförandet Skicka in vilket är den andra typen av input vi behöver, eftersom det är åtgärdsknappen. Vi kommer att ta emot uppgif.webpterna med det namn som vi har gett fastigheterna jams för vart och ett av fälten som vi har skapat är det också viktigt att placera ett id -attribut för varje fält och att det är unikt för att kunna manipulera elementen i det. SOL på ett elegant sätt.
Hur vi ser formen HTML Trots att det är ett mycket enkelt element har det flera detaljer som är värda att lyfta fram, lyfta fram och förklara för att undvika förvirring i framtiden.
Efter att ha fått ett formulär har vi många alternativ, oavsett vilken ram vi använder uttrycka, Laravel, Django, etc. Det finns en process som är bra att följa, eftersom det här är den som kommer att berätta för vår användare om deras data mottogs, om de behandlades eller om det var ett fel. Denna process kan delas in i två grupper, respons och omdirigering.
SvarI denna åtgärdsgrupp kan vi skicka ett svar när användaren skickar in formuläret och vi gör en behandling HTML samtidigt, det vill säga, vi skriver ut ett meddelande eller skapar en ny vy, här kan vi berätta om data var korrekta eller om det var ett fel. Det här svaret kan vara typ AJAX, så att den genereras utan att sidan laddas helt, eller när den laddas om visar den nya vyn, eller helt enkelt genererar ett animerat meddelande med JavaScript.
OmdirigeringI denna andra grupp, när vi har bearbetat informationen som vi omdirigerar och skickar användaren antingen till en annan vy eller helt enkelt till en skärm där vi tackar dem för att använda vår applikation, kan det verka som svaret, men vad vi gör är skicka användaren till en annan plats i vår applikation.
För att förbereda vår ansökan uttrycka För att kunna behandla formulär måste vi först installera ett plugin som heter kroppsparser, det här är vem som hjälper oss att manipulera data som webbläsaren skickar till oss. För att göra detta i vår konsol Node.js vi måste använda instruktionen:

 npm installera-spara kroppsparser

Låt oss se svaret som genereras av utförandet av denna instruktion:

Då redan inne i vår fil app.js eller namnet som vi har placerat, måste vi helt enkelt inkludera detta mellanprogram för att hjälpa oss med interaktionen:

 app.use (kräver ('body-parser') ());

Med detta är vi redo att bearbeta innehållet i våra formulär, direkt i vår ansökan uttrycka, Det kan tyckas lite komplext eftersom andra ramverk inte kräver denna typ av installation uttrycka gör det för att ge oss friheten att bearbeta informationen som vi vill, detta är bara en väg av de många som finns.
Vi kommer att skapa ett formulär som har funktionen att fånga användarens favoritfrukt.Vi kommer att använda den som vi skapade i föregående avsnitt av självstudien för större lätthet, i vår mapp där vi har installerat uttrycka, låt oss skapa en fil som heter server.js, app.js eller vilket namn vi vill sätta, men innehållet är det viktiga. Inuti kommer vi att börja med att kräva användning av uttrycka, då måste vi generera ett applikationsobjekt och detta måste använda mellanprogrammet kroppsparser.
Definiera rutternaNästa akt måste vi definiera rutterna, i vårt fall kommer vi att använda rotvägen för att visa formuläret, så när vi direkt får tillgång till vår applikation kommer vi att få resultatet direkt, då ska vi skapa en rutt som kallas process som tar emot metod POSTA, detta vad det kommer att göra är att ta emot formulärdata för att slutligen skriva ut en HTML anger de mottagna uppgif.webpterna.
Detta gör att vi kan förstå flödet av vårt program och därmed kunna bearbeta mer komplexa former i framtiden. Låt oss se den förklarade koden nedan:

 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 = '' + '' + ''+' Din favoritfrukt: '+' '+''+''+' Skicka '+''+' '; skicka igen (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html = 'Din favoritfrukt är:' + frukt + '.
'+' Försök igen. '; skicka igen (html); }); app.listen (app.get ('port'), function () {console.log ('Express startade på http: // localhost:' + app.get ('port') + '; tryck på Ctrl-C för att stänga servern. ');});

Med detta har vi slutfört skapandet av vår applikation, nu ska vi granska hur vi visar den, för detta måste vi helt enkelt skriva instruktionen:

 nod server.js

Var server.js Det är namnet som vi har placerat i vår applikation, och beroende på porten som vi har placerat kan vi se vårt formulär i webbläsaren:

Naturligtvis kan detta vara mer estetiskt, med Bootstrapeller stilar CSSFör syften och omfattningen av denna handledning är den dock perfekt för att förstå formulärhantering. Om vi ​​interagerar med det genom att skriva något i fältet och klicka på skicka, får vi se hur vi kommer till vårt Url bearbeta:

I det här fallet har vi lämnat en länk för att återgå till början, denna behandling tillhör typen av omdirigering, eftersom vi har skickat användaren till en annan rutt och fått resultatet av hans fråga där, naturligtvis finns det många valideringar som vi saknar i det här exemplet, till exempel om det tomma fältet skickas, hur vi validerar om en försändelse görs från ett annat ursprung, etc. De är giltiga saker men de slipper målet med handledningen, vi nämner dem bara så att du vet att andra steg följer i deras utveckling som programmerare i uttrycka.
Med detta har vi avslutat denna handledning, som vi ser uttrycka Det gör det mycket lättare för oss när vi överför informationen från Front-End till vår logik, den förenklade hanteringen av rutterna och användningen av mellanprogram för att hjälpa oss att avkoda information gör det perfekt för att spara utvecklingstid.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng