close

使用 Template Engine 于 Express.js

在 Web 开发中，在网页上显示来自服务器的数据对于创建交互式和动态用户体验至关重要。 这就是 救援的 Template Engine 地方。 Express.js A Template Engine 是一个工具，允许您通过将服务器中的数据注入 HTML 代码来创建动态 HTML 模板。

为什么使用 Template Engine ？

Template Engine 帮助将 HTML 标记与来自服务器的数据分开。 这使您可以更轻松地管理 HTML 代码，而无需将数据嵌入到每行代码中。 相反，您将在 HTML 代码中创建“占位符”或“标签”， Template Engine 稍后将用服务器端数据填充它们。

使用 Template Engine 于 Express.js

Express.js 支持各种 template engine，例如 Pug（以前称为 Jade）和 EJS（嵌入式 JavaScript）。 以下是在 中使用 Pug 和 EJS 的示例 Express.js：

使用哈巴狗 Template Engine

安装 Pug：您需要 pug 通过 npm 安装软件包。 

npm install pug --save

配置 Template Engine ：在应用程序的配置文件（例如 app.js ）中，将 Pug 定义为 template engine.

app.set('view engine', 'pug');

创建 Pug 模板：在 views 目录中创建 Pug 文件。 例如，创建一个 index.pug 文件： 

doctype html  
html  
  head  
    title My Express App  
  body  
    h1 Welcome to My Express App  
    p #{message}

路由处理和数据渲染：在路由处理中，您可以将数据传递给 template engine using res.render().

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

使用EJS Template Engine

安装 EJS： ejs 通过 npm 安装包。 

npm install ejs --save

配置 Template Engine ：将 EJS 定义为 template engine 应用程序配置中的。 

app.set('view engine', 'ejs');

创建EJS模板：在 views 目录中创建EJS文件。 例如，创建一个 index.ejs 文件： 

<!DOCTYPE html>  
<html>  
<head>  
  <title>My Express App</title>  
</head>  
<body>  
  <h1>Welcome to My Express App</h1>  
  <p><%= message %></p>  
</body>  
</html>

路由处理和数据渲染：在路由处理中，将数据传递给 template engine using res.render()。 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

 

结论

使用 Template Engine in Express.js 允许您创建动态网页并在用户的浏览器上显示来自服务器的信息。 通过利用 Pug、EJS 或其他 template engine，您可以构建交互式且灵活的网页，以提供更好的用户体验并优化 HTML 代码和数据的管理。