Top 3 view engine phổ biến trong nod ejs là gì, phần mềm mở file

Xin chào các bạn, chúng ta cùng bắt đầu bài số 9 trong loạt seriesLập trình web NodeJS với ExpressJScác bạn nhé :)))

Bài trước, mình đã giới thiệu các bạn cách tạo nhanh khung ứng dụng với express-generator cùng với view engine ejs. Trong bài này, mình sẽ đi chi tiết hơn về ejs nhé.

Bạn đang xem: Top 3 view engine phổ biến trong nod ejs là gì, phần mềm mở file

Thực đơn bao gồm:

1. EJS là gì? Cài đặt EJS

EJS viết tắt của Embedded JavaScript – nhúng javascript hay javascript được nhúng nhỉ? Thực chất chỉ là javascript (JS) thôi, như những gì chúng ta đã học về JS, nhưng mà ở đây, ejs sử dụng JS cơ bản để nhúng vào trong code HTML nhằm mục đích tạo mã đánh dấu (markup) – từ đó tạo ra file .HTML khi chạy.

Khi tạo ứng dụng express với epxress-generator sử dụng view engine ejs thì ejs đã được cài và config trong ứng dụng của chúng ta rồi, các file .ejs này nằm trong thư mục views với format: tên_file.ejs.Nếu chỉ sử dụng express thuần bằng cách gọi module này vào sử dụng thì ta cài đặt ejs bằng cú pháp: npm install ejs, sau đấy trong file index.js thêm 2 dòng config để set ejs cho ứng dụng:

app.set("views",path.join(__dirname,"views"));

app.set("viewengine","ejs");

/** * Châu IT - https://realchampionshipwrestling.com * Sep 8, 2021 * Bài 9: Tìm hiểu EJS template engie * index.js */const https = require("https");const express = require("express");const path = require("path");const app = express();const port = 3000;app.set("views", path.join(__dirname, "views"));app.set("view engine", "ejs");app.get("/user", function (req, res) { res.render("index", {data: "John Does"});})Các bạn lưu ý nhớ gọi thằng path (dòng 9) ra dùng nhé.

Ta tạo thư mục “views” trong ứng dụng là thư mục sẽ chứa các file ejs.

Đối với cả 2 cách trên, để hiển thị ra HTML, ta sẽ render file .ejs và truyền giá trị (nếu có) cho nó (tên file không cần .ejs):

res.render("path/file_name", {variable: value});

2. Cách dùng EJS

Cách nhúng code JS

Chúng ta nhúng JS vào trong file ejs bằng cú pháp: %>

Ví dụ:


Hello !


Như các bạn thấy ở ví dụ trên, đoạn code JS gán “John Does” cho biến myName được đặt trong , lúc này ejs sẽ hiểu và lưu vào bộ nhớ, sau đấy khi xuất ra kết quả, ta chỉ cần gọi biến đấy ra

*
Xuất giá trị

– Xuất giá trị “unescaped” (không lưu vào bộ nhớ đệm)

Lấy lại ví dụ trên, sau khi gán giá trị cho biến myName, ta thực hiện cú pháp: %>, ở đây ta có%>, ta sẽ sử dụng: %>

*

Ta thấy kết quả hoàn toàn giống nhau. Hãy thử chạy đoạn code sau:


Hello ! () Hello ! ()


Chạy thử:

*

Kết quả khác nhau. Trong khi, Ghi chú, comment code

Bình thường trong JS, chúng ta sử dụng “//” để code được bỏ qua khi chạy. Trong ejs ta sử dụng:

Sử dụng lại HTML

Ví dụ bạn có 1 ứng dụng nhỏ tầm 5 trang, mỗi trang đều có header và footer giống nhau, như vậy, 5 trang thì bạn phải copy + paste cho 4 trang còn lại, mỗi lần chỉnh sửa header hay footer thì phải copy + paste lại – khá là mất thời gian. Với cú pháp sẽ giúp chúng ta tiết kiệm thời gian, nhanh, gọn để sử dụng lại code html từ các file khác, nếu có chỉnh sửa thì chỉ cần update ở file gốc là được.

Xem thêm: Quang Hải Bao Nhiêu Tuổi - Cầu Thủ Bóng Đá Nguyễn Quang Hải

Ví dụ:

Hello! Ở trên, ta đã gọi 2 file header và footer vào trong 1 file khác. Rất là tiện lợi.

Sử dụng JS cơ bản

Trong ejs, ta có thể sử dụng vòng lặp, câu điều kiện,… một cách rất linh hoạt. Ví dụ:

{ if (item === 1) { %> This is h1 tag

This is h2 tag

Not h tag

Chỉ cần nằm trong , code JS sẽ được thực thi.

3. Truyền giá trị từ route sang file .ejs

Khi xử lý backend, mỗi request của client sẽ khớp với một route mà chúng ta đã định nghĩa và thực hiện các function xử lý. Ta sẽ phải truyền giá trị từ các function này sang ejs để nhúng vào code HTML để hiển thị một cách linh động (dynamic) được.

Xem lại ví dụ trong bài Tạo khung ứng dụng Express bằng epxres-generator (mục 3):

routes/index.js:

var express = require("express");var router = express.Router();/* GET home page. */router.get("/", function(req, res, next) { res.render("index", { title: "Express", name: "realchampionshipwrestling.com" });});module.exports = router;Đoạn code trên truyền 2 giá trị ‘Express’ và ‘realchampionshipwrestling.com’ bằng biến title, name cho file index.ejs

Sau đây mình sẽ làm lại ví dụ này, bằng cách bóc tách ra thành các file header.ejs, footer.ejs để code trong xịn và clean hơn, đồng thời thêm route “/user/:username” nhé.

| W88Vuive | xosoketqua.com | jun88