【Laravel+Vue.js】アプリ制作の記録⑥DBからのデータ取得

はじめに
DBからのデータ取得
- Laravel側の準備をする
  - カード用のDB作成
- APIの組み込み
おわりに
参考

はじめに

現在Laravel+Vue.jsでのアプリ制作の記録です。

この記事ですることは以下です。(かなり手探りで制作しています。)

LaravelのDBへの紐づけ。

Vue.js側からのLaravelのDB連携。若干避けていましたがついに挑戦です。

※前回までの記録。

【Laravel+Vue.js】アプリ制作の記録①設計

【Laravel+Vue.js】アプリ制作の記録②プロジェクト作成

【Laravel+Vue.js】アプリ制作の記録③Vue Routerの実装

【Laravel+Vue.js】アプリ制作の記録④Vuexの実装

【Laravel+Vue.js】アプリ制作の記録⑤Vue.js側の作成

DBからのデータ取得

Laravel側の準備をする

Laravelでtrello風todoタスク管理アプリを作成しよう！

上記の教材を参考にDB周りを作成していきます。※認証コマンドは使わない！！

以前の記事を終えると3章のリスト機能の開発は終えたことになります。

ListingsControllerのアクションがindexしかありませんが、これはVue.jsと後程連携させていきます。

ですので今回はTechpit教材の4章から参考にしていきます。

カード用のDB作成

①マイグレーションファイルの作成

php artisan make:migration create_cards_table --create=cards

②マイグレーションファイルの編集

Schema::create('cards', function (Blueprint $table) {
  $table->bigIncrements('id');
  $table->string('title');
  $table->string('status');
  $table->integer('listing_id')->unsigned();
  $table->timestamps();
});

以前作成した設計を参考にしています。

③マイグレート

php artisan migrate

④モデル作成

php artisan make:model Card

⑤ListingモデルとCardモデルの関連付け

Listing.phpの編集

class Listing extends Model
{
  //hasMany設定
  public function cards()
  {
    return $this->hasMany('App\Card');
  }
}

⑥コントローラ作成

php artisan make:controller CardsController

※まだ編集はしないですが作成しておきます。

⑦シーダー作成

php artisan make:seeder ListingsTableSeeder
php artisan make:seeder CardsTableSeeder

⑧シーダーの編集

ListingsTableSeeder.phpの編集

public function run()
{
    DB::table('listings')->truncate();
    // テーブルのデータを全て削除するコード
    DB::table('listings')->insert([
        'title' => 'list1',
        'user_id' => '1',
        'created_at' => now(),
        'updated_at' => now(),
    ]);
}

CardsTableSeeder.phpの編集

public function run()
{
    DB::table('cards')->truncate();

    DB::table('cards')->insert([
        'title' => 'card1',
        'status' => '未着手',
        'listing_id' => '1',
        'created_at' => now(),
        'updated_at' => now(),
    ]);
}

⑨シーダーの実行

php artisan db:seed --class=ListingsTableSeeder
php artisan db:seed --class=CardsTableSeeder

APIの組み込み

【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう！

上記の教材の6章を参考に実装していきます。

目標はデータベースの情報を表示することです。

大前提、Laravel単体でもDBからデータを取り出してビューへ表示する知見がないと実装できません。(僕もここから再度復習しました。)

①axiosのインストール　※package.jsonに標準で記載されているのでnpm installしているこのプロジェクトでは不要でした。

npm install --save-dev axios

②app.jsの編集

import App from './App.vue'
import axios from 'axios' // 追記

Vue.prototype.$http = axios; // 追記

const app = new Vue({

③api.phpの編集(api/listのURLでJSONを受け取るように設定する)

末尾に以下を追記。

Route::group(['middleware' => ['api']], function () {
    Route::get('list', 'Api\ListController@index');
  });

④Api/ListControllerの作成

php artisan make:controller Api/ListController

⑤ListControllerの編集

<?php

namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Listing;

class ListController extends Controller
{
    public function index()
    {
      $listings = Listing::orderby('id', 'desc')->get();
      return $listings;
    }
}

http://127.0.0.1:8000/api/listへアクセス。

⑥Vue側でAPIを呼び出し

※とりあえずお試しで実装してみます。

App.vueを編集

<template>
  <div>
    <header>
      <h1>My Note</h1>
      <RouterView />
    </header>
    <main>
      <Board />
    </main>
    <footer>
      <!-- ここから追加 -->
      <div v-for="(list, index) in listing" :key="index">
        <h1>{{list.created_at}}</h1>
        <h1>{{list.title}}</h1>
      </div>
      <!-- ここまで追加 -->
    </footer>
  </div>
</template>

<script>
import Board from './components/Board.vue'
export default {
  data() {
    return {
      listing :[] // 追加
    };
  },
  components: {
    Board
  },
  // 以下mountedオプション追加
  mounted() { 
    this.$http.get("/api/list").then(response => {
      this.listing = response.data;
    });
  },
}
</script>

http://127.0.0.1:8000/へアクセス。以下のように取得できていることがわかります。