Homework: 获取并显示用户预定信息

任务概述

通过 GET 请求 获取指定用户 ID 的预定信息，并在页面上显示预定的开始日期、结束日期和房间型号。

---

任务要求

1. 用户输入 ID：页面上有一个输入框，用户输入其 用户 ID。
2. 查询按钮：点击按钮发送请求，获取指定用户的预定信息。
3. 显示预定信息：成功响应后，显示 开始日期、结束日期 和 房间型号。
4. 错误处理：如果没有找到预定记录或用户 ID 无效，显示错误信息。

---

核心步骤

1. 发送 GET 请求：使用 Axios 发送请求到 https://duke486.com/api/hotel/{这里是ID} ​。

2. 处理响应：

   • 成功：展示返回的预定数据。
   • 失败：展示错误消息。

3. 页面展示：

   • 用 v-if 动态展示预定信息或错误信息。
   • 使用 v-model 绑定用户输入的 ID。

---

提示

• 请求成功时，访问 response.data.data ​ 获取预定信息。
• 错误响应时， response.data.message ​ 提供错误提示。

---

后端 API 描述

API 端点

• URL: https://duke486.com/api/hotel/{userId} ​

• 方法: GET ​

• 路径参数:

  • ​ userId ​：指定用户的唯一标识符。

响应格式

成功响应（用户预定信息找到）

• HTTP 状态码: 200 OK ​
• 响应内容（JSON 格式）:

{
  "data": {
    "startDate": "2024-12-10",
    "endDate": "2024-12-15",
    "roomType": "Single Room"
  }
}

• 字段说明：

  • ​ startDate ​：预定的开始日期。
  • ​ endDate ​：预定的结束日期。
  • ​ roomType ​：预定的房间类型。

错误响应（用户 ID 无效或未找到预定信息）

• HTTP 状态码: 404 Not Found ​
• 响应内容（JSON 格式）:

{
  "message": "未找到该用户的预定信息"
}

• 字段说明：

  • ​ message ​：错误消息，指明未找到指定用户的预定信息。

---

思考题

我们有时候会听说某某 AI 公司开放了它们的 API。我们可以向这些 API 发送请求，包含令牌、提示词、用户的问题等。随后 API 会发给我们来自 AI 的答复，或者报错信息。请问有哪些常见服务或应用是通过 API 实现的？