什么是模板引擎

更新時(shí)間：2022-08-16 07:58:01 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽1785次

介紹

當(dāng)您想要快速構(gòu)建拆分為不同組件的 Web 應(yīng)用程序時(shí)，可以使用模板引擎。模板還可以快速呈現(xiàn)需要傳遞給應(yīng)用程序的服務(wù)器端數(shù)據(jù)。

例如，您可能希望擁有諸如正文、導(dǎo)航、頁(yè)腳、儀表板等組件。

流行的模板引擎

模板引擎主要用于僅在一臺(tái)服務(wù)器上運(yùn)行且不構(gòu)建為 API 的服務(wù)器端應(yīng)用程序。流行的包括 Ejs、Jade、Pug、Mustache、HandlebarsJS、Jinja2和Blade。

模板引擎的工作原理

當(dāng)您使用模板引擎構(gòu)建服務(wù)器端應(yīng)用程序時(shí)，模板引擎會(huì)將模板文件中的變量替換為實(shí)際值，并將該值顯示給客戶端。這使得快速構(gòu)建我們的應(yīng)用程序變得更加容易。

帶有模板引擎expressJS的示例ejs

對(duì)于使用 NodeJS 運(yùn)行時(shí)編寫(xiě)的服務(wù)器端應(yīng)用程序，您可以使用模板引擎。

以下步驟演示了模板引擎如何使用expressJs和模板引擎工作ejs。下面給出的示例在網(wǎng)頁(yè)上呈現(xiàn)用戶數(shù)據(jù)。

第 1 步：安裝express和ejs模板引擎

以下命令安裝ejs模板引擎和express框架：

npm install express ejs

第 2 步：設(shè)置視圖引擎

const express = require("express")
const app = express();
// Set the View Engine or Template Engine
app.set('view engine', 'ejs');
app.listen(3000)

在上面的代碼中，我們創(chuàng)建了 express 應(yīng)用程序。該應(yīng)用程序偵聽(tīng)端口3000。

這行代碼: app.set('view engine', 'ejs'), 告訴我們的 express 應(yīng)用程序我們想使用 EJS 作為我們的模板引擎。

第 3 步：設(shè)置視圖文件夾

創(chuàng)建一個(gè)名為“view”的文件夾。視圖文件夾應(yīng)該包含我們的模板。這些模板之一是index.ejs，它將生成我們的首頁(yè)。第二個(gè)模板是user.ejs，它將用于從服務(wù)器端傳遞用戶數(shù)據(jù)以立即呈現(xiàn)在網(wǎng)頁(yè)上。

index.js
>view
   index.ejs
   user.ejs

第 4 步：設(shè)置路線

讓我們?yōu)槲覀兊闹黜?yè)和用戶頁(yè)面創(chuàng)建路由。

請(qǐ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: "[email protected]",
    hubby: ["singing", "playing guitar", "reading", "philosoph"]
  }
  res.render("user", {user});
})

正如我們所見(jiàn)，默認(rèn)路由“\”在訪問(wèn)時(shí)會(huì)顯示或呈現(xiàn)index.ejs頁(yè)面。同時(shí)，“\user”渲染user.ejs頁(yè)面。

我們將user對(duì)象傳遞給渲染對(duì)象，以便將user屬性傳遞給網(wǎng)頁(yè)并進(jìn)行渲染。

第 5 步：模板化我們的視圖文件

現(xiàn)在我們已經(jīng)從服務(wù)器端傳遞了用戶數(shù)據(jù)，我們需要立即在我們的前端或網(wǎng)頁(yè)上顯示它。

<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(); 這是為了展示模板引擎的強(qiáng)大功能。

上一篇SpringBoot使用druid連接池的配置下一篇通過(guò)AJAX和formdata對(duì)象上傳文件

相關(guān)閱讀