close

Xử Lý Dữ Liệu Đầu Vào trong Express.js

Khi xây dựng ứng dụng web, việc xử lý dữ liệu đầu vào từ người dùng là một phần quan trọng để tạo ra các tính năng tương tác và linh hoạt. Trong môi trường phát triển Express.js, bạn có thể dễ dàng xử lý dữ liệu đầu vào từ các biểu mẫu (form) và các yêu cầu HTTP như GET, POST, PUT, PATCH và DELETE. Dưới đây là hướng dẫn chi tiết với nhiều phương thức và ví dụ để giúp bạn làm điều này:

Nhận Thông Tin từ Biểu Mẫu (Form)

Tạo Biểu Mẫu HTML: Bắt đầu bằng việc tạo biểu mẫu HTML trong tệp Pug hoặc EJS. Đảm bảo bạn đặt thuộc tính action trong thẻ <form> để xác định đường dẫn tới tuyến đường mà yêu cầu sẽ được gửi đến.

<form action="/xuly" method="post">
  <input type="text" name="tendangnhap" placeholder="Tên đăng nhập">
  <input type="password" name="matkhau" placeholder="Mật khẩu">
  <button type="submit">Gửi</button>
</form>

Xử Lý Yêu Cầu POST: Trong xử lý tuyến đường, sử dụng middleware body-parser để trích xuất dữ liệu từ yêu cầu POST.

const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/xuly', (req, res) => {
  const tendangnhap = req.body.tendangnhap;
  const matkhau = req.body.matkhau;
  // Thực hiện xử lý dữ liệu và trả về kết quả
});

 

Xử Lý Yêu Cầu Đa Dạng với Ví Dụ Đăng Nhập

Gửi Yêu Cầu POST từ Biểu Mẫu Đăng Nhập: Trong biểu mẫu HTML, đảm bảo bạn đã đặt phương thức post và thuộc tính action để chỉ định đường dẫn tới tuyến đường mà yêu cầu POST sẽ được gửi đến.

<form action="/dangnhap" method="post">
  <input type="text" name="tendangnhap" placeholder="Tên đăng nhập">
  <input type="password" name="matkhau" placeholder="Mật khẩu">
  <button type="submit">Đăng nhập</button>
</form>

Xử Lý Yêu Cầu POST Đăng Nhập: Trong xử lý tuyến đường, sử dụng middleware body-parser để trích xuất dữ liệu từ yêu cầu POST và thực hiện xử lý đăng nhập.

const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/dangnhap', (req, res) => {
  const tendangnhap = req.body.tendangnhap;
  const matkhau = req.body.matkhau;
  
  // Kiểm tra thông tin đăng nhập
  if (tendangnhap === 'admin' && matkhau === '123') {
    res.send('Đăng nhập thành công!');
  } else {
    res.send('Đăng nhập thất bại!');
  }
});

 

Xử Lý Yêu Cầu PUT và DELETE

Xử Lý Yêu Cầu PUT: Để xử lý yêu cầu PUT, bạn có thể sử dụng tuyến đường và middleware để trích xuất dữ liệu từ yêu cầu và thực hiện cập nhật tương ứng.

app.put('/capnhat/:id', (req, res) => {
  const id = req.params.id;
  const duLieuCapNhat = req.body;
  // Thực hiện cập nhật dữ liệu với ID tương ứng
});

Xử Lý Yêu Cầu DELETE: Để xử lý yêu cầu DELETE, bạn cũng sử dụng tuyến đường và middleware để xác định ID và thực hiện xóa.

app.delete('/xoa/:id', (req, res) => {
  const id = req.params.id;
  // Thực hiện xóa dữ liệu với ID tương ứng
});

 

Kết Luận

Hiểu cách xử lý dữ liệu đầu vào từ người dùng và các yêu cầu HTTP khác nhau là quan trọng trong phát triển ứng dụng web. Sử dụng Express.js và middleware như body-parser, bạn có thể dễ dàng nhận thông tin từ biểu mẫu và xử lý các yêu cầu GET, POST, PUT, PATCH, và DELETE. Điều này giúp bạn tạo ra các tính năng tương tác và linh hoạt trên trang web của bạn.