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');
// ...

sudo 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');
// ...

var 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');
// ...

  
    
    
  
  
    

      
This is header
    
    

      
<%= title %>
      List of programming languages
      

          <% list.forEach(function(item) { %>
        
<%= item.name %>
          <% }); %>
      
    
    
  

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

  
    
    
  
  
    

      <% include header %>
    
    

      
<%= title %>
      List of programming languages
      

          <% list.forEach(function(item) { %>
        
<%= item.name %>
          <% }); %>
      
    
    
  

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

Như 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

Vớ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

// ...
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// ...

// ...
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// ...

// ...
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// ...

Kế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

Công cụ xem trong nút JS là gì?

Công cụ xem nào là tốt nhất cho Node JS?

Làm cách nào để sử dụng chế độ xem trong nodejs?

ejs có còn được sử dụng không?