Alpine JS로 데이터 가져오기-JS 튜토리얼-php.cn

Alpine JS로 데이터 가져오기

王林

풀어 주다： 2024-07-19 14:38:47

원래의

935명이 탐색했습니다.

이번에는 Alpine JS를 사용하여 API에서 데이터를 가져오는 방법을 배워보겠습니다. 다음 API를 사용하여 영국 프리미어리그에서 뛰는 축구 클럽 목록을 표시하는 웹사이트를 만들겠습니다.

Alpine JS는 React나 Vue와 같은 프레임워크를 사용하지 않고도 대화형 웹사이트를 만드는 데 사용할 수 있는 경량 Javascript 프레임워크입니다. Alpine JS를 사용하면 별도로 작성할 필요 없이 HTML 파일에 Javascript 속성을 쉽게 직접 적용할 수 있습니다.

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 기능은 HTML 태그에서 직접 실행되는 Javascript 논리 데이터를 수용하는 기능입니다. 이 코드에서는 데이터 유형 배열이 있는 팀이라는 변수를 만듭니다. 이 변수는 함수에서 결과를 가져오는 데 필요한 데이터를 보관하는 것을 목표로 합니다.

x-init는 컴포넌트가 로드되기 전에 초기화를 수행하는 것을 목표로 합니다. 이 코드에서는 이전에 준비한 API 엔드포인트에서 데이터를 검색하는 것을 목표로 하는 가져오기 함수를 삽입합니다. 그런 다음 브라우저 페이지가 표시되기 전에 Alpine JS는 백그라운드에서 가져오기 프로세스를 수행한 다음 가져오기 결과를 처음에 선언된 팀 변수로 수집합니다.

x-for는 팀 변수의 반복 프로세스를 수행한 후 다시 팀 변수에 넣는 데 사용됩니다.

x-bind는 이미지를 표시하고 x-text는 데이터를 HTML 디스플레이에 직접 인쇄합니다.

위 내용은 Alpine JS로 데이터 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!