はじめに
現在Laravel+Vue.jsでのアプリ制作の記録です。
この記事ですることは以下です。(かなり手探りで制作しています。)
LaravelのDBへの紐づけ。
Vue.js側からのLaravelのDB連携。若干避けていましたがついに挑戦です。
※前回までの記録。
【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サービスを作ろう!
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう
入門Laravelチュートリアル (2) ToDoアプリケーションの設計
公式ドキュメント(英文)
Laravel JavaScript & CSS Scaffolding
公式ドキュメント
その他参考(Qiitaなど)
Full Stack Vue.js & Laravel(YouTube) ※ちゃんと見てないです。こんなのあるんだなと。参考までに。
Laravelリレーション初心者向け!外部キーがデフォルトでないパターン!!!
【メモ】Laravelで外部キー制約付きのテーブルをマイグレーションする時に気をつけた方がよかった点
コメントを残す