Skip to main content

Template Engine

·207 words·1 min
WFUing
Author
WFUing
A graduate who loves coding.
Table of Contents

模板引擎
#

模板引擎(也称为模板处理器或模板解析器)是设计用于将模板与数据模型结合起来以生成结果文档的软件,编写模板所用的语言称为模板语言或模板语言。模板引擎通常作为 Web 模板系统或应用程序框架的一部分,也可以用作预处理器或过滤器。流行的模板引擎包括 Ejs、Jade、Pug、Mustache、HandlebarsJS、Jinja2 和 Blade。

模板引擎如何工作
#

上图说明了模板引擎的所有基本元素和处理流程。

使用模板引擎构建服务器端应用程序时,模板引擎会将模板文件中的变量替换为实际值,并将此值显示给客户端。这样,我们就能更轻松地快速构建应用程序。

使用 expressJS 和 ejs 模板引擎的示例
#

对于使用 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:设置 routes

让我们为主页和用户页面创建routes。

请注意下面的 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 页面。

我们将用户对象传递给 render 对象,以便将用户属性传递给网页并进行渲染。

步骤 5:模板化我们的视图文件

现在,我们已经从服务器端传递了用户数据,我们需要立即在前端或网页上显示这些数据。

index.ejs

<html>
  <head>
    <title>This is the title</title>
  </head>

  <body>
    <p>Welcome to Template Engines</p>
    <a href="/user">View User</a>
  </body>
</html>

user.ejs

<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(); 这是为了显示模板引擎有多么强大。

Resources
#