Gestionați formularele cu Express

Unul dintre cele mai directe moduri în care putem obține date de utilizator în aplicațiile web este prin intermediul formularelor, deși există multe mecanisme pentru a face ca aceste date să ajungă la controlerele noastre logice și de aplicații, în adâncul lor trebuie să respecte aceleași reguli ca formularele HTML, utilizați o metodă HTTP pentru a trimite informațiile.
Acest lucru face ca capacitatea de a procesa și manipula formulare este vitală dacă dorim să realizăm aplicații web complete, cu funcționalități care pot fi luate în considerare și care ne dezvoltă ideile.
1- Pentru a realiza acest tutorial, trebuie să îndeplinim câteva cerințe anterioare, mai întâi trebuie să avem o instalare de Node.js funcțional, atunci trebuie să avem un proiect cu ExpresNu contează că nu are o structură de dosare, dar avem nevoie ca cadrul să fie disponibil în locație.
2- Trebuie să avem noțiuni de bază despre npm, și de HTML, deoarece, deși conceptele sunt explicate într-un mod foarte simplu, există elemente fundamentale care nu sunt explicate, cum ar fi ce este o etichetă sau ce este un atribut HTML.
3- În cele din urmă, avem nevoie de un browser și de un editor de text pentru a putea scrie și valida aplicația noastră.
Înainte de a vedea funcționarea Expres Pentru a procesa formularele, trebuie să cunoaștem puțin mai în detaliu aspectele de bază ale acestora, deoarece acestea reprezintă o parte vitală a construcției aplicațiilor noastre atunci când dorim sau avem nevoie să captăm date de utilizator.
Să vedem următorul cod în care am creat o formă simplă de câmp care captează fructele noastre preferate.

Fructul tău preferat:Trimite

În prima instanță, un formular trebuie să fie compus dintr-o etichetă în cadrul acestuia, trebuie să existe cel puțin un atribut metodă care va indica browserului nostru modul în care ne va trimite informațiile, poate fi POST sau OBȚINE, care sunt metodele HTTP de bază, putem plasa și un atribut numit acțiuneDacă acest lucru nu există, formularul va fi trimis la aceeași rută care îl servește, dacă există, va fi trimis la ruta specificată ca în cazul exemplului.
Caracteristici generaleÎn formularul nostru funcționează toate etichetele HTML pe care le dorim, cu toate acestea cele mai importante sunt cele de introducere a datelor ca în cazul tipurilor, deoarece aceste etichete și valoarea lor sunt cele care vor fi trimise în momentul efectuării Trimite care este celălalt tip de intrare de care avem nevoie, deoarece este butonul de acțiune. Vom primi datele cu numele pe care l-am dat proprietăților Yam pentru fiecare dintre câmpurile pe care le-am creat, este de asemenea important să plasăm un atribut id fiecărui câmp și că acesta este unic pentru a putea manipula elementele din el. SOARE într-un mod elegant.
Cum vedem forma HTML Deși este un element foarte simplu, are mai multe detalii care merită evidențiate, evidențiate și explicate pentru a evita confuzia în viitor.
După primirea unui formular, avem multe opțiuni, indiferent de cadrul pe care îl folosim Expres, Laravel, Django, etc. Există un proces care este bine de urmat, deoarece acesta este cel care va spune utilizatorului nostru dacă datele lor au fost primite, dacă au fost procesate sau dacă a existat o eroare. Acest proces poate fi împărțit în două grupuri, răspuns și redirecționare.
RăspunsÎn acest grup de acțiuni, odată ce utilizatorul trimite formularul și efectuăm o procesare, putem trimite un răspuns HTML în același timp, adică imprimăm un mesaj sau creăm o vizualizare nouă, aici vă putem spune dacă datele au fost corecte sau dacă a existat o eroare. Acest răspuns poate fi tip AJAX, astfel încât să fie generată fără încărcarea completă a paginii sau la reîncărcare afișați noua vizualizare sau pur și simplu generați un mesaj animat cu JavaScript.
RedirecționareÎn acest alt grup, odată ce am procesat informațiile, redirecționăm și trimitem utilizatorul fie la o altă vizualizare, fie pur și simplu la un ecran în care îi mulțumim pentru utilizarea aplicației noastre, poate părea la fel ca răspunsul, totuși ceea ce facem este trimiteți utilizatorul într-un alt loc din aplicația noastră.
Pentru a pregăti aplicația noastră Expres Pentru a procesa formulare, trebuie mai întâi să instalăm un plugin numit body-parser, acesta este cine ne va ajuta să manipulăm datele pe care ni le trimite browserul. Pentru a face acest lucru în consola noastră Node.js trebuie să folosim instrucțiunea:

 npm install --save body-parser

