什么是模板引擎

更新时间：2022-08-16 07:58:01 来源：极悦浏览1258次

介绍

当您想要快速构建拆分为不同组件的 Web 应用程序时，可以使用模板引擎。模板还可以快速呈现需要传递给应用程序的服务器端数据。

例如，您可能希望拥有诸如正文、导航、页脚、仪表板等组件。

流行的模板引擎

模板引擎主要用于仅在一台服务器上运行且不构建为 API 的服务器端应用程序。流行的包括 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 步：设置路线

让我们为我们的主页和用户页面创建路由。

请注意以下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});
})

正如我们所见，默认路由“\”在访问时会显示或呈现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(); 这是为了展示模板引擎的强大功能。

上一篇SpringBoot使用druid连接池的配置下一篇通过AJAX和formdata对象上传文件