Trong phát triển ứng dụng web, việc hiển thị dữ liệu từ máy chủ lên trang web là một phần quan trọng để tạo ra trải nghiệm tương tác và động cho người dùng. Đây là lúc Template Engine trong Express.js đến cứu giúp. Template Engine là công cụ cho phép bạn tạo ra các mẫu HTML động bằng cách chèn dữ liệu từ phía máy chủ vào mã HTML.
Tại sao Sử Dụng Template Engine?
Template Engine giúp tách biệt giữa mã HTML và dữ liệu từ máy chủ. Điều này cho phép bạn quản lý dễ dàng mã HTML mà không cần phải nhúng dữ liệu vào từng dòng mã. Thay vào đó, bạn sẽ tạo các "khu vực" hoặc "thẻ" trong mã HTML mà Template Engine sau đó sẽ điền thông tin từ dữ liệu máy chủ vào.
Cách Sử Dụng Template Engine trong Express.js
Express.js hỗ trợ nhiều loại template engine, ví dụ như Pug (trước đây là Jade) và EJS (Embedded JavaScript). Dưới đây là ví dụ về cách sử dụng Pug và EJS trong Express.js:
Sử Dụng Pug Template Engine
Cài đặt Pug: Bạn cần cài đặt gói pug thông qua npm.
npm install pug --save
Thiết lập Template Engine: Trong tệp cấu hình của ứng dụng (ví dụ: app.js), định nghĩa template engine là Pug.
app.set('view engine', 'pug');
Tạo Mẫu Pug: Tạo các tệp Pug trong thư mục views. Ví dụ, tạo một tệp index.pug:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Điều Hướng và Hiển Thị Dữ Liệu: Trong xử lý tuyến đường, bạn có thể truyền dữ liệu cho template engine thông qua res.render().
app.get('/', (req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Sử Dụng EJS Template Engine:
Cài đặt EJS: Cài đặt gói ejs thông qua npm.
npm install ejs --save
Thiết lập Template Engine: Định nghĩa template engine là EJS trong tệp cấu hình của ứng dụng.
app.set('view engine', 'ejs');
Tạo Mẫu EJS: Tạo các tệp EJS trong thư mục views. Ví dụ, tạo một tệp index.ejs:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Điều Hướng và Hiển Thị Dữ Liệu: Trong xử lý tuyến đường, truyền dữ liệu cho template engine thông qua res.render().
app.get('/', (req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Kết Luận
Sử dụng Template Engine trong Express.js giúp bạn tạo ra các trang web động và hiển thị thông tin từ máy chủ lên trình duyệt của người dùng. Bằng cách sử dụng Pug, EJS hoặc các template engine khác, bạn có thể tạo ra các trang web tương tác và linh hoạt, cung cấp trải nghiệm tốt hơn cho người dùng và tối ưu hóa quản lý mã HTML và dữ liệu.