Node.js – Bài 12: Express Framework

Express Overview

Express là framework web Node.js tối thiểu và linh hoạt, cung cấp một bộ tính năng mạnh mẽ để phát triển các ứng dụng web và di động. Nó tạo điều kiện cho sự phát triển nhanh chóng của các ứng dụng Web dựa trên Node. Sau đây là một số tính năng cốt lõi của Express framework :

• Cho phép thiết lập phần mềm trung gian để phản hồi Yêu cầu HTTP.
• Xác định bảng định tuyến được sử dụng để thực hiện các hành động khác nhau dựa trên Phương thức HTTP và URL.
• Cho phép hiển thị động các Trang HTML dựa trên việc chuyển các đối số tới các mẫu.

Cài đặt

Đầu tiên, cài đặt khung Express trên toàn cầu bằng NPM để có thể sử dụng nó để tạo ứng dụng web bằng thiết bị đầu cuối nút.

$ npm install express --save

Lệnh trên lưu cài đặt cục bộ trong thư mục node_modules và tạo một thư mục express bên trong node_modules. Bạn nên cài đặt các mô-đun quan trọng sau cùng với express –

• body-parser − Đây là phần mềm trung gian node.js để xử lý dữ liệu biểu mẫu được mã hóa JSON, Raw, Text và URL.
• trình phân tích cú pháp cookie – Phân tích cú pháp tiêu đề Cookie và điền req.cookies bằng một đối tượng được khóa bởi tên cookie.
• multer − Đây là một phần mềm trung gian node.js để xử lý dữ liệu nhiều phần/biểu mẫu.

$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save

Hello World!

Sau đây là một ứng dụng Express rất cơ bản khởi động máy chủ và lắng nghe trên cổng 8081 để kết nối. Ứng dụng này phản hồi với Hello World! cho các yêu cầu đến trang chủ. Đối với mọi đường dẫn khác, nó sẽ phản hồi với 404 Not Found.

var express = require('express');
var app = express();

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Lưu đoạn mã trên vào một tệp có tên server.js và chạy nó bằng lệnh sau.

$ node server.js

Bạn sẽ thấy đầu ra sau –

Example app listening at http://0.0.0.0:8081

Mở http://127.0.0.1:8081/ trong bất kỳ trình duyệt nào để xem kết quả sau.

Yêu cầu & Phản hồi

Ứng dụng Express sử dụng chức năng gọi lại có tham số là các đối tượng yêu cầu và phản hồi .

app.get('/', function (req, res) {
   // --
})

• req − Đối tượng yêu cầu đại diện cho yêu cầu HTTP và có các thuộc tính cho chuỗi truy vấn yêu cầu, tham số, nội dung, tiêu đề HTTP, v.v.
• res – Đối tượng phản hồi đại diện cho phản hồi HTTP mà ứng dụng Express gửi khi nhận được yêu cầu HTTP.

Bạn có thể in các đối tượng req và res cung cấp nhiều thông tin liên quan đến yêu cầu và phản hồi HTTP bao gồm cookie, phiên, URL, v.v.

Router (định tuyến) cơ bản

Chúng ta đã thấy một ứng dụng cơ bản phục vụ yêu cầu HTTP cho trang chủ. Định tuyến đề cập đến việc xác định cách một ứng dụng phản hồi yêu cầu của máy khách tới một điểm cuối cụ thể, đó là một URI (hoặc đường dẫn) và một phương thức yêu cầu HTTP cụ thể (GET, POST, v.v.).

Chúng tôi sẽ mở rộng chương trình Hello World của mình để xử lý nhiều loại yêu cầu HTTP hơn.

var express = require('express');
var app = express();

// This responds with "Hello World" on the homepage
app.get('/', function (req, res) {
   console.log("Got a GET request for the homepage");
   res.send('Hello GET');
})

// This responds a POST request for the homepage
app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST');
})

// This responds a DELETE request for the /del_user page.
app.delete('/del_user', function (req, res) {
   console.log("Got a DELETE request for /del_user");
   res.send('Hello DELETE');
})

// This responds a GET request for the /list_user page.
app.get('/list_user', function (req, res) {
   console.log("Got a GET request for /list_user");
   res.send('Page Listing');
})

// This responds a GET request for abcd, abxcd, ab123cd, and so on
app.get('/ab*cd', function(req, res) {   
   console.log("Got a GET request for /ab*cd");
   res.send('Page Pattern Match');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Lưu đoạn mã trên vào một tệp có tên server.js và chạy nó bằng lệnh sau.

$ node server.js

Bạn sẽ thấy đầu ra sau –

Example app listening at http://0.0.0.0:8081

Giờ đây, bạn có thể thử các yêu cầu khác nhau tại http://127.0.0.1:8081 để xem kết quả do server.js tạo ra. Sau đây là một số ảnh chụp màn hình hiển thị các phản hồi khác nhau cho các URL khác nhau.

Màn hình hiển thị lại http://127.0.0.1:8081/list_user

Màn hình hiển thị lại http://127.0.0.1:8081/abcd

Màn hình hiển thị lại http://127.0.0.1:8081/abcdefg

Phục vụ file tĩnh

Express cung cấp một phần mềm trung gian tích hợp sẵn express.static để phục vụ các tệp tĩnh, chẳng hạn như hình ảnh, CSS, JavaScript, v.v.

Bạn chỉ cần chuyển tên của thư mục nơi bạn lưu giữ nội dung tĩnh của mình tới phần mềm trung gian express.static để bắt đầu phân phối tệp trực tiếp. Ví dụ: nếu bạn giữ các tệp hình ảnh, CSS và JavaScript của mình trong một thư mục có tên công khai, bạn có thể thực hiện điều này –

app.use(express.static('public'));

Chúng tôi sẽ giữ một vài hình ảnh trong thư mục con public/images như sau –

node_modules
server.js
public/
public/images
public/images/logo.png

Hãy sửa đổi ứng dụng “Xin chào Word” để thêm chức năng xử lý các tệp tĩnh.

var express = require('express');
var app = express();

app.use(express.static('public'));

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port

   console.log("Example app listening at http://%s:%s", host, port)
})

