Administrer formularer med Express

En af de mest direkte måder, hvorpå vi kan få brugerdata i webapplikationer, er gennem formularer, selvom der er mange mekanismer til at få disse data til at nå vores logik og applikationskontrollere, inderst inde skal de følge de samme regler, som formularerne HTML, brug en eller anden metode HTTP at sende oplysningerne.
Dette gør evnen til at behandle og manipulere formularer afgørende, hvis vi vil lave komplette webapplikationer med funktioner, der kan tages i betragtning, og som udvikler vores ideer.
1- For at udføre denne vejledning skal vi opfylde nogle tidligere krav, først skal vi have en installation af Node.js funktionel, så skal vi have et projekt med ExpressDet gør ikke noget, at det ikke har en mappestruktur, men vi har brug for, at rammerne er tilgængelige på stedet.
2- Vi skal have grundlæggende forestillinger om npm, og af HTML, eftersom selvom begreberne forklares på en meget enkel måde, er der grundlæggende ting, der ikke forklares, f.eks. hvad er et tag eller hvad er en HTML -attribut.
3- Endelig har vi brug for en browser og en tekstredigerer for at kunne skrive og validere vores applikation.
Inden du kommer til at se driften af Express For at behandle formularerne skal vi kende lidt mere i dybden de grundlæggende aspekter af disse, da de er en vigtig del af konstruktionen af ​​vores applikationer, når vi ønsker eller har brug for at indsamle brugerdata.
Lad os se følgende kode, hvor vi har oprettet en simpel form for et felt, der fanger vores yndlingsfrugt.

Din yndlingsfrugt:Sende

I første omgang skal en formular være sammensat af en etiket, der skal indeholde mindst en attribut metode det kan indikere for vores browser, hvordan den vil sende os oplysningerne, det kan være STOLPE eller FÅ, som er de grundlæggende HTTP -metoder, kan vi også placere en attribut kaldet handlingHvis dette ikke findes, sendes formularen til den samme rute, der betjener den, hvis den findes, sendes den til den rute, der er angivet som i eksemplet.
Generelle egenskaberInden for vores form fungerer alle etiketterne HTML som vi ønsker, men dem, der er vigtigere, er dataindtastningerne, som for typerne, da disse etiketter og deres værdi er dem, der vil blive sendt på tidspunktet for udførelsen Indsend som er den anden type input, vi har brug for, da det er handlingsknappen. Vi modtager dataene med det navn, vi har givet ejendommene yam for hvert af de felter, vi har oprettet, er det også vigtigt at placere en id -attribut til hvert felt, og at det er unikt for at kunne manipulere elementerne i det. SOL på en elegant måde.
Hvordan ser vi formen HTML På trods af at det er et meget enkelt element, har det flere detaljer, der er værd at fremhæve, fremhæve og forklare for at undgå forvirring i fremtiden.
Efter at have modtaget en formular har vi mange muligheder, uanset hvilke rammer vi bruger Express, Laravel, Django, etc. Der er en proces, der er god at følge, da det er den, der fortæller vores bruger, om deres data blev modtaget, om de blev behandlet, eller hvis der var en fejl. Denne proces kan opdeles i to grupper, respons og omdirigering.
SvarI denne handlingsgruppe kan vi, når brugeren indsender formularen, og vi foretager en behandling, sende et svar HTML på samme måde, det vil sige, vi udskriver en besked eller opretter en ny visning, her kan vi fortælle dig, om dataene var korrekte, eller hvis der var en fejl. Dette svar kan være type AJAX, så den genereres uden at indlæse siden helt, eller ved genindlæsning vise den nye visning, eller simpelthen generere en animeret besked med JavaScript.
OmdirigeringI denne anden gruppe, når vi har behandlet de oplysninger, vi omdirigerer og sender brugeren enten til en anden visning eller simpelthen til en skærm, hvor vi takker dem for at bruge vores applikation, kan det virke det samme som svaret, men hvad vi gør er sende brugeren et andet sted i vores applikation.
For at forberede vores ansøgning Express For at behandle formularer skal vi først installere et plugin kaldet body-parser, det er denne, der hjælper os med at manipulere de data, som browseren sender os. For at gøre dette i vores konsol Node.js vi skal bruge instruktionen:

 npm install-gem kropsparser

