Alpine JS を使用したデータの取得-jsチュートリアル-php.cn

Alpine JS を使用したデータの取得

王林

リリース： 2024-07-19 14:38:47

オリジナル

935 人が閲覧しました

今回は、Alpine JS を使用して API からデータを取得する方法を学習します。以下の API から取得した、イングランドプレミアリーグに所属するサッカークラブの一覧を表示する Web サイトを作成します。

Alpine JS は、React や Vue などのフレームワークを使用せずに、インタラクティブな Web サイトを作成するために使用できる軽量の Javascript フレームワークです。 Alpine JS を使用すると、JavaScript プロパティを個別に記述することなく、HTML ファイルに直接簡単に適用できます。

index.html という名前で HTML ファイルを作成し、次のコードを貼り付けてください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Latihan Alpine JS</title>

    <!-- Import Alpine JS -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Import Tailwind -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"/>

    <style>
      * {
        font-family: "Roboto", sans-serif;
      }
    </style>
  </head>
  <body>

  </body>
</html>

ログイン後にコピー

次に、Tailwind CSS を使用してカードコンポーネントを作成します。

<div class="container px-4 py-12 mx-auto">
  <div class="flex flex-wrap">
    <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
      <img alt="logo" class="object-cover h-56 mx-auto" src="" />
      <div class="mt-4">
        <h2 class="text-gray-500 text-xs tracking-widest mb-1"></h2>
        <h1 class="text-gray-900 text-xl font-medium"></h1>
      </div>
    </div>
  </div>
</div>

ログイン後にコピー

次に、データを取得してカードコンポーネントに表示します。

<div class="flex flex-wrap" x-data="{ teams: [] }" x-init="fetch('https://www.thesportsdb.com/api/v1/json/3/search_all_teams.php?l=English%20Premier%20League').then(response => response.json()).then(data => { teams = data.teams })">
  <template x-for="team in teams">
    <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
      <img x-bind:alt="team.idTeam" class="object-cover h-56 mx-auto" x-bind:src="team.strBadge" />
      <div class="mt-4">
        <h2 class="text-gray-500 text-xs tracking-widest mb-1" x-text="team.strLocation"></h2>
        <h1 class="text-gray-900 text-xl font-medium" x-text="team.strTeam"></h1>
      </div>
    </div>
  </template>
</div>

ログイン後にコピー

おめでとうございます! Alpine JS を使用して API を正常に取得し、ユーザーに表示しました。結果は次のとおりです。

Image description

以下は作成したコードの説明です。

x-data 関数は、JavaScript ロジックデータを HTML タグ上で直接実行できるようにします。このコードでは、データ型が配列である Teams という変数を作成します。この変数は、関数で取得した結果からのデータを保持することを目的としています。

x-init は、コンポーネントがロードされる前に初期化を実行することを目的としています。このコードでは、以前に準備した API エンドポイントからデータを取得することを目的としたフェッチ関数を挿入します。そして、ブラウザページが表示される前に、Alpine JS がバックグラウンドでフェッチ処理を実行し、フェッチの結果が最初に宣言された Teams 変数に収集されます。

x-for は、チーム変数の反復プロセスを実行し、それをチーム変数に戻すために使用されます。

x-bind は画像を表示し、x-text はデータを HTML 表示に直接出力します。

以上がAlpine JS を使用したデータの取得の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。