メニューを表示してみる④（vue.js）

前回の記事で、DBのデータを取ってくることができましたね！

次はそのデータをフロントエンドに反映させてみましょう！

APIからデータを取得して表示します。

それには「axios」を使います

axiosのインストール
laravelデータを確認
ルーティングの設定（apiの作成）
1. CORSエラー
2. 更新履歴がわかるようなアドレス
作成したapiのデータの中身を確認
1. api.phpに記述の際の注意点
laravel→vue.jsへデータの取得
1. response.dataとは？
  1. コンソールでの確認方法
  2. ARC（Advanced REST client）での確認方法
Vue.js（フロント）での表示
1. 関連

axiosのインストール

vue.jsを起動しているターミナルで下記コマンドを実行！これでaxiosが使えるようになります。

yarn add axios

laravelデータを確認

下記のコードのように「取得したjsonデータ（’data’）はMenuテーブルの全てのデータ（$items）」になります。

{
    public function index()
    {
        $items=Menu::all();
        return response()->json([
            'message'=>'OK',
            'data'=>$items
        ],200,[],
        JSON_UNESCAPED_UNICODE
    );
    }
}

ルーティングの設定（apiの作成）

上記のlaravelのデータをどうしたいかを記述します。

Route::○○の〇〇の部分をHTTPメソッドといいます。

（get…取得/post…送信/put…更新/delete…削除等）

今回は、「/v1/menu」にアクセスした時に、MenuControllerのindexアクションの内容を取得する

というルーティングになります。

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\MenuController;

Route::get('/v1/menu',[MenuController::class,'index']);

CORSエラー

今回、apiを作成するにもかかわらず、当初web.phpにルーティングを記載してしまっていたため

CORSエラーになってしまい、ブラウザではじかれてしまったため、データがうまく取得できませんでした。。

api.phpにルーティングを記述したことで、問題なく取得できました！

（教えていただいたみなさん、ありがとうございました🙇‍♀️）

更新履歴がわかるようなアドレス

「/v1/menu」と、「v1」としていますがこれはver.1という意味で、更新履歴をわかるようにしています！複数人で開発する時には、このように更新履歴がわかるようにしていた方がいいかもしれません。

作成したapiのデータの中身を確認

現在、ローカルで開発中なのでターミナルを見ると「http://127.0.0.1:8000」であることが分かります。

そこに先ほど作成したapiのアドレスを引っ付けて「http://127.0.0.1:8000/api/v1/menu」にして

ブラウザで確認してみましょう！

↓こんな感じでデータが出てくればOKです

api.phpに記述の際の注意点

web.phpの場合は

Route::get(‘/v1/menu‘,[MenuController::class,’index’]);

→http://127.0.0.1:8000/v1/menu でOKですが。。

api.phpの場合は

Route::get(‘/v1/menu‘,[MenuController::class,’index’]);

→http://127.0.0.1:8000/api/v1/menu と、「api」が必要になるので注意しましょう！

laravel→vue.jsへデータの取得

まず、apiを使用するために「import axios from ‘axios’」の記述を忘れないようにしましょう！

<script>
import axios from 'axios';
export default{
　③data(){
    return{
      menus:[{
        name:[],
        price:[],
      }]
    }
  },
  ①async created(){
     await axios.get("http://127.0.0.1:8000/api/v1/menu"
    )
  ② .then((response)=>{
      console.log(response);
      this.menus=response.data.data;
    })
  }
}
</script>

簡単に説明すると

①ではapiのデータを取得しています。

async/await・・・非同期処理の終了を待つ

created・・・データ取得処理（vue.jsのライフサイクルハックの一つ）

②では取得したデータをconsole.logで表示させ、中身を確認します。（グーグルの拡張機能である開発ツールで確認できます）

↓こんな感じです

そして、③にあるmenusはresponse.data.dataとするよう定義しています。

response.dataとは？

コンソールでの確認方法

ARC（Advanced REST client）での確認方法

私はいつもこちらで確認してます！

ARCのいいところは、apiを叩くときちんと通っているか確認も併せてできる点です！

③menusをresponse.data.dataに読み替えてください。（②で定義したため）

そうすると、「response.data.data.name」と「response.data.data.price」となり、その情報を配列で取得するようにしています。

Vue.js（フロント）での表示

データを配列で取得したので、v-forで繰り返し処理をするようにします！

v-for=”要素 in 配列”:key=””

    <div class="menuimage"  v-for="(menu,index) in menus" :key="index">
       <img src="../img/cappuccino-gfff12656d_640.jpg" alt="menuimg">
       <p class="menuname">{{menu.name}}</p>
       <p class="menuprice">{{menu.price}}</p>
       <p class="menudetail">{{menu.detail}}</p>
    </div>

これで無事にDBからデータを取得し、フロントエンドに反映することができました！

あとはいい感じにデザイン整えたら完成って感じです！