Axios と DOM 操作を学ぶ | Web 開発プロジェクト

はじめに

このプロジェクトでは、Axios を使って認証ヘッダ付きのリクエストを送信する方法と、レスポンスデータに基づいて DOM を更新する方法を学びます。神秘的な呪文の一部を取得するためにサーバとやり取りするシンプルな Web アプリケーションを構築します。

web app interaction preview

このプロジェクトでは、以下を学びます。

このプロジェクトを完了すると、以下ができるようになります。

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── 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"
  }
});
```
これらのコード行は、Authorization ヘッダを指定されたトークンに設定して /spellone エンドポイントに GET リクエストを送信します。レスポンスデータは 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"
  }
});
```
これらのコード行は、Authorization ヘッダを指定されたトークンに設定して /spelltwo エンドポイントに GET リクエストを送信します。レスポンスデータは spell2 要素に表示されます。
js/index.js ファイルを保存します。

このステップでは、宝箱を開けられるかどうかをチェックするロジックを実装します。

js/index.js ファイルで、tryOpenTreasureBox() 関数を探します。
この関数は、spell1 と spell2 要素の内容が期待される値（「I love you」と「You love me too」）と一致するかどうかをチェックします。条件が満たされた場合、treasureBox 要素に「opened」クラスを追加し、成功メッセージを表示します。
js/index.js ファイルを保存します。

完成効果

おめでとうございます！あなたは「神秘的な呪文」プロジェクトを完了しました。Axios を使って認証ヘッダ付きでリクエストを送信する方法と、レスポンスデータに基づいて DOM を更新する方法を学びました。

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために LabEx でさらに多くの実験を行うことができます。