Rumah > Artikel > hujung hadapan web > Fetching Data Dengan Alpine JS

Fetching Data Dengan Alpine JS

王林asal: 2024-07-19 14:38:47896semak imbas

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>

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>

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>

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!

JavaScript css html Array for JS

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：WebRTC SFU: Panduan lengkap.Artikel seterusnya：WebRTC SFU: Panduan lengkap.

Artikel berkaitan

Lihat lagi