【モデルの追加】Laravel+Vue.jsでのDB連携【備忘録②】

はじめに

先日作成したプロジェクト(※以下記事)を用いて追加実装をしていこうと思います。

※これはLaravel+Vue.jsアプリ制作のための勉強をした際の備忘録です。

【モデルの追加】Laravel+Vue.jsでのDB連携【超ミニマムチュートリアル③】

今回試したいこと

・フォルダ追加機能の実装

環境に関して

Laravel 6.8

PHP 7.3

Windows/XAMPP/MySQL

参考教材に関して

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

(大変恐縮ですが、)当記事ではこちらの教材を以降、教材と記載させていただいてます。

※こちら参考にVue.jsで実装できないかなと思っています。

フォルダ追加機能の実装

※教材⑤　今回はこちらを参考にしていきます。

フォルダ新規作成機能の実装

①web.phpの編集

Route::get('/folders/create', 'FolderController@showCreateForm')->name('folders.create');
Route::post('/folders/create', 'FolderController@create');

②コントローラの作成

php artisan make:controller FolderController

③コントローラの編集

※ここは教材通り(createメソッドとshowCreateFormメソッド)

④ビューの作成と編集

※folders/create.blade.php(コードは教材通り)

⑤バリデーションのためのリクエスト作成

php artisan make:request CreateFolder

⑥リクエストの編集

※教材通り。

authorizeメソッドにはtrueを返却することでリクエストの利用を許可。

ruleメソッドで入力欄ごとにチェックするルールを定義。
requireで入力欄を必須にする。

⑦コントローラの編集

※教材通り

リクエストをuseし、メソッド引数を編集。

⑧ビューの編集(エラーメッセージの表示)

※教材通り

これで送信を押すとエラーメッセージが表示されます。
ルール違反の内容は $errors 変数に詰めてテンプレートに渡される。

※日本語化は割愛。

認証機能と紐づける

※教材通りだとこれで登録できます。僕の場合は既に認証機能を追加した状態なので、user_id含めて保存できるように実装する必要がありました。(少し飛びますが教材⑧と教材⑨を参考に実装します。)

①FolderControllerの編集

※ユーザーとしてフォルダを作成

- $folder->save();
+ Auth::user()->folders()->save($folder);

②TasksControllerの編集

※ユーザーとしてタスクを表示する。

$folders = Auth::user()->folders()->get();

アレンジ

ここで今まで作ってきたアプリで表示を試みてみました。

api.phpの編集

use App\Folder;
~~省略
Route::get('/',function(){  
    return response()->json(Folder::find(1)->todos()->get());
});

とても仮ですがこれで取得できました。

削除・更新もできましたが、Vue.js側からデータ取得時にidを送るようにしていないので、フォルダ遷移に対応できてない＆フォルダのビューを作れていません。

User->Folder->Todo的な感じでモデルを1つまたいだデータの取得もいまいちつかめていません。(これはif文なりで分けるのかな？？)

ここは改めてまとめようと思います。

おわりに

いつもphpMyAdminの恩恵にあやかって、シーダーは使わずにGUIでデータを操作していました。

コマンドラインやFWの仕組みを利用しての作成は初めてに近かったのでかなり勉強になりました。

また、最初はフォルダ機能もLaravel側で作ろうと思っていましたが、フォルダ作成のビューを別途用意する必要性に気付き、微妙だなと思ってしまいました。

ここまでで、Laravelでのモデルの扱い方含めLaravel×Vue.jsの連携で一番課題を感じていたDB連携についてだいぶ理解できてきました。

そろそろ1からLaravel×Vue.jsのポートフォリオを作っていこうと思います。

学習の備忘録

学び

・Requestクラスにはフォームの入力値に加え、ヘッダ情報や送信弦IPなど含まれている。

・バリデーションに用いるフォームリクエストに関しては、配列のキーが入力欄。HTML 側での input 要素のname 属性に対応。

・FolderControllerが今回出てきた。コントローラークラスを作る基準は特にないらしい。教材では処理の主体ごとに作成しているとのこと。

・シーダー利用時に、bcrypt関数を使うことでユーザーパスワードなどを暗号化してDBに保存することができる。

・ログアウト機能として必要なのは route('logout') の URL に POST リクエストを送信することだけ。必要なデータは CSRF トークンのみ。