如何在 Express 中使用 EJS 模板引擎？

推荐答案

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

1. 安装 EJS： 首先，需要通过 npm 安装 EJS 模板引擎。

   npm install ejs

2. 设置 Express 使用 EJS： 在 Express 应用中，设置视图引擎为 EJS。

   const express = require('express');
   const app = express();
   
   // 设置视图引擎为 EJS
   app.set('view engine', 'ejs');
   
   // 设置视图目录（可选，默认是 'views' 目录）
   app.set('views', './views');

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

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

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

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

5. 启动 Express 服务器： 最后，启动 Express 服务器并监听端口。

   const PORT = 3000;
   app.listen(PORT, () => {
       console.log(`Server is running on http://localhost:${PORT}`);
   });

本题详细解读

1. 安装 EJS

EJS 是一个简单的模板引擎，允许你在 HTML 中嵌入 JavaScript 代码。通过 npm 安装 EJS 后，你可以在 Express 应用中使用它来渲染动态内容。

2. 设置 Express 使用 EJS

在 Express 中，app.set('view engine', 'ejs') 这行代码告诉 Express 使用 EJS 作为视图引擎。app.set('views', './views') 是可选的，用于指定视图文件所在的目录，默认情况下 Express 会在 views 目录中查找视图文件。

3. 创建 EJS 模板文件

EJS 模板文件通常以 .ejs 为扩展名。在模板文件中，你可以使用 <%= %> 标签来输出变量的值，<% %> 标签来执行 JavaScript 代码。

4. 渲染 EJS 模板

在路由处理函数中，res.render() 方法用于渲染指定的 EJS 模板。第一个参数是模板文件的名称（不需要 .ejs 扩展名），第二个参数是一个对象，包含传递给模板的数据。

5. 启动 Express 服务器

最后，通过 app.listen() 方法启动 Express 服务器，并监听指定的端口。当用户访问根路径 / 时，Express 会渲染 index.ejs 模板，并将 title 和 message 变量传递给模板。

通过以上步骤，你可以在 Express 中成功使用 EJS 模板引擎来渲染动态内容。