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

はじめに

現在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/へアクセス。以下のように取得できていることがわかります。

おわりに

DB連携をしっかりと理解した上で実装するのはとても難しかったです。

とりあえず取得して表示まですることができました。

が、既に不要なコントローラの作成、モデルやテーブルの命名方法、URL設計などナンセンスな状況になってきている気がします。。。

次回はデータの編集までできるようにしたい。

※上記の教材、サイト上でデータの編集しないことにここで気づく。。。どうしよう。。。(会員登録機能の実装からすればよかったかも。)

現状のソースコード

このアプリは数々のチュートリアル・教材を参考に制作しています。

参考にさせていただいた教材は以下でご紹介させていただきます。

参考

参考教材

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

Laravel(+Vue.js)でSNS風Webサービスを作ろう!

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

Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう

入門Laravelチュートリアル (2) ToDoアプリケーションの設計

公式ドキュメント(英文)

Laravel JavaScript & CSS Scaffolding

公式ドキュメント

その他参考(Qiitaなど)

Full Stack Vue.js & Laravel(YouTube) ※ちゃんと見てないです。こんなのあるんだなと。参考までに。

Laravel5.7: postsとusersを関連させる

Laravelリレーション初心者向け!外部キーがデフォルトでないパターン!!!

【Laravel】リレーション後に外部キー設定を行う

【メモ】Laravelで外部キー制約付きのテーブルをマイグレーションする時に気をつけた方がよかった点

PHPでJSONのデータを処理する方法

Laravelとvue.jsの環境構築とDBからのデータ取得

vue.jsを使ってaxiosを学ぶ

コメントを残す