Express Framework trong Node.js

---

---

Giới thiệu Express Framework

Express là một framework nhỏ và tiện ích để xây dựng các ứng dụng web, cung cấp một lượng lớn của tính năng mạnh mẽ để phát triển các ứng dụng web và mobile. Nó rất dễ dàng để phát triển các ứng dụng nhanh dựa trên Node.js cho các ứng dụng Web. Dưới đây là các tính năng cơ bản của Express framework.

• Cho phép thiết lập các lớp trung gian để trả về các HTTP request.

• Định nghĩ bảng routing có thể được sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL.

• Cho phép trả về các trang HTML dựa vào các tham số truyền vào đến template.

Cài đặt Express Framework

Đầu tiên, cài đặt Express framework sử dụng npm như sau:

$ npm install express --save

Lệnh trên lưu phần cài đặt trong thư mục node_modules và tạo thư mục express bên trong thư mục đó. Dưới đây là các thành phần module quan trọng được cài đặt cùng với express:

• body-parser - Đây là một lớp trung gian node.js để xử lí JSON, dự liệu thô, text và mã hóa URL.

• cookie-parser - Chuyển đổi header của Cookie và phân bố đến các req.cookies

• multer - Đây là một thành phần trung gian trong node.js để xử lí phần multipart/form-data.

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

Ví dụ ứng dụng Helloworld trong Node.js

Dưới đây là một ví dụ rất cơ bản của Express minh họa cách bật Server và lắng nghe các kết nối trên cổng 3000. Ứng dụng này trả về Hello World! cho các requests đến trang chủ. Đối với các đường dẫn khác, nó sẽ trả về một 404 Not Found.

Tạo server.js có nội dung sau:

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("Ung dung Node.js dang lang nghe tai dia chi: http://%s:%s", host, port)

})

Chạy server.js để xem kết quả.

$ node server.js

Bạn sẽ thấy kết quả hiện ra:

Ung dung Node.js dang lang nghe tai dia chi: http://0.0.0.0:8081

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

Đối tượng Request & Response trong Node.js

Ứ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) {
   // --
})

Bạn có thể tham khảo chi tiết về 2 đối tượng này dưới đây:

• Đối tượng Request - Đối tượng này biểu diễn một HTTP request và có các thuộc tính cho các request như các chuỗi truy vấn, tham số, body, HTTP header và những phần khác.

• Đối tượng Response - Đối tượng này biểu diễn HTTP response được ứng dụng Express gửi đi khi nó nhận về một HTTP request.

Bạn có thể in ra các đối tượng req và res để cung cấp một lượng lớn thông tin liên quan đến HTTP request và trả về các cookie, session, URL …

Định tuyến cơ bản

Ở trên, bạn vừa theo dõi một ứng dụng cơ bản mà Server HTTP request đến một trang chủ. Định tuyến liên quan đến cách xác định một ứng dụng trả về cho một Client Request đến một Endpoint cụ thể, đó là một đường dẫn URI và trả về một phương thức HTTP request (GET, POST và các phương thức khác).

Dựa vào chương trình Hello World trên, mình sẽ phát triển thêm một số chức năng bổ sung để xử lý các HTTP request.

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

// Phuong thuc get() phan hoi mot GET Request ve Homepage
app.get('/', function (req, res) {
   console.log("Nhan mot GET Request ve Homepage");
   res.send('Hello GET');
})


// Phuong thuc post() phan hoi mot POST Request ve Homepage
app.post('/', function (req, res) {
   console.log("Nhan mot POST Request ve Homepage");
   res.send('Hello POST');
})

// Phuong thuc delete() phan hoi mot DELETE Request ve /del_user page.
app.delete('/del_user', function (req, res) {
   console.log("Nhan mot DELETE Request ve /del_user");
   res.send('Hello DELETE');
})

// Phuong thuc nay phan hoi mot GET Request ve /list_user page.
app.get('/list_user', function (req, res) {
   console.log("Nhan mot GET Request ve /list_user");
   res.send('Page Listing');
})

// Phuong thuc nay phan hoi mot GET Request ve abcd, abxcd, ab123cd, ...
app.get('/ab*cd', function(req, res) {   
   console.log("Nhan mot GET request ve /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("Ung dung Node.js dang lang nghe tai dia chi: http://%s:%s", host, port)

})

Lưu phần code trong server.js và chạy file này với lệnh sau:

$ node server.js

Kiểm tra kết quả:

Ung dung Node.js dang lang nghe tai dia chi: http://0.0.0.0:8081

Bây giờ, bạn có thể thử các Request khác tại địa chỉ http://127.0.0.1:8081 để xem kết quả tạo bởi server.js. Dưới đây là vài màn hình hiển thị các response khác nhau với các URL khác nhau.

Màn hình kết quả cho http://127.0.0.1:8081/list_user

Màn hình kết quả cho http://127.0.0.1:8081/abcd

Màn hình kết quả cho http://127.0.0.1:8081/abcdefg

Đối với các File tĩnh

Express cung cấp các tiện ích lớp trung gian express.static để phục vụ cho các file tĩnh như hình ảnh, CSS, Javascript, ...

Về cơ bản, bạn chỉ cần truyền tên thư mục nơi bạn giữ các file này, express.static sẽ sử dụng file đó một cách trực tiếp. Ví dụ, bạn muốn giữ hình ảnh, CSS và Javascript trong thư mục public, bạn có thể làm như sau:

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

Giả sử mình 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

Sửa đổi ứng dụng "Hello Word" trên để thêm một số tính năng bổ sung để xử lý các file 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("Ung dung Node.js dang lang nghe tai dia chi: http://%s:%s", host, port)

})

Lưu phần code trong server.js và chạy file này với lệnh sau:

$ node server.js

Bây giờ mở trình duyệt và gõ địa chỉ http://127.0.0.1:8081/images/logo.png để xem kết quả.

Ví dụ phương thức GET

Dưới đây là một ví dụ đơn giản để truyền 2 giá trị sử dụng HTML FORM với phương thức GET. Mình sẽ sử dụng process_get trong server.js để xử lí phần input.

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

Lưu đoạn code trên trong index.htm và sửa đổi server.js như sau.

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

   // Chuan bi output trong dinh dang JSON
   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("Ung dung Node.js dang lang nghe tai dia chi: http://%s:%s", host, port)

})

Mở trình duyệt và gõ địa chỉ http://127.0.0.1:8081/index.htm để xem kết quả:

First Name:
 
Last Name:
 

Bây giờ, bạn có thể nhập First Name và Last Name, nhấn nút Submit rồi xem kết quả:

{"first_name":"Hoang","last_name":"Nguyen Manh"}

Ví dụ phương thức POST

Dưới đây là ví dụ cơ bản để truyền 2 giá trị sử dụng HTML form bởi sử dụng phương thức POST. Mình sẽ sử dụng process_post trong server.js để xử lí phần input 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>

Lưu đoạn code trên trong index.htm và sửa đổi server.js như sau:

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

// Tao mot parser co dang application/x-www-form-urlencoded
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) {

   // Chuan bi output trong dinh dang JSON
   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("Ung dung Node.js dang lang nghe tai dia chi: http://%s:%s", host, port)

})

Mở trình duyệt và gõ địa chỉ http://127.0.0.1:8081/index.htm để xem kết quả:

First Name:
 
Last Name:
 

Bây giờ, bạn có thể nhập First Name và Last Name, nhấn nút Submit rồi xem kết quả:

{"first_name":"Hoang","last_name":"Nguyen Manh"}

Ví dụ File Upload

Dưới đây là HTML code để tạo một File Upload Form. Form này có những thuộc tính thiết lập đến phương thức POST và thuộc tính mã hóa để thiết lập 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>

Lưu đoạn code trên trong index.htm và sửa đổi server.js như sau:

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 duoc upload thanh cong!',
                   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("Ung dung Node.js dang lang nghe tai dia chi: http://%s:%s", host, port)

})

Bây giờ bạn mở trình duyệt và gõ địa chỉ http://127.0.0.1:8081/index.htm để xem kết quả:

File Upload:
Chọn một File để Upload: 





Ghi chú: Đây chỉ là ví dụ và hiện tại nó sẽ không làm việc.

Ví dụ quản lý Cookie

Bạn có thể gửi các Cookie tới Node.js Server. Ví dụ dưới đây minh họa cách in tất cả Cookie được gửi bởi Client.

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)

Các bài học NodeJS phổ biến khác tại VietJack:

• Giới thiệu qua về Module
• Ứng dụng Hello World
• REPL Terminal
• Node.js NPM
• Khái niệm Callback

---

---

---