Koa.js-フォームデータ

フォームはWebの不可欠な部分です。私たちが訪問するほとんどすべてのウェブサイトは、私たちのために情報を送信または取得するフォームを提供します。フォームを開始するには、まず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);

ここで行っている新しいことは、ボディパーサーとmulterのインポートです。 jsonおよびx-www-form-urlencodedヘッダーリクエストの解析にはbodyパーサーを使用し、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オブジェクトとして使用します。

これは、リクエストを送信する1つの方法にすぎません。他にも多くの方法がありますが、Koaアプリはこれらのすべてのリクエストを同じ方法で処理するため、ここでは説明しません。リクエストを行うさまざまな方法の詳細については、https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript [this]ページをご覧ください。

Koajs-form-data

Koa.js-フォームデータ