Koa.js - Datos de formulario

Los formularios son una parte integral de la web. Casi todos los sitios web que visitamos nos ofrecen formularios que envían o obtienen información para nosotros. Para comenzar con los formularios, primero instalaremos el koa-body. Para instalar esto, vaya a su terminal y use -

$ npm install --save koa-body

Reemplace el contenido del archivo app.js con el siguiente código.

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);

Las cosas nuevas que estamos haciendo aquí son la importación del analizador y el multer de cuerpo. Estamos usando el analizador corporal para analizar las solicitudes de encabezado json y x-www-form-urlencoded, mientras que usamos multer para analizar multipart / form-data.

¡Creemos un formulario html para probar esto! Cree una nueva vista llamada form.pug con el siguiente código.

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

Ejecute su servidor usando -

nodemon index.js

Ahora vaya a localhost: 3000 / y complete el formulario como desee y envíelo. Recibirás la respuesta como:

Eche un vistazo a su consola, le mostrará el cuerpo de su solicitud como un objeto JavaScript. Por ejemplo

los this.request.bodyobjeto contiene el cuerpo de su solicitud analizada. Para usar campos de ese objeto, utilícelos como objetos JS normales.

Esta es solo una forma de enviar una solicitud. Hay muchas otras formas, pero es irrelevante cubrirlas aquí, porque nuestra aplicación Koa manejará todas esas solicitudes de la misma manera. Para leer más sobre las diferentes formas de realizar una solicitud, eche un vistazo a esta página.