Node.js 13 – Template Engine trong Express

0
755

Template Engine là gì ?

Template engine là công cụ giúp chúng ta tạo ra các HTML template bằng những đoạn mã được tối giản. Ngoài ra nó có thể đưa dữ liệu vào HTML template ở phía máy khách và tạo ra các đoạn mã HTML.

Hiện nay có rất nhiều template engine cho Node.js. Mỗi template engine sử dụng các ngôn ngữ , cú pháp khác nhau để xác định các HTML templte và đưa dữ liệu vào.

Danh sách các loại template engine.

Ưu điểm khi sử dụng Template Engine

  • Cải thiện năng suất của các lập trình viên
  • Cải thiện khả năng đọc, bảo trì code
  • Hiêu suất nhanh hơn
  • Tối đa hóa cho xử lý phía khách hàng.
  • Một template có thể dùng trong nhiều trang.

Sử dụng Template Engine trong Express

Để hiện thị các tệp template engine chúng ta phải thiết lập trong ứng dụng của chúng ta 2 thành phần.

  • Đường dẫn chứa tệp template
  • Khai báo loại template engine muốn sử dụng.

Để thiết lập trong ứng dụng chúng ta sẽ có phương thức app.set() của đối tượng app

Cú pháp: 

Thiết lập đường dẫn chứa tệp template:

Trong đó:

  • views là từ khóa được quy đinh để thiết lập đường dẫn chứa template
  • folder là một chuỗi dùng để cung cấp đường dẫn thư mục chứa file template. Mặc định là “./views”

Thiết lập loại tempalate engine

Trong đó.

  • view engine là từ khóa quy định để thiết lập loại template engine muốn sử dụng.
  • template_engine_name tên loại template enigne sẽ sử dụng.

Kết hợp EJS template với Express

Như đã liệt kê ở phần đầu, trong node.js có rất nhiều loại template engine có thể kết hợp, và một trong số đó là EJS.

Cài đặt EJS

Trước tiên để sử dụng EJS các bạn vui lòng tải module này xuống bằng trình quản lý package của Node.js

Kết hợp với express

Để kết với express thì trước tiên các bạn tạo cho tôi một server đơn giản bằng express và được nghe trên cổng 3000.

File server.js

Tiếp theo, tại thư mục gốc của dự án các bạn tạo cho tôi thư mục "views" đây là thư mục sẽ chứa toàn bộ các file template của chúng ta.

Bây giờ chúng ta sẽ kết hợp EJS vào Express .

Trước tiên các bạn tạo cho tôi một file với tên demo.ejs ở trong thư mục views với nội dung.

Bây giờ bạn chỉnh lại file server.js như sau.

Lúc này bạn sẽ thấy tôi có chỉnh và thêm vài dòng code.

  • Dòng thứ 1, Đây là đoạn code dùng để thiết lập thư mục chứa template.
  • Dòng thứ 2, Đây là đoạn code dùng để thiết lập loại template engine muốn sử dụng.
  • Dòng thứ 3, Dòng code này sẽ dùng để biên dịch một file templte engine để chuyển thành mã HTML

Bây giờ các bạn tiến hành chạy thử ứng dụng lên bằng command lệnh

và truy cập vào đường dẫn http://localhost:3000

Các bạn sẽ nhận được nội dung từ file template engine được biên dịch sang mã HTML

 

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây