In this multi-part tutorial, we'll create and deploy a multi-server architecture web application.

Part 1:
Part 2:
Part 3:
Part 4: Connecting Nuxt front-end to Adonis 5 API
Part 5:

사용된 프레임워크 및 도구

프런트 엔드: NuxtJS 및 TailwindCSS/UI

백엔드: AdonisJS

데이터베이스: PostgreSQL

서버 제공 및 배포: Cleavr

4부 - Nuxt 프런트 엔드를 Adonis 5 API에 연결

themovies 프로젝트로 돌아가서 이제 Adonis 5 API와 연결하도록 Nuxt 프런트 엔드를 업데이트합니다.

Axios를 사용하여 Nuxt index.vue 페이지용 API에서 데이터 가져오기

index.vue 를 열고 Axios 라이브러리를 가져온 다음 API에서 영화 데이터 목록을 가져옵니다.
<script> 섹션을 찾아 다음을 추가합니다.

  import axios from 'axios'
  export default {
    async asyncData() {
      const { data } = await axios.get('http://0.0.0.0:3333/movies')
      return {
        movies: data
      }
    }
  }

우리는 위의 예에서 async/await 메서드와 함께 NuxtAsync Data를 사용하고 있습니다.

또한 앱을 배포한 후에는 URL을 업데이트해야 합니다.
movies에 반환되는 데이터를 할당하는 것도 볼 수 있습니다. 이제 movies 배열을 사용하여 동영상 목록의 내용을 동적으로 채울 수 있습니다.
<template> 섹션을 보면 하나의 <li> 세트를 유지하고 다른 <li> 섹션을 제거할 것입니다. for 루프를 사용하여 배열을 반복하면서 다른 목록 항목을 생성할 것이기 때문입니다.

<li v-for="movie in movies" class="...">

이제 원시 동영상 정보 텍스트를 동적 자리 표시자로 교체해 보겠습니다.

movie.id

movie.poster_image

movie.title

movie.release_year

movie.genres

movie.top_billed

movie.movie_description

GitHub에서 이 섹션의 전체 html을 볼 수 있습니다.

작업을 확인하기 위해 movieapi 및 themovies 프로젝트를 모두 실행해 보겠습니다. cd를 프로젝트에 넣고 적절한 명령을 실행하여 프로젝트를 실행합니다. API가 다른 포트에서 실행 중인 경우 API와 인터페이스할 수 있도록 themovies에서 포트를 업데이트합니다.



대박! 이제 데이터가 Adonis API에서 동적으로 호출되고 Nuxt 앱에 표시됩니다. 🤩

Nuxt 세부 정보 페이지용 API에서 데이터 가져오기

영화 세부 정보 페이지_title.vue에 대해 유사한 단계를 수행합니다.
<script> 태그 내에 다음을 추가합니다.

import axios from 'axios'

  export default {
    async asyncData({ params }) {
      const { data } = await axios.get(`http://0.0.0.0:3333/movies/${params.title}`)
      return {
        movie: data
      }
    }
  }

위는 URL에서 영화 제목 ID를 전달하고 get 메소드에 추가하여 제공된 ID를 가진 영화에 대한 데이터만 가져옵니다.

반환된 데이터를 movie 배열에 할당합니다.

이전 단계와 마찬가지로 이제 자리 표시자 데이터를 동영상 자리 표시자로 교체하여 콘텐츠가 동적으로 배치되도록 할 수 있습니다.

GitHub에서 결과 업데이트를 확인하십시오.

이제 브라우저를 확인하여 작업을 테스트해 보겠습니다.



우리는 해냈다! 🙌

프런트엔드와 백엔드가 모두 구축되었으므로 이제 step 5에서 Cleavr을 사용하여 여러 서버에 앱을 배포할 수 있습니다.


팔로우? GitHubhttps://github.com/armgitaar/themovies/tree/part-4에서 4부 보기.