Đuôi ejs là gì

Question

EJS

Nội dung chính Show

Hbs (Handlebars.js) NodeJS
Kết luận

Đầu tiên để tạo demo cho bài viết này ta cần phải tạo một project base với ExpressJS NodeJS nhé. Để tạo nhanh nhất mình dùng express-generator.

sudo npm install express-generator -g
express --view=ejs Demo_EJS

Khi chạy xong lệnh tạo project với view engine là ejs ta có project 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. View engine này được setup trong file app.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 việc bóc tách layout cơ bản của trang web và render dữ liệu từ server. Đầu tiên ta thử việc render ra dữ liệu từ server.

Chỉnh sửa file routes/index.js:

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;

File views/index.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <header>
      <h3>This is header</h3>
    </header>
    <main>
      <h2><%= title %></h2>
      List of programming languages
      <ul>
          <% list.forEach(function(item) { %>
        <li><%= item.name %></li>
          <% }); %>
      </ul>
    </main>
    <footer>
      <h3>This is footer</h3>
    </footer>
  </body>
</html>

Như vậy ta đã thực hiện truyền dữ liệu từ server sang view và render 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, footer.ejs sau đó include vào như sau:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <header>
      <% include header %>
    </header>
    <main>
      <h2><%= title %></h2>
      List of programming languages
      <ul>
          <% list.forEach(function(item) { %>
        <li><%= item.name %></li>
          <% }); %>
      </ul>
    </main>
    <footer>
      <% include footer %>
    </footer>
  </body>
</html>

Pug NodeJS

PUG

Pug – tên trước đây là Jade, cũng là 1 view engine khá phổ biến trong các project Nodejs. Để sử dụng nó làm view engine ta setup như sau:

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

Với ví dụ như trên ta tạo các file 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

// file index.pug
extends layout
block content
  h2= title
  | List of programming languages
  ul
    each item in list
      li= item.name

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 là dùng indent 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 đó.

Hãy tham khảo: Jade là gì ? Và cách sử Jade với NodeJS

Hbs (Handlebars.js) NodeJS

Để sử dụng template này ta set view engine thành hbs. Đồng thời ta phải register các block (trong handlebarjs gọi là partial) như sau:


var hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

Với bài toán trên ta cũng sẽ tạo các file hbs có nội dung như sau:

// file layout.hbs
<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    {{> header }}
    {{{body}}}
    {{> footer }}
  </body>
</html><code class="language-javascript">


// file /views/partials/header.hbs
<h3>This is header</h3>

// file /views/partials/footer.hbs
<h3>This is footer</h3>

// file index.hbs
<h2>{{title}}</h2>
List of programming languages
<ul>
  {{#each list}}
    <li>{{name}}</li>
  {{/each }}
</ul>

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 project 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.

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.