【Laravel×Vue】メモアプリ制作の記録③~フォルダ/タスク機能の実装~

はじめに

この記事ではフォルダ機能・タスク機能の実装をしていきます。

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

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のインストールを済ました状態で進めます。

【Axiosの実装】Laravel+Vue.jsでのDB連携

①js/components/Folder.vueの編集

②api.phpの編集

③Karnel.phpの編集

セッションをAPIでも保持できるようにする。参考

ここまでで以下の表示。追加・削除・更新が問題なく動作するか確認します。

まさる
後程タスク機能の実装で処理が増えるのでapi.phpからコントローラに記述を移していく予定です。

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】単一ファイルコンポーネントの命名規則まとめ【ファイル名から記法まで】

[Vue.js] htmlタグと重複するコンポーネント名の命名規則をどうするか

windowオブジェクト

コメントを残す