Template Engine trong Express.js
1. Template Engine là gì?
Template Engine (công cụ template) là một hệ thống giúp tạo ra HTML động bằng cách sử dụng các biến và logic ngay trong file template thay vì phải viết HTML thuần trong mã JavaScript.
Khi sử dụng Template Engine, ta có thể:
- Tạo HTML động bằng cách truyền dữ liệu từ server vào template.
- Tái sử dụng các thành phần giao diện bằng cách tạo partial templates (tệp con).
- Giữ code gọn gàng và dễ bảo trì hơn so với việc sử dụng res.send() với chuỗi HTML thuần.
Express.js hỗ trợ nhiều template engine như:
- EJS (Embedded JavaScript)
- Pug (trước đây gọi là Jade)
- Handlebars (hbs)
2. Cài đặt và sử dụng Template Engine trong Express.js
a. Cài đặt Express.js
Trước khi sử dụng bất kỳ template engine nào, ta cần cài đặt Express:
npm init -y # Khởi tạo package.json
npm install express # Cài đặt Express.js
b. Cấu hình Template Engine trong Express
Mặc định, Express không đi kèm template engine, nhưng bạn có thể thiết lập bằng cách:
const express = require('express');
const app = express();
// Cấu hình thư mục chứa views
app.set('views', './views');
// Cấu hình template engine
app.set('view engine', 'ejs'); // Hoặc 'pug', 'hbs' tùy theo bạn chọn engine nào
app.get('/', (req, res) => {
res.render('index', { title: 'Trang chủ', message: 'Chào mừng đến với Template Engine!' });
});
app.listen(3000, () => {
console.log('Server chạy tại http://localhost:3000');
});
3. Sử dụng EJS (Embedded JavaScript)
a. Cài đặt EJS
npm install ejs
b. Cấu hình Express sử dụng EJS
app.set('view engine', 'ejs');
c. Tạo file template với EJS
Tạo thư mục views và tạo file index.ejs:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
EJS sử dụng <%= %> để hiển thị dữ liệu được truyền từ server.
d. Chạy server và truy cập
Khởi động server:
node app.js
Truy cập: http://localhost:3000
4. Sử dụng Pug (trước đây là Jade)
a. Cài đặt Pug
npm install pug
b. Cấu hình Express sử dụng Pug
app.set('view engine', 'pug');
c. Tạo file template với Pug
Tạo file views/index.pug:
doctype html
html
head
title= title
body
h1= message
Pug sử dụng cú pháp thụt lề thay vì dấu ngoặc nhọn.
5. Sử dụng Handlebars (hbs)
a. Cài đặt Handlebars
npm install hbs
b. Cấu hình Express sử dụng Handlebars
app.set('view engine', 'hbs');
c. Tạo file template với Handlebars
Tạo file views/index.hbs:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
<h1>{{message}}</h1>
</body>
</html>
Handlebars sử dụng {{ }} để hiển thị dữ liệu.
6. So sánh các Template Engine
| Template Engine | Ưu điểm | Nhược điểm |
|---|---|---|
| EJS | Dễ học, cú pháp giống JavaScript | Cần nhiều dấu <%= %> để hiển thị dữ liệu |
| Pug | Cú pháp gọn gàng, không cần đóng thẻ HTML | Khó đọc với người mới |
| Handlebars | Đơn giản, dễ dùng, hỗ trợ partials tốt | Không hỗ trợ logic phức tạp như if/else nâng cao |
7. Tổng kết
- EJS: Phù hợp nếu bạn quen với cú pháp HTML thuần.
- Pug: Phù hợp nếu bạn thích cú pháp ngắn gọn.
- Handlebars: Phù hợp nếu bạn cần một template engine đơn giản và dễ dùng.
Bạn nên chọn template engine phù hợp với nhu cầu của dự án!
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com