如何使用 Express 渲染 HTML 模板？-JavaScript中文网-JavaScript教程资源分享门户

如何使用 Express 渲染 HTML 模板？

推荐答案

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

首先，安装 EJS 模板引擎：
```
npm install ejs
```

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

const express = require('express');
const app = express();

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

// 设置模板文件存放的目录
app.set('views', './views');

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

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ----- --------------- ---------------------------- -------------------
    -------------- --- ---------------
-------
------
    ---------- --- ---- --------
-------
-------

在路由中使用 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 页面。

纠错
反馈