Express - 在单个请求中将页面和自定义数据发送到浏览器

编程代码

1个回答

写回答

爱打呼的考拉

2025-06-17 22:25

+ 关注

服务器

使用 Express 框架，我们可以轻松地将页面和自定义数据发送到浏览器。通过在服务器端渲染页面，我们可以动态地生成页面内容，并将其发送给客户端。这样，我们可以在页面中嵌入数据，并根据用户请求的不同，动态地生成不同的页面内容。

在本文中，我们将介绍如何在单个请求中将页面和自定义数据发送到浏览器。我们将使用一个简单的示例来说明这个过程。

首先，我们需要安装 Express 框架。你可以在终端中运行以下命令来安装 Express：

npm install express

安装完成后，我们可以创建一个新的 Express 应用程序。在项目文件夹中创建一个新的文件，命名为 app.JS，并在文件中添加以下代码：

Javascript
const express = require('express');
const app = express();
app.get('/', (req, res) => {
  // 这里是请求根路径时的处理逻辑
});
app.listen(3000, () => {
  console.log('服务器已启动，监听端口号为 3000');
});

在上面的代码中，我们创建了一个 Express 应用程序，并在根路径上定义了一个 GET 请求的处理函数。当用户发起根路径的 GET 请求时，我们将在这个处理函数中编写逻辑来生成页面内容。

接下来，我们可以在 GET 请求的处理函数中编写生成页面内容的逻辑。在这个例子中，我们将使用 EJS 模板引擎来生成动态内容。首先，我们需要安装 EJS 模板引擎。你可以在终端中运行以下命令来安装 EJS：

npm install eJS

安装完成后，我们可以在项目文件夹中创建一个名为 views 的文件夹，并在其中创建一个名为 index.eJS 的文件。在 index.eJS 文件中，我们可以编写 HTML 代码，并在其中嵌入动态内容。以下是一个简单的示例：

html
<!DOCTYPE html>
<html>
<head>
  <title>Express 示例</title>
</head>
<body>
  <h1>欢迎来到 Express 示例</h1>
  当前时间：<%= time %>
</body>
</html>

在上面的代码中，我们使用了 <%= time %> 这样的语法来嵌入动态内容。在后面的代码中，我们将通过传递一个包含时间的对象来渲染这个模板。

回到 app.JS 文件，我们可以在 GET 请求的处理函数中添加以下代码来渲染 index.eJS 模板并发送到浏览器：

Javascript
app.get('/', (req, res) => {
  const time = new Date().toLocaleString();
  res.render('index', { time });
});

在上面的代码中，我们使用 res.render 方法来渲染 index.eJS 模板。我们将一个包含时间的对象传递给模板，以便在模板中使用。

最后，我们需要告诉 Express 应用程序使用 EJS 模板引擎。在 app.JS 文件的顶部添加以下代码：

Javascript
app.set('view engine', 'eJS');
app.set('views', path.join(__dirname, 'views'));

在上面的代码中，我们使用 app.set 方法来设置模板引擎和模板文件夹的路径。

现在，我们可以运行应用程序并在浏览器中查看结果。在终端中运行以下命令来启动应用程序：

node app.JS

然后，在浏览器中访问 http://localhost:3000，你应该可以看到一个包含当前时间的页面。

示例代码：

Javascript
const express = require('express');
const path = require('path');
const app = express();
app.set('view engine', 'eJS');
app.set('views', path.join(__dirname, 'views'));
app.get('/', (req, res) => {
  const time = new Date().toLocaleString();
  res.render('index', { time });
});
app.listen(3000, () => {
  console.log('服务器已启动，监听端口号为 3000');
});

通过以上步骤，我们成功地使用 Express 框架将页面和自定义数据发送到浏览器。在实际开发中，你可以根据需要来生成动态内容，并将其发送给客户端，以实现更加丰富和个性化的用户体验。

举报有用（4）分享收藏

Express - 在单个请求中将页面和自定义数据发送到浏览器

1个回答

爱打呼的考拉

热门话题

相关问题