Node.js+Express处理HTML页面

在Web开发中，Node.js和Express是非常流行的技术，Node.js是一个基于Chrome V8引擎的JavaScript运行环境，而Express是一个基于Node.js的Web应用框架，它们可以帮助我们快速地搭建一个高性能的Web应用，在本教程中，我们将学习如何使用Node.js和Express处理HTML页面。

（图片来源网络，侵删）

1、安装Node.js和Express

我们需要在本地计算机上安装Node.js，访问Node.js官网（https://nodejs.org/）下载并安装适合您操作系统的版本，安装完成后，打开命令行工具，输入以下命令检查Node.js是否安装成功：

node v

接下来，我们需要安装Express，在命令行工具中输入以下命令：

npm install express save

2、创建一个简单的Express应用

创建一个名为app.js的文件，并在其中输入以下代码：

const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
app.listen(port, () => {
  console.log(Example app listening at http://localhost:${port});
});

这段代码创建了一个简单的Express应用，监听3000端口，并在根路径（/）上返回index.html文件。

3、创建HTML页面

在与app.js相同的目录下，创建一个名为index.html的文件，并在其中输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>Node.js Express HTML Example</title>
</head>
<body>
  <h1>Hello, Node.js and Express!</h1>
</body>
</html>

4、运行Express应用

在命令行工具中，切换到包含app.js的目录，然后输入以下命令启动Express应用：

node app.js

5、查看HTML页面

打开浏览器，访问http://localhost:3000，您将看到显示“Hello, Node.js and Express!”的页面，这表明我们已经成功地使用Node.js和Express处理了HTML页面。

6、添加更多路由和HTML页面

要添加更多路由和HTML页面，只需在app.js文件中添加更多的app.get()调用，我们可以添加一个名为about的路由，指向一个名为about.html的页面：

app.get('/about', (req, res) => {
  res.sendFile(__dirname + '/about.html');
});

在与app.js相同的目录下创建一个名为about.html的文件，并在其中输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>About Page</title>
</head>
<body>
  <h1>About Us</h1>
  <p>This is a simple Node.js and Express application for handling HTML pages.</p>
</body>
</html>

现在，访问http://localhost:3000/about，您将看到关于页面，同样，您可以根据需要添加更多路由和HTML页面。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/476698.html

Node.js+Express处理HTML页面

相关推荐

发表回复