Node.js: Framework Express

Khóa học qua video:

Tổng quan về Express

Express là một framework ứng dụng web Node.js đơn giản 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à thiết bị 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 framework Express:

Cho phép thiết lập phần mềm trung gian để phản hồi các 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 truyền các đối số đến các mẫu.

Cài đặt Express

Đầu tiên, ta cài đặt framework Express bằng cách sử dụng NPM để nó có thể được sử dụng để tạo ứng dụng web bằng cách sử dụng cmd của Node.js:

C:\Users\Your name>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 có tên express bên trong thư mục 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à middleware Node.js để xử lý dữ liệu biểu mẫu được mã hóa dạng JSON, Raw, Text và URL.
cookie-parser: Phân tích cú pháp tiêu đề Cookie và điền vào req.cookies với một đối tượng được khóa bởi tên cookie.
multer: Đây là middleware Node.js để xử lý dữ liệu dạng multipart/form-data.

C:\Users\Your name>npm install body-parser --save

C:\Users\Your name>npm install cookie-parser --save

C:\Users\Your name>npm install multer --save

Ví dụ 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 8080 để kết nối. Ứng dụng này sẽ phản hồi lạ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 thông báo 404 Not Found.

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

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

var server = app.listen(8080, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("App đang lắng nghe tại http://%s:%s", host, port)
})

Lưu đoạn mã trên trong một tệp có tên demo_express1.js và thực thi:

C:\Users\LongDT\nodejs>node demo_express1.js

Kết quả:

App đang lắng nghe tại http://:::8080

Mở trang web để xem kết quả: http://localhost:8080

Request và Response (Yêu cầu và Phản hồi)

Ứng dụng Express sử dụng một hàm callback có các tham số là các đối tượng request và response:

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

Đối tượng request: Đạ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.
Đối tượng response: Đạ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.

Cơ bản về Định tuyến (Routing)

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

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

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

// Phản hồi "Hello World" cho trang chủ:
app.get('/', function (req, res) {
   console.log("Đã yêu cầu GET cho trang chủ");
   res.send('Hello GET');
})

// Phản hồi POST cho trang chủ:
app.post('/', function (req, res) {
   console.log("Đã yêu cầu POST cho trang chủ");
   res.send('Hello POST');
})

// Phản hồi một yêu cầu DELETE cho trang /del_user page:
app.delete('/del_user', function (req, res) {
   console.log("Đã yêu cầu DELETE cho trang /del_user");
   res.send('Hello DELETE');
})

// Phản hồi một yêu cầu GET cho trang /list_user page:
app.get('/list_user', function (req, res) {
   console.log("Đã yêu cầu GET cho trang /list_user");
   res.send('Page Listing');
})

// Phản hồi một yêu cầu GET cho trang có dạng abcd, abxcd, ab123cd, ...
app.get('/ab*cd', function(req, res) {   
   console.log("Đã yêu cầu GET cho trang /ab*cd");
   res.send('Page Pattern Match');
})

var server = app.listen(8080, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Lắng nghe App tại http://%s:%s", host, port)
})

Lưu đoạn mã trên trong một tệp có tên demo_express1.js và thực thi:

C:\Users\LongDT\nodejs>node demo_express1.js

Kết quả:

App đang lắng nghe tại http://:::8080

Mở trang web để xem kết quả: http://localhost:8080, http://localhost:8080/list_user.

Cung cấp file tĩnh

Express cung cấp middleware là express.static được tích hợp sẵn để 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 giữ các tài nguyên tĩnh của mình cho middleware express.static để bắt đầu phân phối trực tiếp các tệ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 public, thì bạn có thể thực hiện việc này như sau:

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

Ta sẽ đưa vào một file ảnh trong thư mục con public/images như sau:

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

Hãy sửa đổi ứng dụng "Hello Word" trong file demo_express1.js để thêm chức năng xử lý các tệp tĩnh:

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

//Thêm lệnh này vào:
app.use(express.static('public'));

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

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

   console.log("App đang lắng nghe tại http://%s:%s", host, port)
})

Thực thi:

C:\Users\LongDT\nodejs>node demo_express1.js

Kết quả:

App đang lắng nghe tại http://:::8080

Thực thi trên trang web: http://localhost:8080/images/logo_v1study.png

Kết quả thực thi trên trang web sẽ giống như hình sau:

Phương thức GET

Dưới đây là một ví dụ đơn giản về việc truyền hai giá trị bằng phương thức GET. Ta sẽ sử dụng bộ định tuyến process_get bên trong demo_express1.js để xử lý đầu vào này.

<html>
   <body>
      
      <form action = "http://localhost:8080/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>

Bạn hãy tạo file index.html và lưu mã HTML ở trên vào, và sửa đổi demo_express1.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 và đưa ra định dạng JSON:

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

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

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

app.get('/process_get', function (req, res) {
   // Đưa ra định dạng JSON
   response = {
      first_name:req.query.first_name,
      last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})


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

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

   console.log("App đang lắng nghe tại http://%s:%s", host, port)
})

Thực thi file demo_express1.js:

C:\Users\LongDT\nodejs>node demo_express1.js

Kết quả:

App đang lắng nghe tại http://:::8080

Thực thi trên trình duyệt: http://localhost:8080/index.html

Sẽ xuất hiện một FORM như hình sau:

Bây giờ bạn nhập thông tin và nhấn Submit sẽ thấy được kết quả dạng như sau:

Phương thức POST

Dưới đây là một ví dụ đơn giản trong đó truyền hai giá trị bằng phương thức POST. Ta sẽ sử dụng bộ định tuyến process_post bên trong demo_express1.js để xử lý đầu vào này.

Trước tiên bạn hãy sửa đổi file index.html như sau:

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

Sửa đổi file demo_express1.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 như sau:

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

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

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

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

app.post('/process_post', urlencodedParser, function (req, res) {
   // Đưa ra định dạng JSON
   response = {
      first_name:req.body.first_name,
      last_name:req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})


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

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

   console.log("App đang lắng nghe tại http://%s:%s", host, port)
})

Thực thi file demo_express1.js:

C:\Users\LongDT\nodejs>node demo_express1.js

Kết quả:

App đang lắng nghe tại http://:::8080

Thực thi trên trình duyệt: http://localhost:8080/index.html

Sẽ xuất hiện một FORM như hình sau:

Bây giờ bạn nhập thông tin và nhấn Submit sẽ thấy được kết quả dạng như sau:

Upload file (Tải lên tệp)

Đoạn mã HTML sau tạo một biểu mẫu trình tải lên tệp. 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>
      Chọn 1 file để upload: <br />

      <form action = "http://localhost:8080/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 mã trên vào file index.htm và sửa đổi demo_express1.js để xử lý các yêu cầu trang chủ cũng như tải lên tệp:

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.html', 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:'Upload file thành công',
                  filename:req.files.file.name
               };
            }
         
         console.log( response );
         res.end( JSON.stringify( response ) );
      });
   });
})

var server = app.listen(8080, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Đang lắng nghe App tại http://%s:%s", host, port)
})

Thực thi để thấy được kết quả: http://localhost:8080/index.html

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 middleware cookie-parser. 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(8080)

» Tiếp: API RESTful

« Trước: Đối tượng process

Khóa học qua video:

Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript

Đăng ký Hội viên

Tất cả các video dành cho hội viên