Administrer skjemaer med Express

En av de mest direkte måtene vi kan skaffe brukerdata i webapplikasjoner på er gjennom skjemaer, selv om det er mange mekanismer for å få disse dataene til våre logikk- og applikasjonskontrollere, må de innerst inne følge de samme reglene som skjemaene HTML, bruk noen metode HTTP å sende informasjonen.
Dette gjør muligheten til å behandle og manipulere skjemaer avgjørende hvis vi ønsker å lage komplette webapplikasjoner, med funksjoner som kan tas i betraktning og som utvikler våre ideer.
1- For å gjennomføre denne opplæringen må vi oppfylle noen tidligere krav, først må vi ha en installasjon av Node.js funksjonell, så må vi ha et prosjekt med UttrykkeDet spiller ingen rolle at den ikke har en mappestruktur, men vi trenger rammen for å være tilgjengelig på stedet.
2- Vi må ha grunnleggende forestillinger om npm, og av HTML, siden selv om konseptene forklares på en veldig enkel måte, er det grunnleggende som ikke blir forklart, for eksempel hva som er en tag, eller hva som er et HTML -attributt.
3- Til slutt trenger vi en nettleser og et tekstredigeringsprogram for å kunne skrive og validere applikasjonen vår.
Før du får se driften av Uttrykke For å behandle skjemaene må vi kjenne litt mer grundig på de grunnleggende aspektene ved disse, siden de er en viktig del av konstruksjonen av applikasjonene våre når vi ønsker eller trenger å fange brukerdata.
La oss se følgende kode der vi har laget en enkel form for et felt som fanger vår favorittfrukt.

Din favorittfrukt:Sende

I første omgang må et skjema være sammensatt av en etikett i dette, det må være minst ett attributt metode som kan indikere for nettleseren vår hvordan den vil sende oss informasjonen, kan det være POST eller FÅ, som er de grunnleggende HTTP -metodene, kan vi også plassere et attributt kalt handlingHvis dette ikke eksisterer, vil skjemaet bli sendt til den samme ruten som betjener den, hvis den eksisterer, vil den bli sendt til ruten som er angitt som i eksempelet.
Generelle funksjonerI vårt skjema fungerer alle etikettene HTML som vi ønsker, men de som er viktigere er datainnføringen, som for typene siden disse etikettene og deres verdi er de som vil bli sendt når de gjør det sende inn som er den andre typen inngang vi trenger, siden det er handlingsknappen. Vi vil motta dataene med navnet vi har gitt til eiendommene jamm av hvert av feltene vi har opprettet, er det også viktig å plassere et id -attributt for hvert felt og at det er unikt for å kunne manipulere elementene i det. SOL på en elegant måte.
Hvordan vi ser skjemaet HTML Til tross for at det er et veldig enkelt element, har det flere detaljer som er verdt å markere, fremheve og forklare for å unngå forvirring i fremtiden.
Etter å ha mottatt et skjema har vi mange alternativer, uansett hvilket rammeverk vi bruker Uttrykke, Laravel, Django, etc. Det er en prosess som er god å følge, siden dette er den som vil fortelle brukeren om dataene deres ble mottatt, om de ble behandlet eller om det var en feil. Denne prosessen kan deles inn i to grupper, respons og omdirigering.
SvarI denne handlingsgruppen kan vi sende et svar når brukeren sender inn skjemaet og vi gjør en behandling HTML på samme måte, det vil si at vi skriver ut en melding, eller oppretter en ny visning, her kan vi fortelle deg om dataene var riktige eller om det var en feil. Dette svaret kan være type AJAX, slik at den genereres uten å laste siden helt, eller ved visning av den nye visningen, eller bare generere en animert melding med JavaScript.
OmdirigeringI denne andre gruppen, når vi har behandlet informasjonen vi omdirigerer og sender brukeren enten til en annen visning eller rett og slett til en skjerm der vi takker dem for at de brukte appen vår, kan det virke det samme som svaret, men det vi gjør er sende brukeren til et annet sted i applikasjonen vår.
For å forberede søknaden vår Uttrykke For å behandle skjemaer må vi først installere et plugin som heter kroppsparser, dette er hvem som vil hjelpe oss med å manipulere dataene som nettleseren sender oss. For å gjøre dette i konsollen vår Node.js vi må bruke instruksjonene:

 npm install-lagre kroppsparser

