基于 Axios 的咒语寻宝项目

介绍

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

👀 预览

🎯 任务

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

• 如何设置项目并获取初始代码
• 如何实现“密钥 1”按钮的功能
• 如何实现“密钥 2”按钮的功能
• 如何根据获得的咒语部分检查是否可以打开宝箱

🏆 成就

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

• 使用 Axios 发送带有自定义头的 HTTP 请求
• 操作 DOM 以显示动态内容
• 实现条件逻辑以检查特定条件
• 按照分步说明完成一个 Web 开发项目

设置项目结构

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

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

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

其中：

• index.html 是主页。
• css 是用于存储项目样式的文件夹。
• lib 是用于存储项目 JavaScript 依赖项的文件夹。
• js/index.js 是你需要补充代码的 JavaScript 文件。

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

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

实现“密钥 1”按钮

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

1. 在 js/index.js 文件中，找到 key1Button.addEventListener("click", async () => {... }) 代码块。

2. 将 let { data } = await axios.get("/spellone"); 修改为以下代码：

   let { data } = await axios.get("/spellone", {
     headers: {
       Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
     }
   });
   

   这几行代码将向 /spellone 端点发送一个 GET 请求，并将 Authorization 头设置为提供的令牌。响应数据将显示在 spell1 元素中。

3. 保存 js/index.js 文件。

实现密钥 2 按钮

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

1. 在 js/index.js 文件中，找到 key2Button.addEventListener("click", async () => {... }) 代码块。

2. 将 let { data } = await axios.get("/spelltwo"); 修改为以下代码：

   let { data } = await axios.get("/spelltwo", {
     headers: {
       Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
     }
   });
   

   这几行代码将向 /spelltwo 端点发送一个 GET 请求，并将 Authorization 头设置为提供的令牌。响应数据将显示在 spell2 元素中。

3. 保存 js/index.js 文件。

检查宝箱

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

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

测试应用程序

1. 返回浏览器并刷新页面。
2. 点击“密钥 1”和“密钥 2”按钮，观察页面变化。
3. 如果宝箱成功打开，你将看到显示的成功消息。完成后的效果如下：

恭喜！你已完成“神秘咒语”项目。你已经学会了如何使用 Axios 发送带有授权头的请求，以及如何根据响应数据更新 DOM。

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。