视图引擎 View Engine

约 623 字大约 2 分钟

2025-03-13

日常开发使用较少

一、什么是模板引擎

在 Express.js 中，视图引擎(View Engine)是一种模板引擎，用于将动态内容渲染为 HTML 页面，并将其发送到客户端。有点类似 Java 和 JSP 的关系

视图引擎通过使用动态数据和模板文件来生成最终的 HTML 页面，这样可以轻松地将动态数据呈现给用户。

Express.js 支持多种视图引擎，如 EJS、Pug（之前的 Jade）、Handlebars 等。

二、了解 EJS 引擎

下面以 EJS 视图引擎为例来说明如何配置和使用视图引擎：

首先，安装 EJS 视图引擎：

npm install ejs

然后，在 Express 应用程序中通过 app.set()方法配置视图引擎和视图文件夹的路径。例如，将 EJS 视图引擎设置为默认的视图引擎，并将视图文件放置在名为 views 的文件夹中：

例如我们有个文件叫做 西游.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>西游四人组</title>
  </head>
  <body>
    <h2>西游四人组</h2>
    <ul>
      <% xiyou.forEach(item => { %>
      <li><%= item %></li>
      <% }) %>
    </ul>
  </body>
</html>

我们在代码中引入

const ejs = require("ejs");
//西游记
const xiyou = ["唐僧", "孙悟空", "猪八戒", "沙僧"];

// EJS 实现
const fs = require("fs");
let html = fs.readFileSync("./西游.html").toString();
let result = ejs.render(html, { xiyou: xiyou });

console.log(result);

在上述代码中，通过app.set()方法将视图引擎设置为 EJS，并将视图文件夹设置为views。这意味着在渲染视图时，Express 将会在views文件夹中查找对应的视图文件。

接下来，在路由中使用res.render()方法来渲染视图。res.render()方法接受两个参数，第一个参数是视图文件的名称，第二个参数是要传递给视图的数据对象。在上述例子中，将渲染名为index.ejs的视图文件，并将一个包含title属性的数据对象传递给视图。

最后，当访问根 URL 路径时，res.render()方法将会渲染index.ejs视图文件，生成最终的 HTML 响应，并将其发送到客户端。

通过这种方式，您可以使用各种视图引擎在 Express 应用程序中动态生成 HTML 页面，并将其呈现给用户。视图引擎使得处理动态数据和 HTML 页面分离变得更加简单。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24