Công cụ mẫu giúp chúng tôi tạo một mẫu HTML với mã tối thiểu. Ngoài ra, nó có thể đưa dữ liệu vào mẫu HTML ở phía máy khách và tạo HTML cuối cùng
Hình dưới đây minh họa cách hoạt động của template engine trong Node. js
Theo hình trên, trình duyệt phía máy khách tải mẫu HTML, dữ liệu JSON/XML và thư viện công cụ mẫu từ máy chủ. Công cụ mẫu tạo HTML cuối cùng bằng cách sử dụng mẫu và dữ liệu trong trình duyệt của khách hàng. Tuy nhiên, một số mẫu HTML cũng xử lý dữ liệu và tạo trang HTML cuối cùng ở phía máy chủ
Có nhiều công cụ mẫu có sẵn cho Node. js. Mỗi công cụ mẫu sử dụng một ngôn ngữ khác nhau để xác định mẫu HTML và đưa dữ liệu vào đó
Đầu tiên để tạo bản demo cho bài viết này, chúng ta phải tạo một cơ sở dự án với ExpressJS NodeJS nhé. Để tạo nhanh nhất mình sử dụng
// ...
// view engine setup
app.set['views', path.join[__dirname, 'views']];
app.set['view engine', 'ejs'];
// ...
3sudo npm install express-generator -g
express --view=ejs Demo_EJS
Khi chạy xong lệnh tạo dự án với view engine là ejs ta có dự án với cấu trúc thư mục như sau
Như vậy với câu lệnh trên thì ta đã tạo được 1 project Express sử dụng sẵn view engine EJS. Xem công cụ này đã được thiết lập trong ứng dụng tệp. js
// ...
// view engine setup
app.set['views', path.join[__dirname, 'views']];
app.set['view engine', 'ejs'];
// ...
Tiếp theo để minh họa cách sử dụng mình sẽ thực hiện công việc tách bố cục cơ bản của trang web và hiển thị dữ liệu từ máy chủ. Đầu tiên ta thử kết xuất dữ liệu từ máy chủ
Chỉnh sửa tệp đã chỉnh sửa
// ...
// view engine setup
app.set['views', path.join[__dirname, 'views']];
app.set['view engine', 'ejs'];
// ...
4var express = require['express'];
var router = express.Router[];
/* GET home page. */
router.get['/', function[req, res, next] {
let list = [
{name: 'PHP'},
{name: 'Ruby'},
{name: 'Java'},
{name: 'Python'},
{name: 'dotNet'},
{name: 'C#'},
{name: 'Swift'},
{name: 'Pascal'},
]
res.render['index', { title: 'Demo Ejs', list: list }];
}];
module.exports = router;
Tệp
// ...
// view engine setup
app.set['views', path.join[__dirname, 'views']];
app.set['view engine', 'ejs'];
// ...
5
This is header
List of programming languages
This is footer
Như vậy ta đã thực hiện truyền dữ liệu từ máy chủ sang chế độ xem và hiển thị ra. Ngoài ra, ta có thể tách các phần header, footer bằng cách thêm các file header. ejs, chân trang. ejs after that include into as after
List of programming languages
Pug NodeJS
Pug – tên trước đây là Jade, cũng là 1 view engine khá phổ biến trong các project Nodejs. To use it doing view engine ta setup as after
With ví dụ như trên ta tạo các tệp pug với nội dung như sau
// file layout.pug
doctype html
html
head
title= title
link[rel='stylesheet', href='/stylesheets/style.css']
body
include header
block content
include footer
sudo npm install express-generator -g
express --view=ejs Demo_EJS
0Như vậy với cùng một nội dung ta thấy cách viết của Pug rất rõ ràng, ngắn gọn và dễ hiểu. Pug có cách hoạt động gần giống như ngôn ngữ lập trình Python tức thì được sử dụng thụt lề hoặc khoảng trắng. Ta không cần quan tâm thẻ đóng/mở vì Pug sẽ thay bạn làm điều đó
Please tham khảo. Jade là gì ?
Hbs [Tay lái. js] NútJS
To use this template ta set view engine to_______06. Đồng thời ta phải đăng ký các khối [trong handlebarjs gọi là một phần] như sau
sudo npm install express-generator -g
express --view=ejs Demo_EJS
2Với bài toán trên ta cũng sẽ tạo các file hbs có nội dung như sau
sudo npm install express-generator -g
express --view=ejs Demo_EJS
3// ...
// view engine setup
app.set['views', path.join[__dirname, 'views']];
app.set['view engine', 'ejs'];
// ...
0// ...
// view engine setup
app.set['views', path.join[__dirname, 'views']];
app.set['view engine', 'ejs'];
// ...
1// ...
// view engine setup
app.set['views', path.join[__dirname, 'views']];
app.set['view engine', 'ejs'];
// ...
2Kết luận
Như vậy mình vừa thử sử dụng một vài view engine khá phổ biến trong dự án Nodejs. Và nếu lựa chọn để phát triển sản phẩm thì mình khuyên bạn nên chọn Pug vì nó rất đơn giản và dễ hiểu