学习 Axios 与 DOM 操作 | 网页开发项目

介绍

在这个项目中，你将学习如何使用 Axios 发送带有授权头的请求，以及如何根据响应数据更新 DOM。你将构建一个简单的 Web 应用程序，它与服务器进行交互以获取神秘咒语的部分内容。

在这个项目中，你将学习：

完成这个项目后，你将能够：

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── css
├── lib
├── js
│   └── index.js
└── index.html

其中：

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新以查看页面。

在这一步中，你将实现“密钥 1”按钮的功能。

在 js/index.js 文件中，找到 key1Button.addEventListener("click", async () => {... }) 代码块。
将 let { data } = await axios.get("/spellone"); 修改为以下代码：
```
let { data } = await axios.get("/spellone", {
  headers: {
    Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
  }
});
```
这几行代码将向 /spellone 端点发送一个 GET 请求，并将 Authorization 头设置为提供的令牌。响应数据将显示在 spell1 元素中。
保存 js/index.js 文件。

在这一步中，你将实现“密钥 2”按钮的功能。

在 js/index.js 文件中，找到 key2Button.addEventListener("click", async () => {... }) 代码块。
将 let { data } = await axios.get("/spelltwo"); 修改为以下代码：
```
let { data } = await axios.get("/spelltwo", {
  headers: {
    Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
  }
});
```
这几行代码将向 /spelltwo 端点发送一个 GET 请求，并将 Authorization 头设置为提供的令牌。响应数据将显示在 spell2 元素中。
保存 js/index.js 文件。

在这一步中，你将实现检查是否可以打开宝箱的逻辑。

在 js/index.js 文件中，找到 tryOpenTreasureBox() 函数。
此函数检查 spell1 和 spell2 元素的内容是否与预期值（“I love you”和“You love me too”）匹配。如果条件满足，它将把“opened”类添加到 treasureBox 元素并显示成功消息。
保存 js/index.js 文件。