Fetching Data Dengan Alpine JS-tutorial js-php.cn

Fetching Data Dengan Alpine JS

王林

Lepaskan： 2024-07-19 14:38:47

asal

1014 orang telah melayarinya

Kali ini kita akan belajar mengambil data daripada API menggunakan Alpine JS. Kami akan membuat tapak web yang memaparkan senarai kelab bola sepak yang bermain dalam Liga Perdana Inggeris yang diambil daripada API berikut.

Alpine JS ialah rangka kerja Javascript ringan yang boleh kami gunakan untuk membuat tapak web interaktif tanpa perlu menggunakan rangka kerja seperti React atau Vue. Apabila menggunakan Alpine JS, kami boleh menggunakan sifat Javascript terus ke fail HTML dengan mudah tanpa perlu menulisnya secara berasingan.

Sila buat fail HTML dengan nama index.html, kemudian tampal kod berikut.

<!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>

Salin selepas log masuk

Seterusnya kami akan membuat komponen kad menggunakan 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>

Salin selepas log masuk

Kemudian kami akan mengambil data dan memaparkannya pada komponen kad.

<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>

Salin selepas log masuk

Tahniah! Anda telah berjaya mengambil API menggunakan Alpine JS dan memaparkannya kepada pengguna, berikut ialah hasilnya.

Image description

Berikut ialah penjelasan tentang kod yang dibuat.

x-data berfungsi untuk menampung data logik Javascript untuk dijalankan terus pada teg HTML. Dalam kod ini kami mencipta pembolehubah dipanggil pasukan yang mempunyai tatasusunan jenis data. Pembolehubah ini bertujuan untuk menahan data daripada mengambil keputusan dalam fungsi.

x-init bertujuan untuk melakukan pemulaan sebelum komponen dimuatkan. Dalam kod ini, kami memasukkan fungsi ambil yang bertujuan untuk mendapatkan semula data daripada titik akhir API yang telah kami sediakan sebelum ini. Kemudian sebelum halaman penyemak imbas dipaparkan, Alpine JS akan menjalankan proses pengambilan di belakang tabir dan kemudian hasil pengambilan dikumpulkan ke dalam pembolehubah pasukan yang diisytiharkan pada mulanya.

x-for digunakan untuk menjalankan proses lelaran pembolehubah pasukan dan kemudian meletakkannya semula dalam pembolehubah pasukan.

x-bind untuk memaparkan imej dan x-text untuk mencetak data terus ke dalam paparan HTML.

Atas ialah kandungan terperinci Fetching Data Dengan Alpine JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!