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 解析器和 multer。我們使用 body 解析器來解析 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 應用將以相同的方式處理所有這些請求。要了解更多關於不同請求方法的資訊，請檢視此頁面。