投稿型のサイトを作成していて、
いいね機能を実装したいと思ったので作成しました。
環境
・PHP 7.4.9
・Composer version 1.10.13
・Laravel Framework 7.30.1
・vue/cli 4.3.1
流れ
1.投稿機能の実装(今回の記事では省略)
2.いいね機能用のdatabeseテーブルの作成
3.Vueコンポーネントの作成
4.Controllerの作成
5.ルート設定
6.view表示
実装
1.投稿機能の実装
今回は省略!!
2.いいね機能用のdatabeseテーブルの作成
$ php artisan make:model Like -m
-mをつけることでモデルと一緒にマイグレーションファイルも作ってくれます。
※databaseの設定は省略します。設定はconfigフォルダdatabase.phpと.envを編集
作成したマイグレーションファイルの編集
public function up()
{
Schema::create('likes', function (Blueprint $table) {
$table->id();
$table->integer('posts_id');
$table->integer('user_id')->unable();
$table->integer('like')->default(0);
$table->timestamps();
});
}
likeカラムの値が0か1かでいいねされているかを判断するように実装します
作成したモデルLike.phpの編集
class Like extends Model
{
protected $fillable = [
'posts_id','user_id','like'
];
}
"fillable"はホワイトリストです。$fillableで指定したカラムは値が代入可能です。
マイグレーションの実行
php artisan migrate
3.コントローラーの作成
php artisan make:controller LikeController
Vueのコンポーネントから呼び出されるアクションを書いていきます。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;//投稿機能のモデル
use App\Like;
use Auth;
class LikeController extends Controller
{
//コンポーネント初期読み込み時(created)に呼び出される
public function firstcheck($post) {
$user = Auth::user();
$likes = new Like();
$like = Like::where('posts_id',$post)->where('user_id',$user->id)->first();
if($like) {
$count = $likes->where('posts_id',$post)->where('like',1)->count();
return [$like->like,$count];
} else {
$like = $likes->create([
'user_id' => $user->id,
'posts_id' => $post,
'like' => 0
]);
$count = $likes->where('posts_id',$post)->where('like',1)->count();
return [$like->like,$count];
}
}
//いいねボタンを押した時に呼び出される
public function check($post) {
$user = Auth::user();
$likes = new Like();
$like = Like::where('posts_id',$post)->where('user_id',$user->id)->first();
if($like->like == 1) {
$like->like = 0;
$like->save();
$count = $likes->where('posts_id',$post)->where('like',1)->count();
return [$like->like,$count];
} else {
$like->like = 1;
$like->save();
$count = $likes->where('posts_id',$post)->where('like',1)->count();
return [$like->like,$count];
};
}
}
長くなってきたので次に続く。。。。。。