Lưu đoạn mã trên vào một tệp có tên server.js và chạy nó bằng lệnh sau.

$ node server.js

Bây giờ hãy mở http://127.0.0.1:8081/images/logo.png trong bất kỳ trình duyệt nào và quan sát kết quả sau.

NHẬN phương pháp

Đây là một ví dụ đơn giản chuyển hai giá trị bằng phương thức HTML FORM GET. Chúng tôi sẽ sử dụng bộ định tuyến process_get bên trong server.js để xử lý đầu vào này.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_get" method = "GET">
         First Name: <input type = "text" name = "first_name">  <br>
         Last Name: <input type = "text" name = "last_name">
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

Hãy lưu đoạn mã trên vào index.htm và sửa đổi server.js để xử lý các yêu cầu trang chủ cũng như đầu vào được gửi bởi biểu mẫu HTML.

var express = require('express');
var app = express();

app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.get('/process_get', function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.query.first_name,
      last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Truy cập tài liệu HTML bằng cách sử dụng http://127.0.0.1:8081/index.htm sẽ tạo ra biểu mẫu sau –

First Name:
Last Name:

Bây giờ bạn có thể nhập Họ và Tên, sau đó nhấp vào nút gửi để xem kết quả và nó sẽ trả về kết quả sau –

{"first_name":"John","last_name":"Paul"}

Phương thức POST

Dưới đây là một ví dụ đơn giản chuyển hai giá trị bằng phương thức HTML FORM POST. Chúng tôi sẽ sử dụng bộ định tuyến process_get bên trong server.js để xử lý đầu vào này.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_post" method = "POST">
         First Name: <input type = "text" name = "first_name"> <br>
         Last Name: <input type = "text" name = "last_name">
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

Hãy lưu đoạn mã trên vào index.htm và sửa đổi server.js để xử lý các yêu cầu trang chủ cũng như đầu vào được gửi bởi biểu mẫu HTML.

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/process_post', urlencodedParser, function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.body.first_name,
      last_name:req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Truy cập tài liệu HTML bằng cách sử dụng http://127.0.0.1:8081/index.htm sẽ tạo ra biểu mẫu sau –

First Name:
Last Name:

Bây giờ bạn có thể nhập Họ và Tên, sau đó nhấp vào nút gửi để xem kết quả sau –

{"first_name":"John","last_name":"Paul"}

Upload file

Mã HTML sau đây tạo biểu mẫu trình tải tệp lên. Biểu mẫu này có thuộc tính method được đặt thành POST và thuộc tính enctype được đặt thành multipart/form-data

<html>
   <head>
      <title>File Uploading Form</title>
   </head>

   <body>
      <h3>File Upload:</h3>
      Select a file to upload: <br />
      
      <form action = "http://127.0.0.1:8081/file_upload" method = "POST" 
         enctype = "multipart/form-data">
         <input type="file" name="file" size="50" />
         <br />
         <input type = "submit" value = "Upload File" />
      </form>
      
   </body>
</html>

Hãy lưu đoạn mã trên vào index.htm và sửa đổi server.js để xử lý các yêu cầu trang chủ cũng như tải tệp lên.

var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}));

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/file_upload', function (req, res) {
   console.log(req.files.file.name);
   console.log(req.files.file.path);
   console.log(req.files.file.type);
   var file = __dirname + "/" + req.files.file.name;
   
   fs.readFile( req.files.file.path, function (err, data) {
      fs.writeFile(file, data, function (err) {
         if( err ) {
            console.log( err );
            } else {
               response = {
                  message:'File uploaded successfully',
                  filename:req.files.file.name
               };
            }
         
         console.log( response );
         res.end( JSON.stringify( response ) );
      });
   });
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Truy cập tài liệu HTML bằng cách sử dụng http://127.0.0.1:8081/index.htm sẽ tạo ra biểu mẫu sau –

File Upload:
Select a file to upload: 



NOTE: This is just dummy form and would not work, but it must work at your server.

Quản lý cookie

Bạn có thể gửi cookie đến máy chủ Node.js có thể xử lý tương tự bằng cách sử dụng tùy chọn phần mềm trung gian sau. Sau đây là một ví dụ đơn giản để in tất cả các cookie do khách hàng gửi.

var express      = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function(req, res) {
   console.log("Cookies: ", req.cookies)
})
app.listen(8081)