Koa.js - Dữ liệu biểu mẫu

Biểu mẫu là một phần không thể thiếu của web. Hầu hết mọi trang web chúng tôi truy cập đều cung cấp cho chúng tôi các biểu mẫu gửi hoặc lấy một số thông tin cho chúng tôi. Để bắt đầu với các biểu mẫu, trước tiên chúng ta sẽ cài đặt koa-body. Để cài đặt cái này, hãy đi tới thiết bị đầu cuối của bạn và sử dụng -

$ npm install --save koa-body

Thay thế nội dung tệp app.js của bạn bằng mã sau.

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

Những điều mới mà chúng tôi đang làm ở đây là nhập phân tích cú pháp cơ thể và multer. Chúng tôi đang sử dụng trình phân tích cú pháp nội dung để phân tích cú pháp các yêu cầu tiêu đề json và x-www-form-urlencoded, trong khi chúng tôi sử dụng multer để phân tích cú pháp đa phần / biểu mẫu-dữ liệu.

Hãy để chúng tôi tạo một biểu mẫu html để kiểm tra điều này! Tạo một dạng xem mới có tên form.pug với mã sau.

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

Chạy máy chủ của bạn bằng -

nodemon index.js

Bây giờ, hãy truy cập localhost: 3000 / và điền vào biểu mẫu bạn muốn và gửi nó. Bạn sẽ nhận được phản hồi là -

Hãy xem bảng điều khiển của bạn, nó sẽ hiển thị cho bạn phần nội dung yêu cầu của bạn dưới dạng một đối tượng JavaScript. Ví dụ -

Các this.request.bodyđối tượng chứa nội dung yêu cầu đã được phân tích cú pháp của bạn. Để sử dụng các trường từ đối tượng đó, chỉ cần sử dụng chúng như các đối tượng JS bình thường.

Đây chỉ là một cách để gửi yêu cầu. Có nhiều cách khác, nhưng những cách đó không liên quan để đề cập ở đây, vì ứng dụng Koa của chúng tôi sẽ xử lý tất cả các yêu cầu đó theo cùng một cách. Để tìm hiểu thêm về những cách khác nhau để tạo ra một yêu cầu, có một cái nhìn tại này trang.