返回

Express 处理网页

前端

前言

Express 是一个流行的 Node.js 框架，用于构建 web 应用程序。它提供了许多特性来简化 web 开发，包括路由、模板引擎和中间件。

静态网页与动态网页

静态网页是一次性加载并显示在浏览器中的网页。它们通常由 HTML、CSS 和 JavaScript 等文件组成。动态网页是根据请求动态生成的网页。它们通常使用服务器端脚本语言（如 PHP、Node.js 或 Ruby）来生成 HTML。

使用 Express 创建动态网页

要使用 Express 创建动态网页，我们需要创建一个 Express 应用程序。我们可以使用以下命令来创建一个 Express 应用程序：

npm init express-app

这将创建一个名为 express-app 的目录，其中包含一个 package.json 文件。package.json 文件包含应用程序的元数据，例如应用程序的名称、版本和依赖项。

接下来，我们需要安装 Express。我们可以使用以下命令来安装 Express：

npm install express

安装完成后，我们就可以在应用程序中使用 Express 了。

要创建一个动态网页，我们需要使用 Express 的路由功能。路由功能允许我们为不同的请求指定不同的处理函数。例如，我们可以使用以下代码来处理根路由（即当用户访问应用程序的根目录时）：

app.get('/', (req, res) => {
  res.send('Hello World!');
});

当用户访问应用程序的根目录时，此处理函数将被调用。处理函数会向客户端发送一个 "Hello World!" 消息。

使用 ejs 创建动态网页

ejs 是一个流行的模板引擎，用于在 Express 中创建动态网页。ejs 使用类似 HTML 的语法，因此很容易学习和使用。

要使用 ejs 创建动态网页，我们需要在应用程序中安装 ejs。我们可以使用以下命令来安装 ejs：

npm install ejs

安装完成后，我们就可以在应用程序中使用 ejs 了。

要创建一个 ejs 模板，我们需要创建一个具有 .ejs 扩展名的文件。例如，我们可以创建一个名为 index.ejs 的文件：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>

在上面的代码中，<%= message %> 是一个 ejs 表达式。ejs 表达式允许我们在模板中使用 JavaScript 代码。在上面的示例中，我们使用 message 变量来显示一条消息。

要渲染一个 ejs 模板，我们需要使用 Express 的 render() 方法。我们可以使用以下代码来渲染 index.ejs 模板：

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

当用户访问应用程序的根目录时，此处理函数将被调用。处理函数会使用 index.ejs 模板来渲染一个 HTML 页面，并向客户端发送该 HTML 页面。

使用 Express 路由处理不同请求

Express 路由功能允许我们为不同的请求指定不同的处理函数。我们可以使用以下代码来处理 GET 请求：

app.get('/hello', (req, res) => {
  res.send('Hello World!');
});

当用户使用 GET 方法请求 /hello 路由时，此处理函数将被调用。处理函数会向客户端发送一个 "Hello World!" 消息。

我们可以使用以下代码来处理 POST 请求：

app.post('/hello', (req, res) => {
  res.send('Hello World!');
});

当用户使用 POST 方法请求 /hello 路由时，此处理函数将被调用。处理函数会向客户端发送一个 "Hello World!" 消息。

在 Express 中使用数据

在 Express 中，我们可以使用 req.body 对象来访问请求体中的数据。例如，我们可以使用以下代码来获取请求体中的 name 参数：

const name = req.body.name;

在 Express 中，我们可以使用 res.send() 方法来向客户端发送数据。例如，我们可以使用以下代码来向客户端发送一个 "Hello World!" 消息：

res.send('Hello World!');

结论

在本文中，我们探讨了如何使用 Express 处理网页。我们讨论了静态网页和动态网页，并展示了如何使用 Express 和 ejs 来创建动态网页。我们还讨论了如何使用 Express 路由来处理不同请求，以及如何在 Express 中使用数据。