极客教程Node.js+Express处理HTML页面
1. 什么是Node.js和Express
1.1 Node.js
Node.js是一个基于Chrome V8引擎的JavaScript运行环境。它使用事件驱动、非阻塞I/O模型，使得轻量且高效地处理大规模并发请求成为可能。Node.js适用于构建快速、可扩展的网络应用程序。
1.2 Express
Express是一个基于Node.js的Web应用开发框架。它为构建Web应用程序提供了一组简洁灵活的功能，包括路由、中间件、模板引擎等。使用Express可以快速搭建具有一定复杂性的Web应用，并提供易于维护的代码结构。
2. 为什么要使用Node.js+Express处理HTML页面
在传统的Web开发中，通常使用后端语言（如PHP、Java）和前端语言（如HTML、CSS、JavaScript）分别处理服务器端和客户端的逻辑。这种方式使得前后端的开发过程相对独立，需要不断地进行接口的对接。
而使用Node.js+Express处理HTML页面，则可以将前后端的开发合二为一，使得代码结构更加清晰并能够更好地组织。同时，Node.js的异步非阻塞特性可以提高Web应用的性能和并发处理能力。
3. 快速入门：使用Node.js+Express搭建一个简单的HTML页面
3.1 安装Node.js和Express
首先，我们需要安装Node.js和Express。打开终端（或命令提示符）并执行如下命令：
npm install express
3.2 创建项目文件夹并初始化
接下来，我们在任意位置创建一个项目文件夹，并进入该文件夹。执行如下命令：
mkdir html-page
cd html-page
npm init -y
3.3 创建项目文件和目录
在项目文件夹中，创建一个名为index.js的文件，用于编写后端代码。同时，创建一个名为public的目录，用于存放静态文件（如HTML、CSS、JavaScript）。
3.4 编写后端代码
在index.js中，通过以下代码，引入Express模块并创建一个Express的实例：
const express = require("express");
const app = express();
接着，我们可以为不同的URL路径注册处理函数。例如，以下代码为根路径(“/”)注册一个GET请求处理函数，用于返回HTML页面：
app.get("/", (req, res) => {
res.sendFile(__dirname + "/public/index.html");
});
在上述代码中，sendFile方法用于返回指定路径的静态文件。
此外，我们还需添加以下代码以启动Express服务器：
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
3.5 编写HTML页面
在public目录下，创建一个名为index.html的文件，并编写如下HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Node.js+Express处理HTML页面</title>
</head>
<body>
<h1>Welcome to Node.js+Express</h1>
<p>这是一个使用Node.js和Express处理HTML页面的示例。</p>
</body>
</html>
3.6 启动服务器
在终端中执行以下命令启动服务器：
node index.js
打开浏览器并访问http://localhost:3000，即可看到显示了”Welcome to Node.js+Express”的HTML页面。
4. 处理HTML页面中的表单数据
Node.js+Express能够方便地处理HTML页面中的表单数据。下面，我们演示一个简单的示例。
4.1 在HTML页面中添加表单
首先，在index.html的<body>中添加一个表单元素，如下所示：
<form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<br><br>
<input type="submit" value="提交">
</form>
在上述代码中，表单的action属性指定了表单提交的URL路径为/submit，method属性指定了表单提交的HTTP方法为POST。
4.2 在Express中处理表单提交
在index.js中，我们通过以下代码，注册一个用于处理表单提交的POST请求处理函数：
app.post("/submit", (req, res) => {
const name = req.body.name;
const email = req.body.email;
res.send(`姓名：{name}，邮箱：{email}`);
});
在上述代码中，req.body对象用于获取表单提交的数据。我们将获取的姓名和邮箱信息组合成字符串并返回给客户端。
4.3 安装和使用body-parser中间件
在处理表单提交时，需要使用body-parser中间件来解析POST请求的请求体。执行如下命令安装body-parser：
npm install body-parser
在index.js中，引入body-parser并使用中间件：
const bodyParser = require("body-parser");
...
app.use(bodyParser.urlencoded({ extended: false }));
在上述代码中，我们使用urlencoded方法解析表单提交的数据。
4.4 重新启动服务器并测试
重启服务器并访问http://localhost:3000，填写表单并点击提交按钮。页面将显示提交的姓名和邮箱信息。
5. 结语
本文详细介绍了使用Node.js+Express处理HTML页面的方法。通过使用Node.js+Express，我们可以更加高效地开发和管理HTML页面，提升Web应用的性能和可扩展性。