專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-08-16 07:58:01 來源：動力節點 瀏覽2046次
當您想要快速構建拆分為不同組件的 Web 應用程序時，可以使用模板引擎。模板還可以快速呈現需要傳遞給應用程序的服務器端數據。
例如，您可能希望擁有諸如正文、導航、頁腳、儀表板等組件。
模板引擎主要用于僅在一臺服務器上運行且不構建為 API 的服務器端應用程序。流行的包括 Ejs、Jade、Pug、Mustache、HandlebarsJS、Jinja2和Blade。
當您使用模板引擎構建服務器端應用程序時，模板引擎會將模板文件中的變量替換為實際值，并將該值顯示給客戶端。這使得快速構建我們的應用程序變得更加容易。
對于使用 NodeJS 運行時編寫的服務器端應用程序，您可以使用模板引擎。
以下步驟演示了模板引擎如何使用expressJs和模板引擎工作ejs。下面給出的示例在網頁上呈現用戶數據。
第 1 步：安裝express和ejs模板引擎
以下命令安裝ejs模板引擎和express框架：
npm install express ejs
第 2 步：設置視圖引擎
const express = require("express")
const app = express();
// Set the View Engine or Template Engine
app.set('view engine', 'ejs');
app.listen(3000)
在上面的代碼中，我們創建了 express 應用程序。該應用程序偵聽端口3000。
這行代碼: app.set('view engine', 'ejs'), 告訴我們的 express 應用程序我們想使用 EJS 作為我們的模板引擎。
第 3 步：設置視圖文件夾
創建一個名為“view”的文件夾。視圖文件夾應該包含我們的模板。這些模板之一是index.ejs，它將生成我們的首頁。第二個模板是user.ejs，它將用于從服務器端傳遞用戶數據以立即呈現在網頁上。
index.js
>view
index.ejs
user.ejs
第 4 步：設置路線
讓我們為我們的主頁和用戶頁面創建路由。
請注意以下res.render()方法。這就是您在expressJS.
app.get('/', function (req, res) {
res.render("index");
})
app.get("/user", function(req,res){
const user = {
name: "Theodore Kelechukwu O.",
stack: "MERN",
email: "theodoreonyejiaku@gmail.com",
hubby: ["singing", "playing guitar", "reading", "philosoph"]
}
res.render("user", {user});
})
正如我們所見，默認路由“\”在訪問時會顯示或呈現index.ejs頁面。同時，“\user”渲染user.ejs頁面。
我們將user對象傳遞給渲染對象，以便將user屬性傳遞給網頁并進行渲染。
第 5 步：模板化我們的視圖文件
現在我們已經從服務器端傳遞了用戶數據，我們需要立即在我們的前端或網頁上顯示它。
<html>
<head>
<title>This is the title</title>
</head>
<body>
<p>Welcome to Template Engines</p>
<a href="/user">View User</a>
</body>
</html>
<html>
<head>
<title>This is the title</title>
</head>
<body>
<h1>Welcome to User Details</h1>
<p><b>Name:</b> <%= user.name %></p>
<p><b>Email:</b> <%= user.email %></p>
<p><b>Stack:</b> <%= user.stack %></p>
<u><b>Hubbies</b></u>
<% user.hubby.forEach(hubby =>{ %>
<li><%= hubby %></li>
<% })%>
</body>
</html>
注意<%= variable %>顯示值的模式。這就是它在ejs. 還要注意user.forEach(); 這是為了展示模板引擎的強大功能。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號