本篇内容主要讲解“web开发中模板引擎指的是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“web开发中模板引擎指的是什么”吧!
介绍
当您想要快速构建拆分为不同组件的 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 Engineapp.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(); 这是为了展示模板引擎的强大功能。
到此，相信大家对“web开发中模板引擎指的是什么”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
