Gerenciar formulários com o Express

Uma das formas mais diretas pelas quais podemos obter dados do usuário em aplicações web é através de formulários, embora existam muitos mecanismos para fazer com que esses dados cheguem aos nossos controladores lógicos e de aplicação, no fundo eles devem seguir as mesmas regras que os formulários HTML, use algum método HTTP para enviar as informações.
Isso torna vital a capacidade de processar e manipular formulários se queremos fazer aplicações web completas, com funcionalidades que podem ser levadas em conta e que desenvolvem nossas ideias.
1- Para realizar este tutorial precisamos atender a alguns requisitos anteriores, primeiro devemos ter uma instalação de Node.js funcional, então devemos ter um projeto com ExpressarNão importa que não tenha uma estrutura de pastas, mas precisamos que a estrutura esteja disponível no local.
2- Temos que ter noções básicas de npm, e de HTML, pois embora os conceitos sejam explicados de forma muito simples, existem fundamentos que não são explicados, como o que é uma tag ou o que é um atributo HTML.
3- Finalmente, precisamos de um navegador e um editor de texto para poder escrever e validar nosso aplicativo.
Antes de começar a ver o funcionamento do Expressar Para processar os formulários, devemos conhecer um pouco mais a fundo os aspectos básicos destes, já que são uma parte vital da construção de nossas aplicações quando queremos ou precisamos capturar os dados do usuário.
Vamos ver o código a seguir, onde criamos uma forma simples de um campo que captura nossa fruta favorita.

Sua fruta favorita:Mandar

Na primeira instância, um formulário deve ser composto de um rótulo dentro deste deve haver pelo menos um atributo método que indicará ao nosso navegador a forma como nos enviará as informações, pode ser PUBLICAR ou OBTER, que são os métodos HTTP básicos, também podemos colocar um atributo chamado açaoSe não existir, o formulário será enviado para a mesma rota que o atende, caso exista será enviado para a rota que está especificada como no caso do exemplo.
Aspectos geraisDentro do nosso formulário todos os rótulos funcionam HTML que queremos, porém os que são mais importantes são os de entrada de dados como no caso dos tipos já que esses rótulos e seus valores são os que serão enviados na hora de fazer enviar que é o outro tipo de entrada de que precisamos, já que é o botão de ação. Receberemos os dados com o nome que demos aos imóveis inhame de cada um dos campos que criamos, também é importante colocar um atributo id para cada campo e que seja único para poder manipular os elementos nele. SOL de uma forma elegante.
Como vemos o formulário HTML Apesar de ser um elemento muito simples, possui vários detalhes que valem a pena destacar, destacar e explicar para evitar confusões no futuro.
Depois de receber um formulário, temos muitas opções, independentemente da estrutura que usamos, seja Expressar, Laravel, Djangoetc. Existe um processo que é bom seguir, pois é ele que vai dizer ao nosso usuário se seus dados foram recebidos, se foi processado, ou se houve um erro. Este processo pode ser dividido em dois grupos, resposta e redirecionamento.
ResponderNeste grupo de ação, uma vez que o usuário envia o formulário e fazemos um processamento, podemos enviar uma resposta HTML ao mesmo tempo, ou seja, imprimimos uma mensagem, ou criamos uma nova view, aqui podemos dizer se os dados estavam corretos ou se houve um erro. Esta resposta pode ser tipo AJAX, para que seja gerado sem carregar a página completamente, ou ao recarregar mostre a nova visualização, ou simplesmente gere uma mensagem animada com JavaScript.
RedirecionamentoNesse outro grupo, uma vez processadas as informações, redirecionamos e enviamos o usuário para outra view ou simplesmente para uma tela onde agradecemos por usar nosso aplicativo, pode parecer o mesmo que a resposta, porém o que fazemos é enviar o usuário para outro local em nosso aplicativo.
Para preparar nosso aplicativo Expressar Para processar formulários, primeiro precisamos instalar um plugin chamado analisador de corpo, é ele que nos ajudará a manipular os dados que o navegador nos envia. Para fazer isso em nosso console Node.js devemos usar a instrução:

 npm install --save body-parser

Vejamos a resposta gerada pela execução desta instrução:

Então já dentro do nosso arquivo app.js ou o nome que colocamos, simplesmente devemos incluir este middleware para nos ajudar com a interação:

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

Com isso estamos prontos para processar o conteúdo de nossos formulários, diretamente em nosso aplicativo Expressar, Pode parecer um tanto complexo porque outras estruturas não requerem este tipo de instalação, no entanto Expressar faz isso para nos dar a liberdade de processar as informações como quisermos, este é apenas um dos muitos caminhos que existem.
Vamos criar um formulário que tem a função de capturar a fruta preferida do usuário. Vamos usar o que criamos na seção anterior do tutorial para maior facilidade, em nossa pasta onde instalamos Expressar, vamos criar um arquivo chamado server.js, app.js ou qualquer nome que quisermos colocar, porém o conteúdo é o mais importante. No interior, começaremos exigindo o uso de expressar, então devemos gerar um objeto de aplicação e este deve usar o middleware analisador de corpo.
Defina as rotasNo próximo ato devemos definir as rotas, no nosso caso vamos usar a rota raiz para exibir o formulário, então ao acessar diretamente nossa aplicação teremos o resultado diretamente, então vamos criar uma rota chamada processo que recebe o método PUBLICAR, isso o que fará é receber os dados do formulário para finalmente imprimir um HTML indicando os dados recebidos.
Isso nos permitirá entender o fluxo do nosso programa e, assim, sermos capazes de processar formulários mais complexos no futuro. Vamos ver o código explicado abaixo:

 var express = require ('express'); var bodyParser = require ('body-parser'); var app = express (); app.use (bodyParser ()); app.set ('porta', process.env.PORT || 3001); app.get ('/', função (req, res) {var html = '' + '' + ''+' Sua fruta favorita: '+' '+''+''+' Enviar '+''+' '; res.send (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html = 'Sua fruta favorita é:' + fruta + '.
'+' Tente novamente. '; res.send (html); }); app.listen (app.get ('port'), function () {console.log ('Express started at http: // localhost:' + app.get ('port') + '; pressione Ctrl-C para fechar o servidor. ');});

Com isso concluímos a criação de nosso aplicativo, agora vamos revisar como exibi-lo, para isso basta escrever a instrução:

 node server.js

Onde server.js É o nome que colocamos em nosso aplicativo e, dependendo da porta que colocamos, podemos ver nosso formulário no navegador:

Claro que isso pode ser mais estético, usando Bootstrap, ou estilos CSSNo entanto, para os objetivos e escopo deste tutorial, ele é perfeito para entender o manuseio de formulários. Se interagirmos com ele escrevendo algo no campo e clicando em enviar, veremos como chegamos ao nosso Url processar:

Nesse caso deixamos um link para voltar ao início, esse processamento pertence ao tipo de redirecionamento, pois já enviamos o usuário para outra rota e recebemos o resultado da consulta dele lá, claro que existem muitas validações que nos faltam neste exemplo, como se o campo em branco for enviado, como validamos se uma remessa é feita de outra origem, etc. São coisas válidas, mas escapam ao objetivo do tutorial, apenas as mencionamos para que você saiba que outras etapas seguem em seu desenvolvimento como programadores em Expressar.
Com isso terminamos este tutorial, como vemos Expressar Isso torna as coisas muito mais fáceis para nós quando transferimos as informações do Front-End para a nossa lógica, o tratamento simplificado das rotas e o uso de middleware para nos ajudar a decodificar as informações torna-o perfeito para economizar tempo de desenvolvimento.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo