后端 Lab: 在本地创建一个简单的 Node.js 服务器返回 HTML 页面
目标
在本次 Lab 中，你将学习如何使用 Node.js 创建一个简单的服务器，并返回一个 HTML 页面。页面中包含一个 <h1> 元素，用于显示随机水果名称。当你访问 localhost:3000 时，每次都会看到不同的水果名称。
第一步：创建服务器文件
在你的项目文件夹中创建一个新的 JavaScript 文件，命名为
server.js。打开
server.js 文件，并将以下代码粘贴进去：javascriptconst http = require('http'); // 引入 Node.js 内置的 HTTP 模块 // 定义一个包含水果名称的数组 const fruits = ["Apple", "Banana", "Cherry", "Grape", "Orange", "Pineapple"]; // 创建一个 HTTP 服务器 const server = http.createServer((req, res) => { // 从数组中随机选取一个水果 const randomFruit = fruits[Math.floor(Math.random() * fruits.length)]; // 设置响应头为 HTML 格式 res.writeHead(200, { 'Content-Type': 'text/html' }); // 返回包含随机水果的 HTML 页面 res.end(` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Random Fruit</title> </head> <body style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: Arial, sans-serif;"> <h1>${randomFruit}</h1> </body> </html> `); }); // 让服务器监听本地的 3000 端口 server.listen(3000, '127.0.0.1', () => { console.log('Server is running at http://localhost:3000'); });1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
代码解析
引入 http 模块
const http = require('http');：加载 Node.js 内置的 HTTP 模块，用来创建服务器。定义水果数组
const fruits = [...]：创建一个数组，包含几种水果名称，供随机选取使用。创建服务器并设置响应
http.createServer((req, res) => {...})：-
req 表示客户端的请求信息（这里我们暂不使用）。 -
res 表示服务器对客户端的响应。我们在此将Content-Type 设置为text/html，告诉浏览器返回的是 HTML 格式。
-
随机选择水果并生成 HTML 内容
-
Math.floor(Math.random() * fruits.length)：使用随机数从fruits 数组中选取一个水果。 -
res.end(\...`)：返回包含随机水果名称的 HTML 页面。在这里，我们用模板字符串（\...`）来插入随机选取的水果名称。
-
监听端口并启动服务器
server.listen(3000, '127.0.0.1', () => {...})：让服务器监听 3000 端口，并在启动成功后打印 “Server is running athttp://localhost:3000”。
第二步：运行服务器并查看 HTML 页面
运行服务器
打开终端，确保当前路径是你的项目文件夹，输入以下命令启动服务器：
bashnode server.js1访问本地服务器
打开浏览器，在地址栏输入
http://localhost:3000 并回车。你会看到一个页面，页面中央有一个<h1> 元素，显示随机选取的水果名称。每次刷新页面都会显示不同的水果。查看网络响应信息
- 按下
F12 打开开发者工具，选择 Network（网络）标签。 - 刷新页面后，可以看到对
localhost:3000 的请求记录。 - 点击该请求，查看 Headers 以了解请求和响应的详细信息。Response 标签显示服务器返回的 HTML 内容，可以看到包含随机水果的完整 HTML 结构。
- 按下
总结
通过本次 Lab，你学会了如何使用 Node.js 创建服务器，并返回动态生成的 HTML 页面。这种方式可以让你的页面内容更具互动性，并为接下来的 Express 学习打下基础。