4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

いいね機能をLaravelとVue.jsで実装①

Posted at

投稿型のサイトを作成していて、
いいね機能を実装したいと思ったので作成しました。

環境

・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];
     };
    }
}

長くなってきたので次に続く。。。。。。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?