ホームページ > 記事 > ウェブフロントエンド > Alpine JS を使用したデータの取得
Alpine JS を使用したデータの取得
- 王林オリジナル
- 2024-07-19 14:38:47893ブラウズ
今回は、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 を正常に取得し、ユーザーに表示しました。結果は次のとおりです。
以下は作成したコードの説明です。
x-data 関数は、JavaScript ロジック データを HTML タグ上で直接実行できるようにします。このコードでは、データ型が配列である Teams という変数を作成します。この変数は、関数で取得した結果からのデータを保持することを目的としています。
x-init は、コンポーネントがロードされる前に初期化を実行することを目的としています。このコードでは、以前に準備した API エンドポイントからデータを取得することを目的としたフェッチ関数を挿入します。そして、ブラウザ ページが表示される前に、Alpine JS がバックグラウンドでフェッチ処理を実行し、フェッチの結果が最初に宣言された Teams 変数に収集されます。
x-for は、チーム変数の反復プロセスを実行し、それをチーム変数に戻すために使用されます。
x-bind は画像を表示し、x-text はデータを HTML 表示に直接出力します。
以上がAlpine JS を使用したデータの取得の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。