Upravljajte obrascima pomoću Expressa

Jedan od najizravnijih načina na koji možemo doći do korisničkih podataka u web aplikacijama je putem obrazaca, iako postoji mnogo mehanizama koji omogućuju da ti podaci dođu do naše logike i kontrolora aplikacija, duboko u sebi moraju slijediti ista pravila kao i obrasci HTML, upotrijebite neku metodu HTTP za slanje informacija.
To čini sposobnost obrade i manipulacije oblicima vitalnom ako želimo napraviti cjelovite web aplikacije, s funkcionalnostima koje se mogu uzeti u obzir i koje razvijaju naše ideje.
1- Kako bismo izvršili ovaj vodič, moramo zadovoljiti neke prethodne zahtjeve, prvo moramo imati instalaciju Node.js funkcionalna, tada moramo imati projekt s IzrazitiNije važno što nema strukturu mapa, ali trebamo da okvir bude dostupan na lokaciji.
2- Moramo imati osnovne pojmove o npm, i od HTML, budući da su koncepti objašnjeni na vrlo jednostavan način, ali postoje osnove koje nisu objašnjene, primjerice što je oznaka ili što je HTML atribut.
3- Konačno nam je potreban preglednik i uređivač teksta da bismo mogli pisati i provjeravati našu aplikaciju.
Prije nego što pogledate rad Izraziti Da bismo obradili obrasce, moramo malo dublje poznavati njihove osnovne aspekte budući da su oni vitalni dio izgradnje naših aplikacija kada želimo ili trebamo prikupiti korisničke podatke.
Pogledajmo sljedeći kod gdje smo stvorili jednostavan oblik polja koje bilježi naše omiljeno voće.

Vaše omiljeno voće:Poslati

U prvom slučaju, obrazac mora biti sastavljen od oznake unutar toga, mora postojati barem jedan atribut metoda to će našem pregledniku ukazati na način na koji će nam slati podatke POST ili DOBITI, koje su osnovne HTTP metode, možemo postaviti i atribut tzv akcijskiAko to ne postoji, obrazac će biti poslan na istu rutu koja ga opslužuje, ako postoji, bit će poslan na rutu koja je navedena kao u slučaju primjera.
Osnovne značajkeUnutar našeg obrasca sve oznake rade HTML to želimo, međutim važniji su oni za unos podataka kao u slučaju vrsta budući da su te oznake i njihova vrijednost one koje će se poslati u vrijeme donošenja podnijeti što je druga vrsta unosa koja nam je potrebna, budući da je to gumb za radnju. Primit ćemo podatke s imenom koje smo dali nekretninama jam svakog polja koje smo stvorili, također je važno svakom atributu postaviti atribut id i biti jedinstven kako bi se moglo manipulirati elementima u njemu. SUNCE na elegantan način.
Kako vidimo formu HTML Iako je vrlo jednostavan element, ima nekoliko detalja koje vrijedi istaknuti, istaknuti i objasniti kako bi se izbjegla zabuna u budućnosti.
Nakon primitka obrasca imamo mnogo mogućnosti, bez obzira na okvir koji koristimo Izraziti, Laravel, Djangoitd. Postoji postupak koji je dobro slijediti jer je to onaj koji će našem korisniku reći jesu li njihovi podaci primljeni, jesu li obrađeni ili je došlo do pogreške. Taj se proces može podijeliti u dvije grupe, odgovor i preusmjeravanje.
OdgovorU ovoj akcijskoj grupi, nakon što korisnik pošalje obrazac i obavimo obradu, možemo poslati odgovor HTML u isto vrijeme, odnosno ispisujemo poruku ili stvaramo novi prikaz, ovdje vam možemo reći jesu li podaci točni ili je došlo do pogreške. Ovaj odgovor može biti tip AJAX, tako da se generira bez potpunog učitavanja stranice ili pri ponovnom učitavanju prikaže novi prikaz ili jednostavno generira animiranu poruku s JavaScript.
PreusmjeravanjeU ovoj drugoj grupi, nakon što obradimo podatke, preusmjeravamo i šaljemo korisnika ili u drugi prikaz, ili jednostavno na zaslon na kojem im zahvaljujemo što koriste našu aplikaciju, to se može činiti istim kao odgovor, međutim ono što radimo je poslati korisnika na drugo mjesto u našoj aplikaciji.
Za pripremu naše prijave Izraziti Da bismo obradili obrasce, prvo moramo instalirati dodatak tzv tijelo-parser, to će nam pomoći u manipuliranju podacima koje nam preglednik šalje. Da biste to učinili u našoj konzoli Node.js moramo se poslužiti uputom:

 npm install --save body-parser

