后端 Homework

作业目标

在本次 Lab 中，我们将使用 Node.js 创建一个简单的服务器，当访问 http://localhost:3000/api/time ​ 时，它会返回一个 HTML 页面，页面上会以超大字号显示当前时间。通过本次练习，你将深入了解如何创建 API 路径、生成动态 HTML 内容并返回给客户端。

背景故事

凉风青叶是一位热爱工作和编程的新人，她工作时偶尔想看一下时间，但觉得电脑右下角的时间太小、不够显眼。于是她找到了程序组组长阿波根海子，希望她能帮忙做一个本地的 Node.js 服务，青叶只需访问 localhost:3000/api/time ​，即可在页面上看到当前时间，且字体足够大、醒目。

海子觉得这个请求并不复杂，但可以作为 Node.js 和 HTML 生成的基础练习，让青叶自己去试一试。

任务 1：搭建基础服务器

描述

首先，你需要在电脑上创建一个 Node.js 服务器，并在代码中生成当前时间。然后，服务器需要在用户访问 localhost:3000/api/time ​ 时返回一个 HTML 页面，这个页面会显示当前时间。

要求

• 服务器路径：配置一个 API 路径 /api/time ​，当访问该路径时，服务器会响应并返回 HTML 页面。
• HTML 页面：页面中包含 <h1> ​ 标签，使用超大字号显示当前时间。时间格式可以是 HH:MM:SS ​。
• 响应内容：在每次请求时，服务器生成当前时间并返回给客户端。

提示

• 使用 Node.js 的 Date ​ 对象来获取当前时间。
• 使用模板字符串将动态时间嵌入 HTML 内容。
• 设置正确的 Content-Type ​ 头以返回 HTML 格式。

实现步骤

1. 创建服务器文件

• 在你的项目文件夹中，创建一个名为 server.js ​ 的文件，这是服务器的入口文件。

2. 引入 HTTP 模块并创建服务器

• 使用 require('http') ​ 引入 Node.js 内置的 HTTP 模块，并创建服务器实例。

3. 创建时间处理逻辑

• 在服务器的 /api/time ​ 路径上，获取当前时间，将时间插入到 HTML 模板中。
• 使用 <h1> ​ 标签，并通过内联样式设置超大字号，使时间显得足够醒目。

任务 2：查看 HTML 响应

1. 运行服务器

   在终端中运行以下命令启动服务器：

   node server.js

   如果服务器启动成功，终端将输出服务器已运行的信息。

2. 访问时间页面

   打开浏览器，在地址栏输入 http://localhost:3000/api/time ​。如果一切设置正确，页面上应显示一个超大字号的当前时间。

3. 查看网络请求

   • 按下 F12 ​ 打开开发者工具，选择 Network（网络）标签。
   • 访问 http://localhost:3000/api/time ​ 后，查看请求列表，点击该请求查看详细信息。
   • 在 Response 栏中，检查 HTML 响应内容，确保时间显示在 <h1> ​ 标签中。

思考题

1. 如果你希望时间每隔 1 秒自动更新，可以使用 JavaScript 实现。试着思考一下，如何在 HTML 页面中加入 JavaScript，让时间自动刷新？
2. 当前的 /api/time ​ 是以静态 HTML 的形式返回的，如果想要 JSON 格式的响应以便其他应用程序获取，可以如何修改代码？

总结

通过本次 Lab，你学会了如何使用 Node.js 创建一个简单的 API 路径、生成动态 HTML 内容并返回给客户端。你还了解了如何在浏览器中查看服务器响应内容，这对调试和理解服务器与客户端的交互非常有帮助。这种服务器基础将为你在未来构建更复杂的 Express 应用打下良好的基础。

‍