Să vedem răspunsul generat de executarea acestei instrucțiuni:

Apoi, deja în fișierul nostru app.js sau numele pe care l-am plasat, trebuie pur și simplu să includem acest middleware pentru a ne ajuta cu interacțiunea:

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

Cu aceasta suntem gata să procesăm conținutul formularelor noastre, direct în aplicația noastră Expres, Poate părea oarecum complex, deoarece alte cadre nu necesită totuși acest tip de instalare Expres face asta pentru a ne oferi libertatea de a prelucra informațiile așa cum ne dorim, aceasta este doar o cale dintre multele care există.
Vom crea un formular care are funcția de a captura fructele preferate ale utilizatorului. Vom folosi pe cel pe care l-am creat în secțiunea anterioară a tutorialului pentru o mai mare ușurință, în folderul nostru unde am instalat Expres, să creăm un fișier numit server.js, app.js sau orice nume dorim să punem, totuși conținutul este important. În interior vom începe prin a solicita utilizarea expres, atunci trebuie să generăm un obiect aplicație și acesta trebuie să utilizeze middleware-ul body-parser.
Definiți ruteleUrmătorul act trebuie să definim rutele, în cazul nostru vom folosi ruta rădăcină pentru a afișa formularul, așa că atunci când accesăm direct aplicația noastră vom avea rezultatul direct, apoi vom crea un traseu numit proces care primește metodă POST, ceea ce va face este să primiți datele formularului pentru a imprima în cele din urmă un HTML indicând datele primite.
Acest lucru ne va permite să înțelegem fluxul programului nostru și astfel să putem procesa forme mai complexe în viitor. Să vedem codul explicat mai jos:

 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 = '' + '' + ''+' Fructul tău preferat: '+' '+'„+”'+' Trimite '+''+' '; res.send (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html = 'Fruit Your Favorite is:' + fruit + '.
'+' Încercați din nou. '; res.send (html); }); app.listen (app.get ('port'), function () {console.log ('Express a început de la http: // localhost:' + app.get ('port') + '; apăsați Ctrl-C pentru a închide server-ul. ');});

Cu aceasta am finalizat crearea aplicației noastre, acum vom examina cum să o afișăm, pentru aceasta trebuie pur și simplu să scriem instrucțiunea:

 nod server.js

Unde server.js Este numele pe care l-am plasat în aplicația noastră și, în funcție de portul pe care l-am plasat, atunci ne putem vedea formularul în browser:

Desigur, acest lucru poate fi mai estetic, folosind Bootstrap, sau stiluri CSSCu toate acestea, în scopul și scopul acestui tutorial, este perfect pentru înțelegerea manipulării formularelor. Dacă interacționăm cu acesta scriind ceva în câmp și făcând clic pe trimitere, vom vedea cum ajungem la Url proces:

În acest caz, am lăsat un link pentru a reveni la început, această procesare aparține tipului de redirecționare, deoarece am trimis utilizatorul către o altă rută și am primit rezultatul interogării sale acolo, desigur, există multe validări care ne lipsesc în acest exemplu, cum ar fi dacă este trimis câmpul gol, cum validăm dacă o expediere se face dintr-o altă origine etc. Sunt lucruri valabile, dar scapă de obiectivul tutorialului, le menționăm doar pentru a ști că urmează alți pași în dezvoltarea lor ca programatori în Expres.
Cu aceasta am terminat acest tutorial, după cum vedem Expres Fac lucrurile mult mai ușor pentru noi atunci când transferăm informațiile din front-end în logica noastră, gestionarea simplificată a rutelor și utilizarea middleware-ului pentru a ne ajuta să decodăm informațiile face ca acesta să ne economisească timpul de dezvoltare.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv