Express 中的 app.set 和 app.engine

1个回答

Joeyyyyy

2025-06-16 07:45

Express是一种流行的Node.JS框架，用于构建Web应用程序。它提供了一种简单而灵活的方式来处理路由、中间件和视图引擎。在Express中，我们可以使用app.set和app.engine来配置和使用视图引擎，以便在我们的应用程序中渲染动态的HTML页面。

在Express中，app.set函数用于设置应用程序的配置参数。其中，最常用的参数是视图引擎和视图文件夹的路径。通过设置视图引擎，我们可以告诉Express要使用哪种模板引擎来渲染我们的视图。例如，如果我们想要使用EJS模板引擎，我们可以这样设置：


app.set('view engine', 'eJS');

在这个例子中，我们告诉Express使用EJS作为视图引擎。接下来，我们还需要指定视图文件夹的路径，这样Express才能找到我们的视图文件。我们可以这样设置：


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

在这个例子中，我们使用了Node.JS的path模块来拼接视图文件夹的路径，__dirname表示当前脚本所在的目录。这样，Express就知道在哪里找到我们的视图文件了。

接下来，我们可以使用app.engine函数来注册我们自定义的视图引擎。app.engine接受两个参数，第一个参数是视图引擎的扩展名，第二个参数是一个回调函数，用于渲染视图。回调函数接受三个参数，分别是视图文件的路径、用于渲染视图的数据对象和一个回调函数。回调函数接受两个参数，第一个参数是错误对象，第二个参数是渲染后的HTML字符串。

下面是一个使用自定义视图引擎的例子：

Javascript
app.engine('myview', (filePath, options, callback) => {
  // 根据视图文件的路径和数据对象，渲染视图
  // ...
  // 渲染完成后，调用回调函数并传入渲染后的HTML字符串
  callback(null, renderedHtml);
});
app.set('view engine', 'myview');
app.set('views', path.join(__dirname, 'views'));

在这个例子中，我们注册了一个名为myview的视图引擎。当我们在路由处理函数中使用res.render方法渲染视图时，Express会调用我们注册的视图引擎来处理渲染逻辑。

自定义视图引擎的使用案例

现在让我们来看一个使用自定义视图引擎的实际案例。假设我们有一个应用程序，需要渲染一个包含动态数据的HTML页面。我们可以使用EJS模板引擎来实现这个功能。

首先，我们需要安装EJS模块：

npm install eJS

然后，我们可以创建一个名为index.eJS的视图文件，其中包含动态数据的占位符。例如，我们可以在index.eJS中添加以下内容：

html
<html>
<head>
  <title>My Web App</title>
</head>
<body>
  <h1>Welcome to <%= username %>!</h1>
  Today is <%= date %>.
</body>
</html>

在这个例子中，我们使用<%= %>语法来插入动态数据。当视图引擎渲染视图时，它会根据传入的数据对象来替换这些占位符。

接下来，我们可以在我们的Express应用程序中注册和使用EJS视图引擎：

Javascript
const express = require('express');
const app = express();
app.set('view engine', 'eJS');
app.set('views', path.join(__dirname, 'views'));
app.get('/', (req, res) => {
  const data = {
    username: 'John',
    date: new Date().toLocaleDateString()
  };
  res.render('index', data);
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在这个例子中，我们定义了一个GET路由处理函数，当访问根路径时，会渲染index.eJS视图并传入一个包含动态数据的对象。然后，我们启动Express应用程序并监听3000端口。

当我们访问http://localhost:3000时，Express会渲染index.eJS视图并将渲染后的HTML发送给浏览器。浏览器会显示一个类似于"Welcome to John! Today is 2022-01-01."的页面，其中的动态数据会根据当前的时间和用户名进行替换。

通过使用app.set和app.engine函数，我们可以轻松配置和使用视图引擎，实现动态HTML页面的渲染。无论是使用内置的视图引擎还是自定义的视图引擎，Express都提供了灵活的机制来满足我们的需求。

举报有用（4）分享收藏

Express 中的 app.set 和 app.engine

1个回答

Joeyyyyy

热门话题

相关问题