La oss se svaret generert ved utførelsen av denne instruksjonen:

Da allerede inne i filen vår app.js eller navnet vi har plassert, må vi bare inkludere denne mellomvaren for å hjelpe oss med samspillet:

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

Med dette er vi klare til å behandle innholdet i skjemaene våre, direkte i søknaden vår Uttrykke, Det kan virke noe komplekst fordi andre rammer ikke krever denne type installasjon Uttrykke gjør det for å gi oss friheten til å behandle informasjonen slik vi ønsker, dette er bare en vei av de mange som finnes.
Vi skal lage et skjema som har funksjonen til å fange brukerens favorittfrukt.Vi kommer til å bruke den vi opprettet i forrige del av opplæringen for større brukervennlighet, i mappen vår der vi har installert Uttrykke, la oss lage en fil som heter server.js, app.js eller hvilket navn vi vil sette, men innholdet er det viktigste. Innvendig vil vi begynne med å kreve bruk av uttrykke, så må vi generere et applikasjonsobjekt, og dette må bruke mellomvaren kroppsparser.
Definer ruteneNeste handling må vi definere rutene, i vårt tilfelle skal vi bruke rotruten for å vise skjemaet, så når vi får direkte tilgang til applikasjonen vår, får vi resultatet direkte, så skal vi lage en rute som kalles prosess som mottar metode POST, dette hva den vil gjøre er å motta skjemadataene for å endelig skrive ut a HTML som angir mottatte data.
Dette vil tillate oss å forstå flyten i programmet vårt, og dermed kunne behandle mer komplekse former i fremtiden. La oss se den forklarte koden nedenfor:

 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 favorittfrukt: '+' '+''+''+' Send '+''+' '; send på nytt (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html = 'Din favorittfrukt er:' + frukt + '.
'+' Prøv igjen. '; send på nytt (html); }); app.listen (app.get ('port'), function () {console.log ('Express startet på http: // localhost:' + app.get ('port') + '; trykk Ctrl-C for å lukke serveren. ');});

Med dette har vi fullført opprettelsen av applikasjonen vår, nå skal vi gå gjennom hvordan vi viser den, for dette må vi ganske enkelt skrive instruksjonen:

 node server.js

Hvor server.js Det er navnet vi har plassert i applikasjonen vår, og avhengig av porten vi har plassert, kan vi se skjemaet vårt i nettleseren:

Selvfølgelig kan dette være mer estetisk, å bruke Støvelhempeeller stiler CSSFor formålene og omfanget av denne opplæringen er den imidlertid perfekt for å forstå skjemahåndtering. Hvis vi samhandler med det ved å skrive noe i feltet og klikke på send, får vi se hvordan vi kommer til vårt Url prosess:

I dette tilfellet har vi forlatt en lenke for å gå tilbake til begynnelsen, denne behandlingen tilhører typen omdirigering, siden vi har sendt brukeren til en annen rute og mottatt resultatet av forespørselen hans der, selvfølgelig er det mange valideringer som vi mangler i dette eksemplet, for eksempel hvis det tomme feltet sendes, hvordan vi validerer om en forsendelse er laget fra et annet opprinnelse, etc. De er gyldige ting, men de unnslipper målet med opplæringen. Vi nevner dem bare slik at du vet at andre trinn følger i utviklingen som programmerere i Uttrykke.
Med dette har vi fullført denne opplæringen, som vi ser Uttrykke Det gjør ting mye lettere for oss når vi overfører informasjonen fra Front-End til vår logikk, den forenklede håndteringen av rutene og bruk av mellomvare for å hjelpe oss med å dekode informasjon gjør det perfekt for å spare oss for utviklingstid.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng