Formulieren beheren met Express

Een van de meest directe manieren waarop we gebruikersgegevens in webapplicaties kunnen verkrijgen, is via formulieren, hoewel er veel mechanismen zijn om ervoor te zorgen dat die gegevens onze logica en applicatiecontrollers bereiken, moeten ze diep van binnen dezelfde regels volgen als de formulieren HTML, gebruik een methode HTTP om de informatie te verzenden.
Dit maakt het kunnen verwerken en manipuleren van formulieren essentieel als we complete webapplicaties willen maken, met functionaliteiten waarmee rekening kan worden gehouden en die onze ideeën ontwikkelen.
1- Om deze tutorial uit te voeren, moeten we aan een aantal eerdere vereisten voldoen, eerst moeten we een installatie hebben van: Node.js functioneel zijn, dan moeten we een project hebben met nadrukkelijkHet maakt niet uit dat het geen mappenstructuur heeft, maar we hebben wel het framework nodig om op de locatie beschikbaar te zijn.
2- We moeten basisbegrippen hebben van npm, en van HTML, want hoewel de concepten op een heel eenvoudige manier worden uitgelegd, zijn er grondbeginselen die niet worden uitgelegd, zoals wat een tag is of wat een HTML-attribuut is.
3- Ten slotte hebben we een browser en een teksteditor nodig om onze applicatie te kunnen schrijven en valideren.
Alvorens de werking van te zien nadrukkelijk Om de formulieren te verwerken, moeten we de basisaspecten hiervan wat beter kennen, aangezien ze een essentieel onderdeel vormen van de constructie van onze applicaties wanneer we gebruikersgegevens willen of moeten vastleggen.
Laten we de volgende code bekijken waarin we een eenvoudige vorm van een veld hebben gemaakt dat ons favoriete fruit vastlegt.

Je favoriete fruit:Versturen

Een formulier moet in eerste instantie zijn samengesteld uit een label waarbinnen er minimaal één attribuut moet zijn methode die aan onze browser zal aangeven op welke manier het ons de informatie zal sturen, het kan zijn NA of KRIJGEN, wat de basis-HTTP-methoden zijn, kunnen we ook een attribuut plaatsen met de naam actieAls dit niet bestaat, wordt het formulier verzonden naar dezelfde route die het bedient, als het bestaat, wordt het verzonden naar de route die is opgegeven zoals in het geval van het voorbeeld.
Algemene kenmerkenBinnen ons formulier werken alle labels HTML die we willen, maar degenen die belangrijker zijn, zijn de gegevensinvoer, zoals in het geval van de typen, aangezien deze labels en hun waarde degenen zijn die op het moment van doen worden verzonden indienen wat het andere type invoer is dat we nodig hebben, omdat het de actieknop is. We ontvangen de gegevens met de naam die we aan de eigenschappen hebben gegeven yam van elk van de velden die we hebben gemaakt, is het ook belangrijk om een ​​id-attribuut aan elk veld te plaatsen en dat het uniek is om de elementen erin te kunnen manipuleren. ZON op een elegante manier.
Hoe we de vorm zien HTML Ondanks dat het een heel eenvoudig element is, heeft het verschillende details die de moeite waard zijn om te benadrukken, te benadrukken en uit te leggen om verwarring in de toekomst te voorkomen.
Nadat we een formulier hebben ontvangen, hebben we veel opties, ongeacht het raamwerk dat we gebruiken, ofwel nadrukkelijk, Laravel, Django, enz. Er is een proces dat goed te volgen is, aangezien dit het proces is dat onze gebruiker vertelt of zijn gegevens zijn ontvangen, verwerkt of dat er een fout is opgetreden. Dit proces kan worden onderverdeeld in twee groepen, respons en omleiding.
AntwoordIn deze actiegroep kunnen we een reactie sturen zodra de gebruiker het formulier heeft verzonden en we een verwerking hebben uitgevoerd HTML tegelijkertijd, dat wil zeggen, we drukken een bericht af of maken een nieuwe weergave, hier kunnen we u vertellen of de gegevens correct waren of dat er een fout was. Dit antwoord kan worden getypt AJAX, zodat het wordt gegenereerd zonder de pagina volledig te laden, of bij het herladen de nieuwe weergave te tonen, of eenvoudig een geanimeerd bericht te genereren met JavaScript.
omleidingIn deze andere groep, zodra we de informatie hebben verwerkt die we omleiden en de gebruiker naar een andere weergave sturen, of gewoon naar een scherm waar we hen bedanken voor het gebruik van onze applicatie, lijkt het misschien hetzelfde als het antwoord, maar wat we doen is stuur de gebruiker naar een andere plaats in onze applicatie.
Om onze aanvraag voor te bereiden: nadrukkelijk Om formulieren te kunnen verwerken, moeten we eerst een plug-in installeren met de naam body-parser, dit is wie ons zal helpen de gegevens te manipuleren die de browser ons stuurt. Om dit in onze console te doen: Node.js we moeten de instructie gebruiken:

 npm install --save body-parser

Laten we eens kijken naar het antwoord dat wordt gegenereerd door de uitvoering van deze instructie:

Dan al in ons bestand app.js of de naam die we hebben geplaatst, moeten we gewoon deze middleware opnemen om ons te helpen met de interactie:

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

Hiermee zijn we klaar om de inhoud van onze formulieren direct in onze applicatie te verwerken nadrukkelijk, Het lijkt misschien wat ingewikkeld omdat andere frameworks dit type installatie echter niet vereisen nadrukkelijk doet het om ons de vrijheid te geven om de informatie te verwerken zoals we willen, dit is slechts één pad van de vele die er zijn.
We gaan een formulier maken dat de functie heeft om het favoriete fruit van de gebruiker vast te leggen. We gaan het formulier gebruiken dat we in het vorige gedeelte van de tutorial hebben gemaakt voor meer gemak, in onze map waar we hebben geïnstalleerd nadrukkelijk, laten we een bestand maken met de naam server.js, app.js of welke naam we ook willen geven, maar de inhoud is het belangrijkste. Binnen beginnen we met het gebruik van nadrukkelijk, dan moeten we een toepassingsobject genereren en dit moet de middleware gebruiken body-parser.
Definieer de routesDe volgende handeling moeten we de routes definiëren, in ons geval gaan we de rootroute gebruiken om het formulier weer te geven, dus wanneer we rechtstreeks toegang hebben tot onze applicatie, hebben we het resultaat direct, dan gaan we een route maken met de naam proces die de methode NA, dit wat het zal doen is de formuliergegevens ontvangen om uiteindelijk een af ​​te drukken HTML met vermelding van de ontvangen gegevens.
Dit stelt ons in staat om de stroom van ons programma te begrijpen en zo in de toekomst complexere formulieren te kunnen verwerken. Laten we de uitgelegde code hieronder bekijken:

 var express = vereisen ('express'); var bodyParser = vereisen ('body-parser'); var app = express (); app.gebruik (bodyParser ()); app.set ('poort', proces.env.PORT || 3001); app.get ('/', functie (req, res) {var html = '' + '' + ''+' Je favoriete fruit: '+' '+''+''+' Stuur '+''+' '; opnieuw.verzenden (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html =' Je favoriete fruit is: '+ fruit +'.
'+' Probeer het opnieuw. '; opnieuw.verzenden (html); }); app.listen (app.get ('port'), function () {console.log ('Express begon op http: // localhost:' + app.get ('port') + '; druk op Ctrl-C om te sluiten de server. ');});

Hiermee hebben we het maken van onze applicatie voltooid, nu gaan we bekijken hoe we deze kunnen weergeven, hiervoor moeten we gewoon de instructie schrijven:

 node server.js

Waar server.js Het is de naam die we in onze applicatie hebben geplaatst, en afhankelijk van de poort die we hebben geplaatst, kunnen we ons formulier in de browser zien:

Natuurlijk kan dit meer esthetisch zijn, met behulp van Bootstrap, of stijlen CSSVoor het doel en de reikwijdte van deze zelfstudie is het echter perfect om de verwerking van formulieren te begrijpen. Als we ermee communiceren door iets in het veld te schrijven en op verzenden te klikken, zullen we zien hoe we bij onze URL Verwerken:

In dit geval hebben we een link achtergelaten om terug te keren naar het begin, deze verwerking behoort tot het type omleiding, aangezien we de gebruiker naar een andere route hebben gestuurd en het resultaat van zijn vraag daar hebben ontvangen, natuurlijk zijn er veel validaties die we missen in dit voorbeeld, zoals of het lege veld wordt verzonden, hoe we valideren of een zending van een andere oorsprong is, enz. Het zijn valide dingen maar ze ontsnappen aan het doel van de tutorial, we noemen ze alleen zodat je weet dat er andere stappen volgen in hun ontwikkeling als programmeurs in nadrukkelijk.
Hiermee zijn we klaar met deze tutorial, zoals we zien nadrukkelijk Het maakt het voor ons veel gemakkelijker wanneer we de informatie van de front-end naar onze logica overbrengen, de vereenvoudigde verwerking van de routes en het gebruik van middleware om ons te helpen bij het decoderen van informatie maakt het perfect om ons ontwikkelingstijd te besparen.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven