Управление на формуляри с Express

Един от най -преките начини, по които можем да получим потребителски данни в уеб приложенията, е чрез формуляри, въпреки че има много механизми, за да накараме тези данни да достигнат до нашите логики и контролери на приложения, дълбоко в себе си те трябва да следват същите правила като формите HTML, използвайте някакъв метод HTTP за изпращане на информацията.
Това прави способността за обработка и манипулиране на формуляри жизненоважна, ако искаме да правим цялостни уеб приложения, с функционалности, които могат да бъдат взети под внимание и които развиват нашите идеи.
1- За да изпълним този урок, трябва да отговорим на някои предишни изисквания, първо трябва да имаме инсталация на Node.js функционални, тогава трябва да имаме проект с ЕкспресНяма значение, че няма структура на папки, но се нуждаем от рамката, за да бъде налична на мястото.
2- Трябва да имаме основни представи за npm, и на HTML, тъй като въпреки че концепциите са обяснени по много прост начин, има основи, които не са обяснени, като например какво е маркер или какво е HTML атрибут.
3- Накрая се нуждаем от браузър и текстов редактор, за да можем да напишем и потвърдим нашето приложение.
Преди да видите операцията на Експрес За да обработим формулярите, трябва да знаем малко по -задълбочено основните аспекти на тях, тъй като те са жизненоважна част от изграждането на нашите приложения, когато искаме или имаме нужда от улавяне на потребителски данни.
Нека да видим следния код, където сме създали проста форма на поле, което улавя любимите ни плодове.

Вашият любим плод:Изпрати

На първо място, формулярът трябва да се състои от етикет в рамките на това, трябва да има поне един атрибут метод това ще посочи на нашия браузър начина, по който той ще ни изпрати информацията, може да бъде POST или ПОЛУЧАВАЙТЕ, които са основните HTTP методи, можем също да поставим атрибут, наречен действиеАко това не съществува, формулярът ще бъде изпратен до същия маршрут, който го обслужва, ако съществува, той ще бъде изпратен до маршрута, който е посочен, както в случая с примера.
Общи характеристикиВ нашата форма всички етикети работят HTML което искаме, но по -важните са тези за въвеждане на данни, както в случая с типовете, тъй като тези етикети и тяхната стойност са тези, които ще бъдат изпратени в момента на извършване Изпращане който е другият тип въвеждане, от който се нуждаем, тъй като това е бутонът за действие. Ще получим данните с името, което сме дали на имотите ям на всяко от полетата, които сме създали, също е важно да поставим атрибут id към всяко поле и да е уникален, за да можем да манипулираме елементите в него. СЛЪНЦЕ по елегантен начин.
Как виждаме формата HTML Въпреки че е много прост елемент, той има няколко детайла, които си струва да бъдат подчертани, подчертани и обяснени, за да се избегне объркване в бъдеще.
След получаване на формуляр имаме много опции, независимо от рамката, която използваме Експрес, Ларавел, Джангои т.н. Има процес, който е добре да се следва, тъй като това е този, който ще каже на нашия потребител дали техните данни са получени, дали са били обработени или дали е имало грешка. Този процес може да бъде разделен на две групи, отговор и пренасочване.
ОтговорВ тази група действия, след като потребителят изпрати формуляра и извършим обработка, можем да изпратим отговор HTML в същото време, тоест отпечатваме съобщение или създаваме нов изглед, тук можем да ви кажем дали данните са верни или има грешка. Този отговор може да бъде тип AJAX, така че да се генерира без да се зареди напълно страницата, или при презареждане да се покаже новият изглед, или просто да се генерира анимирано съобщение с JavaScript.
ПренасочванеВ тази друга група, след като обработим информацията, пренасочваме и изпращаме потребителя или в друг изглед, или просто на екран, на който му благодарим, че използва нашето приложение, това може да изглежда същото като отговора, но това, което правим, е изпратете потребителя на друго място в нашето приложение.
За да подготвим нашето приложение Експрес За да обработваме формуляри, първо трябва да инсталираме плъгин, наречен парсинг на тялото, това е кой ще ни помогне да манипулираме данните, които браузърът ни изпраща. За да направите това в нашата конзола Node.js трябва да използваме инструкцията:

 npm install --save body-parser

Нека видим отговора, генериран от изпълнението на тази инструкция:

Тогава вече в нашия файл app.js или името, което сме поставили, просто трябва да включим този междинен софтуер, който да ни помогне при взаимодействието:

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

С това сме готови да обработим съдържанието на нашите формуляри, директно в нашето приложение Експрес, Може да изглежда малко сложно, защото други рамки обаче не изискват този тип инсталация Експрес прави ли го, за да ни даде свободата да обработваме информацията, както желаем, това е само един път от многото съществуващи.
Ще създадем формуляр, който има функцията да улавя любимите плодове на потребителя, Ще използваме този, който създадохме в предишния раздел на урока за по -голяма лекота, в нашата папка, където сме инсталирали Експрес, нека създадем файл, наречен server.js, app.js или каквото и име да искаме да поставим, обаче съдържанието е важното. Вътре ще започнем, като изискваме използването на експресно, тогава трябва да генерираме обект на приложение и това трябва да използва междинния софтуер парсинг на тялото.
Определете маршрутитеСледващото действие трябва да дефинираме маршрутите, в нашия случай ще използваме главния маршрут за показване на формата, така че при директен достъп до нашето приложение ще имаме резултата директно, тогава ще създадем маршрут, наречен процес, който получава метод POST, това, което ще направи, е да получи данните от формата, за да отпечата най -накрая a HTML посочване на получените данни.
Това ще ни позволи да разберем потока на нашата програма и по този начин да можем да обработваме по -сложни форми в бъдеще. Нека да видим обяснения код по -долу:

 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 = '' + '' + ''+' Вашият любим плод: '+' '+''+''+' Изпрати '+''+' '; res.send (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html = 'Любимият ви плод е:' + плод + '.
'+' Опитайте отново. '; res.send (html); }); app.listen (app.get ('port'), function () {console.log ('Express стартира на http: // localhost:' + app.get ('port') + '; натиснете Ctrl-C, за да затворите сървърът. ');});

С това завършихме създаването на нашето приложение, сега ще прегледаме как да го покажем, за това просто трябва да напишем инструкцията:

 възел server.js

Където server.js Това е името, което сме поставили в нашето приложение и в зависимост от порта, който сме поставили, тогава можем да видим нашата форма в браузъра:

Разбира се, това може да бъде по -естетично, като се използва Bootstrap, или стилове CSSВъпреки това, за целите и обхвата на този урок, той е идеален за разбиране на обработката на формуляри. Ако взаимодействаме с него, като напишем нещо в полето и щракнем върху изпрати, ще видим как ще стигнем до нашия URL адрес процес:

В този случай сме оставили връзка за връщане към началото, тази обработка принадлежи към типа пренасочване, тъй като сме изпратили потребителя на друг маршрут и сме получили резултата от неговото запитване там, разбира се има много валидации, които ни липсват в този пример, например ако е изпратено празното поле, как проверяваме дали пратка е направена от друг източник и т.н. Те са валидни неща, но избягват целта на урока, ние ги споменаваме само за да знаете, че следват други стъпки в развитието им като програмисти в Експрес.
С това завършихме този урок, както виждаме Експрес Това прави нещата много по-лесни за нас, когато прехвърляме информацията от Front-End към нашата логика, опростеното боравене с маршрутите и използването на междинен софтуер, който ни помага да декодираме информация, го прави идеален, за да ни спести време за разработка.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка