目次
はじめに
この記事ではフォルダ機能・タスク機能の実装をしていきます。
目的(ゴール)/今回試したいこと
1.フォルダ機能の実装
2.タスク機能の実装
参考教材に関して
入門Laravelチュートリアル (1) イントロダクションと環境構築
(以下、これらを大変恐縮ではございますが教材と呼ばせていただきます。)
1.フォルダ機能の実装
工程1.モデルの作成
①マイグレーションファイル作成
php artisan make:migration create_folders_table
②編集
Schema::create('folders', function (Blueprint $table) {
$table->bigIncrements('id');
+ $table->unsignedBigInteger('user_id');
+ $table->string('title');
$table->timestamps();
+ $table->foreign('user_id')->references('id')->on('users'); //外部キー制約
});
③マイグレートでテーブルに反映
php artisan migrate
phpMyAdminで確認。
④モデルの作成(テーブルの単数形で自動的に紐づけされる)
php artisan make:model Folder
⑤モデルの編集
Userモデルを編集します。リレーションを追加。
public function folders(){
return $this->hasMany('App\Folder');
}
}
工程2.コントローラの作成
①コントローラの作成
php artisan make:controller FoldersController
②編集
use App\Folder; // add
工程3.フォルダ機能実装
※こちらを基にAxiosのインストールを済ました状態で進めます。
①js/components/Folder.vueの編集
②api.phpの編集
③Karnel.phpの編集
セッションをAPIでも保持できるようにする。参考
ここまでで以下の表示。追加・削除・更新が問題なく動作するか確認します。
2.タスク機能の実装
工程1.モデルの作成
①マイグレーションファイル作成
php artisan make:migration create_tasks_table
②編集
Schema::create('tasks', function (Blueprint $table) {
$table->bigIncrements('id');
+ $table->unsignedBigInteger('folder_id');
+ $table->unsignedBigInteger('user_id');
+ $table->string('title', 100);
+ $table->integer('status')->default(1); // 数字で管理
+ $table->date('due_date');
$table->timestamps();
+ $table->foreign('folder_id')->references('id')->on('folders');
+ $table->foreign('user_id')->references('id')->on('users');
});
③マイグレートでテーブルに反映
php artisan migrate
phpMyAdminで確認。
④モデルの作成(テーブルの単数形で自動的に紐づけされる)
php artisan make:model Task
⑤モデルの編集
Folderモデルを編集します。リレーションを追加。
public function tasks(){
return $this->hasMany('App\Task');
}
}
工程2.コントローラの作成
①コントローラの作成
php artisan make:controller TasksController
②編集
use App\Task; // add
工程3.タスク機能実装
①js/components/Task.vueの編集
※Folder.vueのfolderをtaskに変更しただけです。
②api.phpの編集
※folderをtaskに変更して追記しただけです。(リレーション周りを配慮する前に、とりあえずの実装です。)
ここまでで以下の表示(デザイン性は皆無です。笑)。追加・削除・更新が問題なく動作するか確認します。
躓いた点
1.マイグレーションできない
起因：外部キー制約していカラムの型違い
解決策： 型をそろえる
参照：Laravel 外部キー制約エラー General error: 3780 Referencing column
2.APIが取得できない
起因：コピペでコードの土台を作成したことで、未定義のメソッド(またエラーの出るメソッド)があった。
解決策： 未定義のメソッドを消す。
Vue.js側は順を追ってコードを記載していかないといけないといけない。
おわりに
Folder.vueに記載したAxiosのメソッドをApp.vueを経由しても表示されるか不安だったが無事表示された◎
予定ではテーブルの関連付けまで書きたかったけど、予想以上に躓く&量が多くなりそうだったので分けて書きます。
関連記事
【Laravel×Vue】メモアプリ制作の記録①～設計～
【Laravel×Vue】メモアプリ制作の記録②～トップページの作成～
【Laravel×Vue】メモアプリ制作の記録③～フォルダ/タスク機能の実装～
【Laravel×Vue】メモアプリ制作の記録④～テーブルの関連付け～
参考
Vue.jsの書き方実例集(随時追加)※逆引きリファレンス的な
Laravel+Vue.jsでVue.jsの使い方を考えてみたNotSPA
【Vue】単一ファイルコンポーネントの命名規則まとめ【ファイル名から記法まで】
