Koa.js - данные формы

Формы - неотъемлемая часть Интернета. Почти каждый веб-сайт, который мы посещаем, предлагает нам формы, которые отправляют или извлекают для нас некоторую информацию. Чтобы начать работу с формами, мы сначала установим koa-body. Чтобы установить это, перейдите в свой терминал и используйте -

$ npm install --save koa-body

Замените содержимое файла app.js следующим кодом.

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

Новые вещи, которые мы здесь делаем, - это импорт парсера тела и мультера. Мы используем парсер тела для разбора запросов заголовков json и x-www-form-urlencoded, а multer - для синтаксического анализа multipart / form-data.

Давайте создадим html-форму, чтобы проверить это! Создайте новое представление с именем form.pug со следующим кодом.

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

Запустите свой сервер, используя -

nodemon index.js

Теперь перейдите на localhost: 3000 /, заполните форму, как вам нравится, и отправьте ее. Вы получите ответ как -

Взгляните на свою консоль, она покажет вам тело вашего запроса как объект JavaScript. Например -

В this.request.bodyобъект содержит тело вашего проанализированного запроса. Чтобы использовать поля из этого объекта, просто используйте их как обычные объекты JS.

Это всего лишь один из способов отправить запрос. Есть много других способов, но мы не будем рассматривать их здесь, потому что наше приложение Koa будет обрабатывать все эти запросы одинаково. Чтобы узнать больше о различных способах отправки запроса, посетите эту страницу.