Lad os se svaret genereret ved udførelsen af ​​denne instruktion:

Så allerede inde i vores fil app.js eller det navn, vi har placeret, skal vi simpelthen inkludere denne middleware for at hjælpe os med interaktionen:

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

Med dette er vi klar til at behandle indholdet af vores formularer, direkte i vores ansøgning Express, Det kan virke lidt komplekst, fordi andre rammer dog ikke kræver denne type installation Express gør det for at give os friheden til at behandle oplysningerne, som vi ønsker, dette er kun en vej af de mange, der findes.
Vi kommer til at oprette en formular, der har funktionen til at fange brugerens yndlingsfrugt.Vi kommer til at bruge den, vi oprettede i det foregående afsnit af selvstudiet for større lethed, i vores mappe, hvor vi har installeret Express, lad os oprette en fil kaldet server.js, app.js eller hvilket navn vi ønsker at sætte, men indholdet er det vigtige. Inde vil vi starte med at kræve brug af udtrykke, så skal vi generere et applikationsobjekt, og dette skal bruge middleware body-parser.
Definer ruterneNæste handling skal vi definere ruterne, i vores tilfælde vil vi bruge rodruten til at vise formularen, så når vi får direkte adgang til vores applikation, får vi resultatet direkte, så vil vi oprette en rute kaldet proces, der modtager metode STOLPE, dette er hvad det vil gøre er at modtage formulardataene til endelig at udskrive en HTML angiver de modtagne data.
Dette vil give os mulighed for at forstå strømmen af ​​vores program og dermed være i stand til at behandle mere komplekse former i fremtiden. Lad os se den forklarede kode herunder:

 var express = require ('express'); var bodyParser = require ('body-parser'); var app = express (); app.use (bodyParser ()); app.set ('port', proces.env.PORT || 3001); app.get ('/', funktion (req, res) {var html = '' + '' + ''+' Din yndlingsfrugt: '+' '+''+''+' Send '+''+' '; res.send (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html = 'Din yndlingsfrugt er:' + fruit + '.
'+' Prøv igen. '; res.send (html); }); app.listen (app.get ('port'), funktion () {console.log ('Express startede på http: // localhost:' + app.get ('port') + '; tryk på Ctrl-C for at lukke serveren. ');});

Med dette har vi afsluttet oprettelsen af ​​vores applikation, nu skal vi gennemgå, hvordan vi viser den, for dette skal vi simpelthen skrive instruktionen:

 node server.js

Hvor server.js Det er det navn, vi har placeret i vores applikation, og afhængigt af den port, vi har placeret, så kan vi se vores formular i browseren:

Selvfølgelig kan dette være mere æstetisk ved hjælp Bootstrapeller stilarter CSSTil formål og omfang af denne vejledning er den imidlertid perfekt til at forstå formhåndtering. Hvis vi interagerer med det ved at skrive noget i feltet og klikke på send, vil vi se, hvordan vi kommer til vores Url behandle:

I dette tilfælde har vi efterladt et link for at vende tilbage til begyndelsen, denne behandling tilhører den type omdirigering, da vi har sendt brugeren til en anden rute og modtaget resultatet af hans forespørgsel der, selvfølgelig er der mange valideringer, som vi mangler i dette eksempel, f.eks. hvis det tomme felt sendes, hvordan vi validerer, hvis en forsendelse foretages fra en anden oprindelse osv. De er gyldige ting, men de undslipper formålet med selvstudiet, vi nævner dem kun, så du ved, at andre trin følger i deres udvikling som programmører i Express.
Med dette har vi afsluttet denne vejledning, som vi ser Express Det gør tingene meget lettere for os, når vi overfører oplysningerne fra Front-End til vores logik, den forenklede håndtering af ruterne og brugen af ​​middleware til at hjælpe os med at afkode information gør det perfekt til at spare os for udviklingstid.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt