首页 > 文章 > web前端 > 使用 Alpine JS 获取数据

使用 Alpine JS 获取数据

王林原创: 2024-07-19 14:38:47935浏览

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

Alpine JS 是一个轻量级的 Javascript 框架，我们可以用它来创建交互式网站，而无需使用 React 或 Vue 等框架。使用 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 标签上运行。在此代码中，我们创建一个名为 team 的变量，其数据类型为数组。该变量旨在保存函数中获取结果的数据。

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

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

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

以上是使用 Alpine JS 获取数据的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html Array for JS

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：WebRTC SFU: the complete Guide.下一篇：How to Validate Array of Strings using Yup

查看更多