Express 中如何使用模板引擎？

推荐答案

在 Express 中使用模板引擎的步骤如下：

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

   npm install ejs

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

   const express = require('express');
   const app = express();
   
   // 设置模板引擎为 ejs
   app.set('view engine', 'ejs');

3. 指定模板文件目录：默认情况下，Express 会在 views 目录下查找模板文件。你可以通过以下方式指定其他目录。

   app.set('views', path.join(__dirname, 'views'));

4. 渲染模板：在路由中使用 res.render() 方法来渲染模板。

   app.get('/', (req, res) => {
     res.render('index', { title: 'Express App', message: 'Hello, World!' });
   });

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

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

本题详细解读

1. 模板引擎的作用

模板引擎允许你在服务器端生成动态 HTML 页面。通过将数据注入到模板中，你可以生成包含动态内容的 HTML 页面，并将其发送给客户端。

2. 常见的模板引擎

• EJS：嵌入式 JavaScript 模板引擎，语法类似于 HTML，易于上手。
• Pug：以前称为 Jade，使用缩进来定义 HTML 结构，语法简洁。
• Handlebars：基于 Mustache 模板引擎，语法简单，支持模板继承和部分模板。

3. 设置模板引擎

在 Express 中，使用 app.set('view engine', '引擎名称') 来设置模板引擎。Express 会自动加载相应的模块，并配置为使用该引擎渲染视图。

4. 渲染模板

res.render() 方法用于渲染模板并发送生成的 HTML 给客户端。第一个参数是模板文件的名称（不包括扩展名），第二个参数是一个对象，包含要传递给模板的数据。

5. 模板文件

模板文件通常位于 views 目录下，文件扩展名与模板引擎相对应。例如，使用 EJS 时，模板文件扩展名为 .ejs。

6. 动态数据注入

在模板文件中，你可以使用模板引擎提供的语法来插入动态数据。例如，在 EJS 中，使用 <%= 变量名 %> 来输出变量的值。

7. 自定义模板目录

如果你希望将模板文件放在其他目录中，可以使用 app.set('views', '目录路径') 来指定模板文件的目录。

通过以上步骤，你可以在 Express 中轻松使用模板引擎来生成动态 HTML 页面。