Koa.js - dados do formulário
Os formulários são parte integrante da web. Quase todos os sites que visitamos nos oferecem formulários que enviam ou buscam algumas informações para nós. Para começar com os formulários, primeiro instalaremos o koa-body. Para instalar isso, vá para o seu terminal e use -
$ npm install --save koa-body
Substitua o conteúdo do arquivo app.js pelo código a seguir.
var koa = require('koa');
var router = require('koa-router');
var bodyParser = require('koa-body');
var app = koa();
//Set up Pug
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app //Equivalent to app.use(pug)
});
//Set up body parsing middleware
app.use(bodyParser({
formidable:{uploadDir: './uploads'},
multipart: true,
urlencoded: true
}));
_.get('/', renderForm);
_.post('/', handleForm);
function * renderForm(){
this.render('form');
}
function *handleForm(){
console.log(this.request.body);
console.log(this.req.body);
this.body = this.request.body; //This is where the parsed request is stored
}
app.use(_.routes());
app.listen(3000);
As novas coisas que estamos fazendo aqui são importar o analisador de corpo e o multer. Estamos usando o analisador de corpo para analisar solicitações de cabeçalho json e x-www-form-urlencoded, enquanto usamos multer para analisar multipart / form-data.
Vamos criar um formulário html para testar isso! Crie um novo modo de exibição denominado form.pug com o código a seguir.
html
head
title Form Tester
body
form(action = "/", method = "POST")
div
label(for = "say") Say:
input(name = "say" value = "Hi")
br
div
label(for = "to") To:
input(name = "to" value = "Koa form")
br
button(type = "submit") Send my greetings
Execute seu servidor usando -
nodemon index.js
Agora vá para localhost: 3000 / e preencha o formulário como quiser e envie. Você receberá a resposta como -
Dê uma olhada em seu console, ele mostrará o corpo de sua solicitação como um objeto JavaScript. Por exemplo -
o this.request.bodyobjeto contém seu corpo de solicitação analisado. Para usar os campos desse objeto, basta usá-los como objetos JS normais.
Essa é apenas uma forma de enviar uma solicitação. Existem muitas outras maneiras, mas essas são irrelevantes para abordar aqui, porque nosso aplicativo Koa tratará todas essas solicitações da mesma maneira. Para ler mais sobre as diferentes maneiras de fazer uma solicitação, dê uma olhada nesta página.