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 and TailwindCSS/UI

バックエンドAdonisJS

データベースPostgreSQL

サーバーの提供と配備Cleavr

パート4 -接続Nuxtフロントエンドアドニス5 APIに

バック・インthemovies プロジェクトは、私たちは今Nuxtフロントエンドを私たちのアドニス5 APIと接続する更新されます.

NuxtインデックスのAPIからデータを取得します。を使用したVueページ

開きましょう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
      }
    }
  }

Nuxtのものを使っているAsync Data 上記の例では、async/waitメソッドと一緒に.
我々はまた、一度アプリを配置すると、我々は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

このセクションの完全なHTMLを見ることができますGitHub .
我々の仕事をチェックするために、両方を走らせましょうmovieapi and themovies プロジェクト.cd プロジェクトに実行し、適切なコマンドを実行してプロジェクトを実行します.APIが別のポートで動作している場合、themovies APIとインターフェースできるように.

すごい!我々は現在、動的に我々のアドニス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
      }
    }
  }

上記は、ムービータイトルIDをURLから渡し、Getメソッドに追加して、提供されたIDを使用してムービーのデータのみをプルします.
返されたデータをmovie 配列.
前の手順と同じように、我々は現在、コンテンツが動的に配置されるように、映画プレースホルダでプレースホルダのデータを交換することができます.
結果の更新を表示GitHub .
そして今、ブラウザをチェックして作品をテストしましょう

私たちはそれをやった!🙌
今我々はフロントエンドとバックエンドのすべてのアウトを持っているので、我々はすぐに我々のアプリをstep 5 .
続いて?githubの上のパート4を見てくださいhttps://github.com/armgitaar/themovies/tree/part-4 .