您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“web開發(fā)中模板引擎指的是什么”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“web開發(fā)中模板引擎指的是什么”吧!
介紹
當您想要快速構(gòu)建拆分為不同組件的 Web 應用程序時,可以使用模板引擎。模板還可以快速呈現(xiàn)需要傳遞給應用程序的服務器端數(shù)據(jù)。
例如,您可能希望擁有諸如正文、導航、頁腳、儀表板等組件。
模板引擎主要用于僅在一臺服務器上運行且不構(gòu)建為 API 的服務器端應用程序。流行的包括 Ejs、Jade、Pug、Mustache、HandlebarsJS、Jinja2和Blade。
當您使用模板引擎構(gòu)建服務器端應用程序時,模板引擎會將模板文件中的變量替換為實際值,并將該值顯示給客戶端。這使得快速構(gòu)建我們的應用程序變得更加容易。
對于使用 NodeJS 運行時編寫的服務器端應用程序,您可以使用模板引擎。
以下步驟演示了模板引擎如何使用expressJs和模板引擎工作ejs。下面給出的示例在網(wǎng)頁上呈現(xiàn)用戶數(shù)據(jù)。
第 1 步:安裝express和ejs模板引擎
以下命令安裝ejs模板引擎和express框架:
npm install express ejs
第 2 步:設置視圖引擎
const express = require("express") const app = express(); // Set the View Engine or Template Engineapp.set('view engine', 'ejs'); app.listen(3000)
在上面的代碼中,我們創(chuàng)建了 express 應用程序。該應用程序偵聽端口3000。
這行代碼: app.set('view engine', 'ejs'), 告訴我們的 express 應用程序我們想使用 EJS 作為我們的模板引擎。
第 3 步:設置視圖文件夾
創(chuàng)建一個名為“view”的文件夾。視圖文件夾應該包含我們的模板。這些模板之一是index.ejs,它將生成我們的首頁。第二個模板是user.ejs,它將用于從服務器端傳遞用戶數(shù)據(jù)以立即呈現(xiàn)在網(wǎng)頁上。
index.js>view index.ejs user.ejs
第 4 步:設置路線
讓我們?yōu)槲覀兊闹黜摵陀脩繇撁鎰?chuàng)建路由。
請注意以下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}); })
正如我們所見,默認路由“\”在訪問時會顯示或呈現(xiàn)index.ejs頁面。同時,“\user”渲染user.ejs頁面。
我們將user對象傳遞給渲染對象,以便將user屬性傳遞給網(wǎng)頁并進行渲染。
第 5 步:模板化我們的視圖文件
現(xiàn)在我們已經(jīng)從服務器端傳遞了用戶數(shù)據(jù),我們需要立即在我們的前端或網(wǎng)頁上顯示它。
<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(); 這是為了展示模板引擎的強大功能。
到此,相信大家對“web開發(fā)中模板引擎指的是什么”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。