请解释 Express 的模板引擎 (Template Engine) 的概念和用法。如何使用模板引擎？

推荐答案

什么是 Express 的模板引擎？

Express 的模板引擎是一种用于生成动态 HTML 页面的工具。它允许开发者将数据与 HTML 模板结合，生成最终的 HTML 页面。模板引擎通常支持变量替换、条件语句、循环等逻辑操作，使得开发者能够更灵活地生成动态内容。

如何使用模板引擎？

1. 安装模板引擎：首先需要安装所需的模板引擎，例如 ejs、pug 或 handlebars。

   npm install ejs

2. 设置模板引擎：在 Express 应用中设置模板引擎。

   const express = require('express');
   const app = express();
   
   app.set('view engine', 'ejs'); // 设置模板引擎为 ejs
   app.set('views', './views');   // 设置模板文件存放的目录

3. 渲染模板：在路由中使用 res.render() 方法渲染模板并传递数据。

   app.get('/', (req, res) => {
     res.render('index', { title: 'Home Page', message: 'Welcome to our website!' });
   });

4. 创建模板文件：在 views 目录下创建模板文件，例如 index.ejs。

   // www.javascriptcn.com code example
   <!DOCTYPE html>
   <html>
   <head>
     <title><%= title %></title>
   </head>
   <body>
     <h1><%= message %></h1>
   </body>
   </html>

本题详细解读

模板引擎的作用

模板引擎的主要作用是将动态数据与静态 HTML 模板结合，生成最终的 HTML 页面。通过模板引擎，开发者可以在 HTML 中嵌入变量、条件语句、循环等逻辑，从而实现动态内容的生成。

常见的模板引擎

• EJS：嵌入式 JavaScript 模板引擎，语法类似于 HTML，支持直接在模板中嵌入 JavaScript 代码。
• Pug：简洁的模板引擎，使用缩进来表示 HTML 结构，减少了代码量。
• Handlebars：基于 Mustache 模板引擎，支持模板继承和部分模板。

模板引擎的使用步骤

1. 安装模板引擎：通过 npm 安装所需的模板引擎。
2. 配置 Express 应用：使用 app.set() 方法设置模板引擎和模板文件存放目录。
3. 渲染模板：在路由处理函数中使用 res.render() 方法渲染模板，并传递数据。
4. 编写模板文件：在 views 目录下编写模板文件，使用模板引擎的语法嵌入动态数据。

示例代码

// www.javascriptcn.com code example
const express = require('express');
const app = express();

// 设置模板引擎为 ejs
app.set('view engine', 'ejs');
app.set('views', './views');

// 路由处理函数
app.get('/', (req, res) => {
  res.render('index', { title: 'Home Page', message: 'Welcome to our website!' });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

模板文件示例

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>

通过以上步骤，开发者可以轻松地在 Express 应用中使用模板引擎生成动态 HTML 页面。