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 สำหรับการแยกวิเคราะห์ข้อมูลหลายส่วน / แบบฟอร์ม

ให้เราสร้างแบบฟอร์ม 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 ของเราจะจัดการคำขอเหล่านั้นทั้งหมดในลักษณะเดียวกัน เพื่ออ่านข้อมูลเพิ่มเติมเกี่ยวกับวิธีการที่แตกต่างกันจะทำให้คำขอมีลักษณะที่นี้หน้า