Web-Dev-Beginner

Appearance

后端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. 运行服务器

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

    bash
    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 应用打下良好的基础。

‍