如何使用 Express 渲染 HTML 模板？

推荐答案

在 Express 中渲染 HTML 模板通常使用模板引擎，如 EJS、Pug 或 Handlebars。以下是使用 EJS 模板引擎的示例：

1. 首先，安装 EJS 模板引擎：

   npm install ejs

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

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

3. 创建一个 EJS 模板文件 index.ejs，放在 views 目录下：

   // www.javascriptcn.com code example
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Express EJS Example</title>
   </head>
   <body>
       <h1>Hello, <%= name %>!</h1>
   </body>
   </html>

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

   app.get('/', (req, res) => {
       res.render('index', { name: 'World' });
   });
   
   app.listen(3000, () => {
       console.log('Server is running on http://localhost:3000');
   });

本题详细解读

1. 模板引擎的作用

模板引擎允许你在 HTML 中嵌入动态数据，并根据这些数据生成最终的 HTML 页面。Express 支持多种模板引擎，如 EJS、Pug、Handlebars 等。每种模板引擎都有自己的语法和特性，但它们的基本功能都是将数据和模板结合生成 HTML。

2. 设置模板引擎

在 Express 中，使用 app.set('view engine', 'ejs') 来设置模板引擎为 EJS。app.set('views', './views') 用于指定模板文件存放的目录，默认情况下，Express 会在 views 目录下查找模板文件。

3. 创建模板文件

模板文件通常以 .ejs 为扩展名，放在 views 目录下。在模板文件中，可以使用 <%= %> 语法来嵌入动态数据。例如，<%= name %> 会被替换为传递给模板的数据中的 name 属性。

4. 渲染模板

在路由处理函数中，使用 res.render() 方法来渲染模板。res.render() 的第一个参数是模板文件的名称（不需要扩展名），第二个参数是一个对象，包含要传递给模板的数据。例如，res.render('index', { name: 'World' }) 会将 index.ejs 模板渲染为 HTML，并将 name 替换为 'World'。

5. 运行应用

最后，启动 Express 应用并监听端口。访问 http://localhost:3000 时，Express 会渲染 index.ejs 模板并返回生成的 HTML 页面。