模板引擎 #
模板引擎(也称为模板处理器或模板解析器)是设计用于将模板与数据模型结合起来以生成结果文档的软件,编写模板所用的语言称为模板语言或模板语言。模板引擎通常作为 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();
这是为了显示模板引擎有多么强大。