Pogledajmo odgovor generiran izvršavanjem ove upute:

Onda već unutar naše datoteke app.js ili naziv koji smo postavili, jednostavno moramo uključiti ovaj međuopreme koji će nam pomoći u interakciji:

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

Time smo spremni za obradu sadržaja naših obrazaca, izravno u našoj aplikaciji Izraziti, Možda se čini donekle složenim jer drugi okviri ne zahtijevaju ovu vrstu instalacije Izraziti čini li to kako bi nam dao slobodu u obradi informacija kako želimo, ovo je samo jedan put od mnogih koji postoje.
Izradit ćemo obrazac koji ima funkciju hvatanja omiljenog voća korisnika. Koristit ćemo onaj koji smo stvorili u prethodnom odjeljku vodiča radi veće lakoće, u našoj mapi u koju smo instalirali Izraziti, napravimo datoteku pod nazivom server.js, app.js ili bilo koje ime koje želimo staviti, međutim sadržaj je važna stvar. Unutra ćemo početi zahtijevati upotrebu izraziti, tada moramo generirati aplikacijski objekt i to mora koristiti međuopreme tijelo-parser.
Definirajte ruteSljedeći čin moramo definirati rute, u našem slučaju koristit ćemo root rutu za prikaz obrasca, pa ćemo pri izravnom pristupu našoj aplikaciji imati rezultat izravno, tada ćemo stvoriti rutu koja se naziva proces koja prima metoda POST, ovo što će učiniti je primiti podatke obrasca za konačno ispis a HTML ukazujući na primljene podatke.
To će nam omogućiti da razumijemo tijek našeg programa, te ćemo tako moći obrađivati ​​složenije oblike u budućnosti. Pogledajmo dolje objašnjeni kod:

 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 = '' + '' + ''+' Vaše omiljeno voće: '+' '+''+''+' Pošalji '+''+' '; res.send (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html = 'Vaše omiljeno voće je:' + voće + '.
'+' Pokušaj ponovo. '; res.send (html); }); app.listen (app.get ('port'), function () {console.log ('Express je pokrenut na http: // localhost:' + app.get ('port') + '; pritisnite Ctrl-C za zatvaranje poslužitelj. ');});

Ovime smo dovršili izradu naše aplikacije, sada ćemo pregledati kako je prikazati, za to jednostavno moramo napisati upute:

 čvor server.js

Gdje server.js To je naziv koji smo stavili u našu aplikaciju, a ovisno o priključku koji smo postavili, tada možemo vidjeti naš obrazac u pregledniku:

Naravno, ovo može biti estetskije, koristeći Bootstrap, ili stilova CSSMeđutim, za svrhe i opseg ovog vodiča savršeno je za razumijevanje rukovanja obrascima. Ako s njim komuniciramo tako što napišemo nešto u polje i kliknemo Pošalji, vidjet ćemo kako ćemo doći do našeg URL postupak:

U ovom slučaju ostavili smo vezu za povratak na početak, ova obrada pripada vrsti preusmjeravanja, budući da smo korisnika poslali na drugu rutu i tamo primili rezultat njegova upita, naravno da postoje mnoge potvrde koje nam nedostaju u ovom primjeru, na primjer, je li poslano prazno polje, kako provjeravamo je li pošiljka poslana s drugog podrijetla itd. Oni su valjane stvari, ali izbjegavaju cilj vodiča, mi ih samo spominjemo kako biste znali da slijede drugi koraci u njihovom razvoju kao programera u Izraziti.
Ovime smo završili ovaj vodič, kao što vidimo Izraziti Mnogo nam olakšava stvari kada podatke prenosimo s Front-Enda na našu logiku, pojednostavljeno rukovanje rutama i upotreba međuopreme koja nam pomaže dekodirati podatke čini ih savršenim za uštedu vremena za razvoj.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod