Sử dụng EJS trong NodeJS

Sử dụng EJS trong NodeJS giúp bạn hiện data trong các tag html một cách nhanh chóng. EJS là một module được dùng phổ biến trong nodejs.

---

---

Giới thiệu EJS

Trong một route của nodejs, nếu bạn muốn trả về client một khối code html phức tạp đã được nhúng sẵn data trong các tag html thì có thể dùng các module hỗ trợ như ejs, jade, pug… Đây là bài hướng dẫn bạn sử dụng EJS trong NodeJS, vì module này dễ dùng, đơn giản.

Cài đặt EJS

Muốn dùng ejs thì cài đặt vào trong project node rồi khai báo nó trong ứng dụng . Việc cài rất đơn giản với lệnh npm install ejs

Khai báo sử dụng EJS

Để khai báo sử dụng EJS trong NodeJS , dùng hàm set của node server với tham số view engine là ejs, đồng thời khai báo thông số views là folder chứa các file view. Xem code sau:

//index.js
const express = require("express");
const app = express();
const port = 3000;
app.set("view engine","ejs");
app.set("views","./views");

//định nghĩa các routes

app.listen(port, ()=>{ console.log(`Project dang chay o port ${port}`)})

Nạp view với ejs

Để nạp một file view với ejs , bạn dùng hàm render trong đối tượng response. File view phải đặt trong folder views đã khai báo và có tên mở rộng là .ejs

Khi nạp view , bạn có thể truyền biến cho view để view hiển thị. Các biến truyền trong 1 đối tượng là tham số thứ hai của hàm render. Mời xem code sau là cách truyền 2 biến title và name cho view chao

res.render("chao", {title:"Anh" , name:"Tèo"});

Code trong view ejs

Code trong các file views của ejs là code để hiện data trong các tag html. Cũng có thể dùng các vòng lặp để hiện, dùng cú pháp if để đánh giá điều kiện. Trong view ejs, cú pháp <% … %> thường dùng để diễn tả các lệnh.

Hiện giá trị một biến

Trong view, hiện giá trị của biến bằng cù pháp <%= tên biến %>. Ví dụ: <%=title ?>

Sử dụng lệnh if trong ejs view

Trong quá sử dụng EJS trong NodeJS, thế nào bạn cũng cần diễn tả các điều kiện để hiển thị dữ liệu. Dùng lệnh if theo cú pháp như ví dụ sau đây:

Chào bạn! 
<% if (day=='Thứ bảy' || day=='Chủ nhật') { %>
   <h3>Hôm nay là cuối tuần</h3>
<% } else { %>
   <h3>Hôm nay là ngày <%= day%></h3>
<% } %>

Vòng lặp for trong ejs view

Trong ejs view, bạn có thể lặp qua mảng rất dễ dàng

app.get("/sp", (req, res)=>{ 
    let sp_arr = [
        {name:'HTC M9', price:6000000},
        {name:'Samsung S8', price:750000},
    ]
    res.render("sp", {sp_arr:sp_arr});
});

<% for (let sp of sp_arr)  {%>
  <p> <b> <%=sp.name%> </b>. Giá <%=sp.price %> </p>
<% } %>

Sử dụng CSS trong view ejs

Để nhúng file css vào view, trước tiên (bước 1) bạn dùng lệnh use của node server với hàm static để chỉ định folder gốc chứa các tài nguyên tĩnh (css, js, images…). Code như sau là chỉ định folder public chứa các tài nguyên tĩnh

//index.js
const express = require("express");
const app = express();
const port = 3000;
app.set("view engine","ejs");
app.set("views","./views");
app.use(express.static('public'));

Sau đó (bước 2 )là tạo file css trong folder public. Và cuối cùng (bước 3) nhúng file css vào trong ejs view

<link href="css/c1.css" rel="stylesheet">
<% for (let sp of sp_arr)  {%>
  <p> <b> <%=sp.name%> </b> Giá <%=sp.price %> </p>
<% } %>

Đọc thêm tài liệu ejs: https://www.npmjs.com/package/ejs