Spravujte formuláře pomocí Express

Jedním z nejpřímějších způsobů, jak můžeme ve webových aplikacích získávat uživatelská data, je prostřednictvím formulářů, ačkoli existuje mnoho mechanismů, díky nimž se tato data dostanou do našich logických a aplikačních řadičů, v hloubi duše musí dodržovat stejná pravidla jako formuláře HTML, použijte nějakou metodu HTTP zaslat informace.
Díky tomu je schopnost zpracovávat a manipulovat s formami životně důležitá, pokud chceme vytvářet kompletní webové aplikace s funkcemi, které lze vzít v úvahu a které rozvíjejí naše nápady.
1- Abychom mohli tento tutoriál provést, musíme splnit některé předchozí požadavky, nejprve musíme nainstalovat Node.js funkční, pak musíme mít projekt s VyjádřitNezáleží na tom, že nemá strukturu složek, ale potřebujeme, aby byl rámec k dispozici v umístění.
2- Musíme mít základní představy o npma HTML, protože ačkoli jsou pojmy vysvětleny velmi jednoduchým způsobem, existují základy, které nejsou vysvětleny, například co je to značka nebo co je atribut HTML.
3- Nakonec potřebujeme prohlížeč a textový editor, abychom mohli psát a ověřovat naši aplikaci.
Než se podíváte na provoz Vyjádřit Abychom mohli formuláře zpracovat, musíme znát trochu hlouběji jejich základní aspekty, protože jsou důležitou součástí konstrukce našich aplikací, když chceme nebo potřebujeme zachytit uživatelská data.
Podívejme se na následující kód, kde jsme vytvořili jednoduchou formu pole, které zachycuje naše oblíbené ovoce.

Vaše oblíbené ovoce:Poslat

V prvním případě musí být formulář složen ze štítku, v němž musí být alespoň jeden atribut metoda to může našemu prohlížeči naznačit způsob, jakým nám informace pošle, to může být POŠTA nebo DOSTAT, což jsou základní metody HTTP, můžeme také umístit atribut s názvem akcePokud toto neexistuje, bude formulář odeslán na stejnou trasu, která mu slouží, pokud existuje, bude odeslán na trasu, která je uvedena jako v případě příkladu.
Obecné znakyV naší formě fungují všechny štítky HTML to, co chceme, ale důležitější jsou ty pro zadávání dat, jako v případě typů, protože tyto štítky a jejich hodnota jsou ty, které budou odeslány v době provádění Předložit což je další typ vstupu, který potřebujeme, protože je to akční tlačítko. Údaje obdržíme se jménem, ​​které jsme vlastnostem dali jam pro každé z polí, které jsme vytvořili, je také důležité do každého pole umístit atribut id a aby byl jedinečný, aby bylo možné manipulovat s prvky v něm. SLUNCE elegantním způsobem.
Jak vidíme formu HTML Přestože jde o velmi jednoduchý prvek, má několik detailů, které stojí za to zdůraznit, zvýraznit a vysvětlit, aby se v budoucnu předešlo nejasnostem.
Po obdržení formuláře máme mnoho možností, bez ohledu na rámec, který používáme Vyjádřit, Laravel, Django, atd. Existuje proces, který je dobré sledovat, protože právě ten sdělí našemu uživateli, zda byla jeho data přijata, zda byla zpracována nebo zda došlo k chybě. Tento proces lze rozdělit do dvou skupin, reakce a přesměrování.
OdpovědětV této skupině akcí, jakmile uživatel odešle formulář a my provedeme zpracování, můžeme odeslat odpověď HTML současně, tj. vytiskneme zprávu nebo vytvoříme nové zobrazení, zde vám můžeme říci, zda byla data správná nebo zda došlo k chybě. Tato odpověď může být typová AJAX, takže se vygeneruje bez úplného načtení stránky nebo při opětovném načtení zobrazí nové zobrazení nebo jednoduše vygeneruje animovanou zprávu pomocí JavaScript.
PřesměrováníV této jiné skupině, jakmile zpracujeme informace, které přesměrujeme a pošleme uživatele buď do jiného zobrazení, nebo jednoduše na obrazovku, kde jim děkujeme za používání naší aplikace, to může vypadat stejně jako odpověď, nicméně to, co děláme, je pošlete uživatele na jiné místo v naší aplikaci.
K přípravě naší aplikace Vyjádřit Abychom mohli zpracovávat formuláře, musíme si nejprve nainstalovat plugin s názvem analyzátor těla, to je ten, kdo nám pomůže manipulovat s daty, která nám prohlížeč zasílá. Chcete -li to provést v naší konzole Node.js musíme použít pokyny:

 npm install --save body-parser

Podívejme se na odpověď generovanou spuštěním této instrukce:

Pak již uvnitř našeho souboru app.js nebo jméno, které jsme umístili, musíme jednoduše zahrnout tento middleware, který nám pomůže s interakcí:

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

Díky tomu jsme připraveni zpracovat obsah našich formulářů přímo v naší aplikaci Vyjádřit„Může se to zdát poněkud složité, protože jiné rámce tento typ instalace nevyžadují Vyjádřit dělá nám to svobodu zpracovávat informace, jak si přejeme, to je jen jedna cesta z mnoha, které existují.
Vytvoříme formulář, který má za úkol zachytit oblíbené ovoce uživatele. Ten, který jsme vytvořili v předchozí části tutoriálu, použijeme pro větší snadnost v naší složce, kde jsme nainstalovali Vyjádřit, vytvořme soubor s názvem server.js, app.js nebo jakékoli jméno, které chceme dát, ale obsah je důležitá věc. Uvnitř začneme tím, že budeme vyžadovat použití vyjádřit, pak musíme vygenerovat objekt aplikace a ten musí používat middleware analyzátor těla.
Definujte trasyDalší akt musíme definovat trasy, v našem případě použijeme k zobrazení formuláře kořenovou trasu, takže při přímém přístupu k naší aplikaci budeme mít výsledek přímo, pak vytvoříme trasu nazvanou proces, který obdrží metoda POŠTA, to, co udělá, je obdržet data formuláře, aby konečně vytiskli HTML označující přijatá data.
To nám umožní porozumět toku našeho programu, a tedy být schopen v budoucnu zpracovávat složitější formy. Podívejme se na vysvětlený kód níže:

 var express = require ('expres'); var bodyParser = require ('body-parser'); var aplikace = express (); app.use (bodyParser ()); app.set ('port', process.env.PORT || 3001); app.get ('/', function (req, res) {var html = '' + '' + ''+' Vaše oblíbené ovoce: '+' '+''+''+' Odeslat '+''+' '; res.send (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html = 'Your favourite Fruit is:' + fruit + '.
'+' Zkuste to znovu. '; res.send (html); }); app.listen (app.get ('port'), function () {console.log ('Express started at http: // localhost:' + app.get ('port') + '; press Ctrl-C to close server. ');});

Tímto jsme dokončili vytváření naší aplikace, nyní se podíváme na to, jak ji zobrazit, proto jednoduše musíme napsat instrukci:

 uzel server.js

Kde server.js Jedná se o název, který jsme umístili do naší aplikace, a v závislosti na portu, který jsme umístili, vidíme náš formulář v prohlížeči:

Samozřejmě to může být estetičtější Bootstrap, nebo styly CSSPro účely a rozsah tohoto kurzu je však ideální pro pochopení zpracování formulářů. Pokud s ním budeme komunikovat tak, že něco napíšeme do pole a klikneme na odeslat, uvidíme, jak se dostaneme k našemu Url proces:

V tomto případě jsme nechali odkaz na návrat na začátek, toto zpracování patří k typu přesměrování, protože jsme uživatele odeslali na jinou trasu a obdrželi jsme tam výsledek jeho dotazu, samozřejmě existuje mnoho validací, které nám chybí v tomto případě, například pokud je odesláno prázdné pole, jak ověříme, zda je zásilka provedena z jiného původu atd. Jsou to platné věci, ale unikají účelu tutoriálu, zmiňujeme je pouze proto, abyste věděli, že při jejich vývoji následují další kroky jako programátorů v Vyjádřit.
Tím jsme tento návod dokončili, jak vidíme Vyjádřit Hodně nám to usnadňuje přenos informací z Front-Endu do naší logiky, zjednodušená manipulace s trasami a použití middlewaru, který nám pomáhá dekódovat informace, nám skvěle šetří čas na vývoj.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod