Nội dung chính
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, tạo một thư mục E:\express\myapp để lưu trữ ứng dụng của bạn. Sau đó cd đến thư mục này:
> E: > cd E:\express\myapp
Sử dụng lệnh npm init để tạo một file package.json cho ứng dụng của bạn.
E:\express\myapp> npm init
Lệnh này sẽ nhắc bạn một số điều, chẳng hạn như tên, mô tả và phiên bản của ứng dụng của bạn. Hiện tại, bạn chỉ cần nhấn RETURN để chấp nhận mặc định, với ngoại lệ sau:
entry point: (index.js)
Nhập app.js, hoặc bất cứ tên nào bạn muốn đặt tên thay thế cho index.js. Nếu bạn muốn index.js, hãy nhấn RETURN để chấp nhận tên tệp mặc định được đề xuất.
Bây giờ cài đặt Express framework trong thư mục E:\express\myapp bằng npm: npm install express --save
> 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 8081. Ứ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 dang lang nghe tai: http://%s:%s", host, port)
})
Chạy server.js để xem kết quả.
> node server.js
Kết quả:
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 (Routing) 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 dang lang nghe tai: http://%s:%s", host, port)
})
Lưu phần code trong server.js và chạy file này với lệnh sau:
Output:
> node server.js
Kết quả:
Mở http://127.0.0.1:8081/ trong bất kỳ trình duyệt nào và xem kết quả.
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/abcde
Đối với các File static
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ử bạn có một vài hình ảnh trong thư mục con public/images
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 dang lang nghe tai: http://%s:%s", host, port)})
Lưu phần code trong server.js và chạy file này với lệnh sau:
Output:
> 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 dang lang nghe tai: 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ả:
Ung dung dang lang nghe tai: http://0.0.0.0:8081
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":"Thang","last_name":"Phi 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 dang lang nghe tai: 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ả:
Ung dung dang lang nghe tai: http://0.0.0.0:8081
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":"Thang","last_name":"Phi Manh"}
