前回のパート
前回はログアウト機能の実装を行いました
前回で認証まわりの実装が終わったので、今パートからはTodo機能の実装に入っていきます
前回のパートはこちらVue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part5
Todoリストの機能
まず、今回のTodoリストの機能をおさらいしておきます
Todoリストの実装する機能は下記の4点になります
削除や新規作成の際などにアニメーションは付けないシンプルなものになっていますので
アニメーションが欲しい方は、一通り実装が終わった際に自身で挑戦してみてください
- todoの一覧表示
- todoの新規追加
- todoの更新
- todoの削除(完了時)
それでは、上記の4点の実装を行っていきます
まず最初に新規Todoの追加機能の実装から入ります
Laravel側の実装
まずはコントローラーの作成を行います
上記の機能で確認した通り、表示,追加,更新,削除の機能なので
Todo専用の一つのコントローラーである
リソースコントローラーを作成しそれを利用していきます
コマンドにて下記を実行しコントローラーの作成を行ってください
$ php artisan make:controller TodoController --resource
実行で作成されるのが下記のファイルになっているかと思います
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Todo;
use Log;
class TodoController extends Controller
{
public function index()
{
//
}
public function create()
{
//
}
public function store(Request $request)
{
//
}
public function show($id)
{
//
}
public function edit($id)
{
//
}
public function update(Request $request, $id)
{
//
}
public function destroy($id)
{
//
}
}
リソースコントローラーについて、わからない方はこちらを参照ください→こちら
これで、Todoに関する全ての処理を行うコントローラーの作成が終わりました
次にapi.phpに作成したリソースフルコントローラーのルートを定義します
api.phpを開いて下記を追加してください
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
Route::post('/register', 'Auth\RegisterController@register')->name('register');
Route::post('/login', 'Auth\LoginController@login')->name('login');
Route::post('/logout', 'Auth\LoginController@logout')->name('logout');
Route::get('/user', function(){
return Auth::user();
});
Route::resource('/todo', 'TodoController'); //追加
もう少しLaravel側での実装がありますが
一旦Vue側の実装に移ります
Vue側の実装
それでは次に、Vue側で既に作成したTodo.vueを開きそちらを編集していきます
Todo.vueを開いて下記を追加してください
内容については、一つづ説明していきます
<template>
<div>
<Header />
<div class="main-container">
{{ user.name }}のTodoリスト //・・・①
<v-text-field v-model="text" label="todo" required></v-text-field>
<v-btn class="btn" @click="create">登録</v-btn> //・・・②
<template v-for="item in items">
<v-card max-width="450" class="mx-auto" style="marign-top: 10px" :key="item.id">
<v-list three-line>
<v-list-item :key="item.id">
<v-list-item-content>
<input type="text" v-model="item.text"> //・・・③
<v-btn small>完了</v-btn>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</template>
</div>
</div>
</template>
<script>
import Header from './Header';
import axios from 'axios';
export default {
components: {
Header
},
metaInfo: {
title: 'Todo',
htmlAttrs: {
lang: 'ja'
}
},
created () { //・・・④
const user = this.$store.getters['auth/user'];
if (user === null) {
this.$router.push('/login');
}
},
computed: {
user() { //・・・⑤
return this.$store.getters['auth/user'];
}
},
data () {
return {
items: [ //・・・⑥
{ id: 1, text: 'テスト'},
{ id: 2, text: 'テスト'}
],
text: ''
}
},
methods: {
async create() { //・・・⑦
await axios.post('/api/todo', { text: this.text });
axios.get('/api/todo/' + this.user.id)
.then((res) => {
const newItem = res.data.slice(-1)[0];
this.items.push(newItem);
})
this.text = '';
},
}
}
</script>
<style>
.main-container {
width: 500px;
margin: auto;
}
.btn {
margin-bottom: 20px;
}
</style>
①は認証ユーザーの情報のVuexで保管してるデータを所得して、ユーザーの名前を表示しています
②クリックイベントでtodoの登録処理のメソッドを発火させます
③今後の機能実装でtodoの内容を表示し書き換えて変更など出来る様に<input>にv-modelで現在のダミーのデータを表示しています
④ログインしているかをチェックしています。ログインしていなければ/loginにリダイレクトされる様にしています
⑤こちらは①でユーザー名を参照するためにcomputedを使ってauth.jsのgetterを利用してstateのuserの情報を所得しています
⑥現在はtodo内容の表示機能がないため、ダミーデータを配置してます
⑦実際のtodoの登録処理のメソッドになります。詳しくは下で話します
⑦のメソッドについて説明します
ここで行っている処理は、フォームに追加したいtodoの内容が入力され登録ボタンが押されると
Laravel側の先ほど定義した/todoに対してPOSTリクエストを送信します
そうすることでLaravelで作成したTodoController.phpのstore()アクションが呼び出されます
store()には登録したい内容であるtodoの内容を送ります
それがここの第二引数で指定しています
await axios.post('/api/todo', { text: this.text });
これを受け取ったLaravel側のTodoController.phpのstore()アクションがDBに登録処理を行います
その後/todoに対して最新のtodoの情報を所得し
const newItem = res.dataslice(-1)[0]こちらでそのデータの最後(今回登録したデータ)を所得し
this.items.push(newItem)としてitemsに追加してVue側に反映しています
上記で登録処理をするにあったって、Vue側で必要な実装は完了しましたので
残るは、TodoController.phpのstore()アクションの実装を行えば登録ができるようになります
store()アクションの機能実装
それでは、VueからリクエストでPOSTされて送られてきたデータをLaravel側でDBに登録する処理を
store()に記述していきます
TodoController.phpを開きstore()に下記を追加してください
public function store(Request $request)
{
$request->user()->tasks()->create($request->all());
return response('', 200);
}
$request->user()で現在の認証されているユーザーを所得しtasks()はリレーションで
Userのidとtodoのuser_idを紐づけています
tasks()->create($request->all())ここで新規追加を行っています
リレーションの設定はこのあと行います
User.phpを開いてリレーションを定義していきます
<?php
namespace App;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use App\Todo;
class User extends Authenticatable
{
use Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'email', 'password',
];
/**
* The attributes that should be hidden for arrays.
*
* @var array
*/
protected $hidden = [
'password', 'remember_token',
];
/**
* The attributes that should be cast to native types.
*
* @var array
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
public function tasks() { //追加
return $this->hasMany(Todo::class);
}
}
次にTodo::create($request->all())を実行するためにTodoモデルの作成と編集を行います
コマンドにて下記を実行してください
$ php artisan make:model Todo
上記を実行することで、appディレクトリ配下にTodo.phpが作成されます
これが、todosテーブルと紐づいたTodoのモデルになります
それでは、Todo.phpに下記を追加してください
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes; //追加
class Todo extends Model
{
use SoftDeletes; //追加
protected $fillable = [ //追加
'user_id','text'
];
}
ここではSoftDeletes(論理削除)を利用するための記述と
$fillabelを追加しました
論理削除はIlluminate\Database\Eloquent\SoftDeletesをuseで追加しモデル内でuse SoftDeletesとすることで利用できます
protected $fillabelここでuser_idとtextを指定してます
todosテーブルのuser_idとtextを一括で更新をすることを許可しています
これを行うことで、先ほど記述したstore()内の処理で登録が行えます
これでtodo登録に必要な処理は一通り実装できました
一度フォームに入力して登録ボタンをクリックしてみてください
その後、DBのtodosテーブルに実際に登録できているかを確認してみてください
無事データがあれば完了です
確認方法が分からない方は、このまま一旦進んでください
次回のパートで表示機能を作りますので、そこで正常に登録が行えてるのかも確認できます
終わりに
今回は、todoの登録機能を実装しました
残る機能は、表示,更新,削除です
次回、表示機能の実装を行っていきます
次回のパートはこちら→Vue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part7