【Laravel×Vue】メモアプリ制作の記録④~テーブルの関連付け~

はじめに

この記事ではテーブルの関連付けをしていきます。

前回はフォルダ機能とタスク機能を実装しました。

ですが、現状はDBに登録されているタスクを全て(ログインユーザー、選択フォルダに関係なく)表示してしまう仕様になっています。

そこを改善していきます。

目的(ゴール)/今回試したいこと

1.シーダーの導入

2リレーション(テーブルの関連付け)

参考教材に関して

入門Laravelチュートリアル (1) イントロダクションと環境構築

(以下、これらを大変恐縮ではございますが教材と呼ばせていただきます。)

1.リレーション(テーブルの関連付け)

前回

users>folders>tasksで関連付くように編集していきます。

テストを効率的に行えるようシーダーを使います。(phpMyAdminで入力するのが手間なので。)

工程1.シーダー作成

①ユーザー用シーダー作成

php artisan make:seeder UsersTableSeeder

②編集

教材⑧

③フォルダ用シーダー作成

php artisan make:seeder FoldersTableSeeder

④編集

教材⑧

⑤タスク用シーダー作成

php artisan make:seeder TasksTableSeeder

⑥編集

教材④

⑦DB反映

php artisan migrate:refresh
php artisan db:seed --class=UsersTableSeeder
php artisan db:seed --class=FoldersTableSeeder
php artisan db:seed --class=TasksTableSeeder

テスト用のデータが一通り入りました。

フォルダテーブルのCRUDは実装できていますが、タスクテーブルのCRUDはリレーション処理を記載できていないので機能しない状態(かつ全て表示してしまっている)です。

工程2.コントローラで処理させる。

①api.phpの編集

<?php
Route::get('/','FoldersController@get');
Route::delete('/{id}','FoldersController@delete');
Route::post('/','FoldersController@post');
Route::put('/{id}','FoldersController@put');
Route::get('/folders/{id}/tasks','TasksController@get');
Route::delete('/folders/{id}/tasks','TasksController@delete');
Route::post('/folders/{id}/tasks','TasksController@post');
Route::put('/folders/{id}/tasks','TasksController@put');

②FoldersControllerの編集

constract(自動で呼び出されるマジックメソッド)を使用することですべての処理の前に認証チェックを行うことができる。 

/apiへアクセスがあった際にログインしてないユーザーに対してはログイン画面へ遷移させる。

※TasksControllerの編集は後程リレーション処理ですぐ編集するので割愛。

工程3.リレーション処理

✅タスクの取得

タスクをログインユーザー、選択フォルダに連動して表示するよう編集していきます。

= ログイン中のユーザー且つ選択したフォルダのタスクを取得する。

①TasksControllerの編集

public function get($id)
{
  $login_id = Auth::id();
  $tasks = Task::whereUserId($login_id)->whereFolderId($id)->get();
  return response()->json($tasks);
}

②Folder.vueとTask.vueをApp.vueに統一。(一旦実装しやすいようにしました。)

③App.vueの編集

~~省略
<button type="button" @click="currentFolder(folder.id)">選択</button> // add
~~省略
currentFolder(id) {
  axios.get("/api/folders/"+id+"/tasks")
    .then(response => {
      this.tasks = response.data;
      this.task_form = "";
  });
},
~~省略
getTaskList() {
  axios.get("/api/folders/1/tasks") // idを1を
    .then(response => {
      this.tasks = response.data;
      this.task_form = "";
    });
},

✅タスクの追加/削除/編集

選択中のフォルダのタスクを追加/削除/編集できるようにしていきます。

また処理後は、選択中のフォルダでデータを再取得するようにします。

①TaskControllerの編集

②App.vueの編集

完成

躓いた点

1.モデル越しのリレーションができない

起因:仕様的な問題??(知識不足です)

解決策: UserモデルとTaskモデルを直でリレーション結ぶ仕様に変更(tasksテーブルにuser_idカラムを追加した)

おわりに

フォルダ機能はLaravel側で作るべきか??とかURL設計が当初は全くイメージできなかったがなんとか実装できた。嬉しい。

それとFolder.vueとTask.vueをApp.vueに統一してしまったので、コンポーネントを分けて実装してみようかな。

とりあえずやっとSassでCSSを1から作るなりの練習ができるフェーズに来れました。

関連記事

【Laravel×Vue】メモアプリ制作の記録①~設計~
【Laravel×Vue】メモアプリ制作の記録②~トップページの作成~
【Laravel×Vue】メモアプリ制作の記録③~フォルダ/タスク機能の実装~
【Laravel×Vue】メモアプリ制作の記録④~テーブルの関連付け~

コメントを残す