使用 Alpine JS 获取数据- 技术经验 -卓越飞翔博客

这次我们将学习使用 alpine js 从 api 获取数据。我们将创建一个网站，显示参加英超联赛的足球俱乐部列表（取自以下 api）。

alpine js 是一个轻量级的 javascript 框架，我们可以用它来创建交互式网站，而无需使用 react 或 vue 等框架。使用 alpine js 时，我们可以轻松地将 javascript 属性直接应用到 html 文件，而无需单独编写它们。

请创建一个名为index.html的html文件，然后插入以下代码。



  
    <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.tailwind&lt;a%20style='color:#f60;%20text-decoration:underline;'%20href=" https: target="_blank">css.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&amp;display=swap" rel="stylesheet"><style>
      * {
        font-family: "roboto", sans-serif;
      }
    </style>

接下来我们将使用 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 =&gt; response.json()).then(data =&gt; { 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 标签上运行。在此代码中，我们创建一个名为 team 的变量，其数据类型为数组。该变量旨在保存该函数中获取结果的数据。

x-init 旨在在组件加载之前执行初始化。在此代码中，我们插入一个 fetch 函数，旨在从我们之前准备的 api 端点检索数据。然后在浏览器页面显示之前，alpine js 会在后台执行一次抓取过程，然后将抓取的结果收集到一开始声明的 team 变量中。

x-for用于对teams变量进行迭代过程，然后放回team变量中

x-bind 显示图像，x-text 将数据直接打印到 html 显示中。

相关推荐