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

여기서 우리가하는 새로운 일은 body parser와 multer를 가져 오는 것입니다. 우리는 json 및 x-www-form-urlencoded 헤더 요청을 구문 분석하기 위해 본문 구문 분석기를 사용하고 있으며 multipart / form-data 구문 분석을 위해 multer를 사용합니다.

이를 테스트하기 위해 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 앱이 모든 요청을 동일한 방식으로 처리하기 때문에 여기에서 다루지 않아도됩니다. 다양한 요청 방법에 대해 자세히 알아 보려면 이 페이지를 참조하십시오.