Xin xin chào các bạn, bọn họ thuộc ban đầu bài xích số 9 vào loạt seriesLập trình website NodeJS cùng với ExpressJSchúng ta nhé :)))
Bài trước, tôi đã reviews các bạn cách tạo nkhô nóng khung áp dụng cùng với express-generator cùng với view engine ejs. Trong bài xích này, mình đang đi cụ thể rộng 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 đối kháng bao gồm:
1. EJS là gì? Cài đặt EJS
EJS viết tắt của Embedded JavaScript – nhúng javascript xuất xắc javascript được nhúng nhỉ? Thực hóa học chỉ với javascript (JS) thôi, tựa như những gì họ vẫn học về JS, tuy nhiên nhưng tại đây, ejs áp dụng JS cơ bản để nhúng vào trong code HTML nhằm mục tiêu tạo thành mã đánh dấu (markup) – trường đoản cú kia tạo thành file .HTML lúc chạy.
Khi chế tạo ra áp dụng express với epxress-generator áp dụng view engine ejs thì ejs đã làm được tải với config vào ứng dụng của chúng ta rồi, những file .ejs này bên trong thỏng mục views với format: tên_tệp tin.ejs.Nếu chỉ áp dụng express thuần bằng phương pháp Gọi module này vào áp dụng thì ta thiết lập ejs bằng cú pháp: npm install ejs, sau đấy trong file index.js thêm 2 chiếc config nhằm phối ejs đến ứng dụng:phầm mềm.set("views",path.join(__dirname,"views"));
tiện ích.set("viewengine","ejs");
/** * Châu IT - https://realchampionshipwrestling.com * Sep 8, 2021 * Bài 9: Tìm phát âm EJS template engie * index.js */const https = require("https");const express = require("express");const path = require("path");const ứng dụng = express();const port = 3000;tiện ích.set("views", path.join(__dirname, "views"));phầm mềm.set("view engine", "ejs");app.get("/user", function (req, res) res.render("index", data: "John Does");)Các các bạn xem xét lưu giữ hotline thằng path (dòng 9) ra cần sử dụng nhé.
Ta sản xuất thư mục “views” trong áp dụng là thư mục sẽ đựng các file ejs.
Đối với cả 2 cách trên, nhằm hiển thị ra HTML, ta đã render tệp tin .ejs với truyền quý giá (giả dụ có) mang lại nó (tên tệp tin không đề nghị .ejs):
res.render("path/file_name", variable: value);
2. Cách cần sử dụng EJS
Cách nhúng code JSChúng ta nhúng JS vào trong file ejs bằng cú pháp: %>
Ví dụ:
Hello !
Nlỗi chúng ta thấy làm việc ví dụ bên trên, đoạn code JS gán “John Does” đến biến hóa myName được đặt trong , bây giờ ejs vẫn đọc và lưu giữ vào bộ nhớ lưu trữ, sau đấy Khi xuất ra tác dụng, ta chỉ cần Hotline biến hóa đấy ra
– Xuất cực hiếm “unescaped” (ko lưu vào bộ nhớ lưu trữ đệm)
Lấy lại ví dụ trên, sau khi gán quý giá mang lại trở nên myName, ta triển khai cú pháp: %>, tại chỗ này ta có%>, ta vẫn sử dụng: %>
Ta thấy tác dụng hoàn toàn tương đương nhau. Hãy thử chạy đoạn code sau:
Hello ! () Hello ! ()
Chạy thử:
Kết trái không giống nhau. Trong khi, Ghi chụ, comment code Bình thường vào JS, họ sử dụng “//” để code được bỏ qua Khi chạy. Trong ejs ta sử dụng: ví dụ như chúng ta có một vận dụng nhỏ dại tầm 5 trang, từng trang đều phải sở hữu header cùng footer giống nhau, điều này, 5 trang thì bạn bắt buộc copy + paste đến 4 trang còn sót lại, các lần chỉnh sửa header tốt footer thì phải copy + paste lại – khá là mất thời hạn. Với cú pháp sẽ giúp họ tiết kiệm ngân sách và chi phí thời gian, nkhô hanh, gọn để thực hiện lại code html tự những tệp tin không giống, giả dụ có chỉnh sửa thì chỉ việc update ở file cội 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! Tại trên, ta sẽ Hotline 2 tệp tin header và footer vào trong một file khác. Rất là tiện lợi.
Sử dụng JS cơ bảnTrong ejs, ta có thể áp dụng vòng lặp, câu ĐK,… một cách linh thiêng hoạt. Ví dụ:
{ if (cửa nhà === 1) { %> This is h1 tag
This is h2 tag
Not h tagChỉ buộc phải nằm trong , code JS sẽ được tiến hành.
3. Truyền quý giá từ bỏ route quý phái file .ejs
Khi cách xử trí backkết thúc, mỗi request của client đã khớp với cùng 1 route mà họ đang quan niệm cùng thực hiện các function cách xử lý. Ta vẫn nên truyền giá trị trường đoản cú những function này sang trọng ejs để nhúng vào code HTML để hiển thị một phương pháp biến hóa năng động (dynamic) được.
Xem lại ví dụ vào bài bác Tạo size vận dụng Express bằng epxres-generator (mục 3):
routes/index.js:
var express = require("express");var router = express.Router();/* GET home page page. */router.get("/", function(req, res, next) res.render("index", title: "Express", name: "realchampionshipwrestling.com" ););module.exports = router;Đoạn code bên trên truyền 2 giá trị ‘Express’ cùng ‘realchampionshipwrestling.com’ bởi thay đổi title, name đến file index.ejs
Sau trên đây mình đang có tác dụng lại ví dụ này, bằng phương pháp tách tách ra thành những file header.ejs, footer.ejs để code trong xịn với clean hơn, đồng thời thêm route “/user/:username” nhé.