vue.js laravel で いいね機能を作ろう

定義

・ユーザーにも、記事にも、色々なテーブルに対応できるように
・vue.js , laravel を利用
・コンポーネントにして使いまわしが効くように
・redis でも考えたが、そんなにめちゃくちゃいいねされる訳じゃないし、
いいね順にソートするとき微妙かなと考えたのでmysqlで

今回は ユーザー に対し いいねできるように。

テーブルを作成

users

id,name


iines

id,foreign_key,model(varchar255),user_id,updated_at,created_at

ここまででMYSQLの設定完了

User と iine を関連付ける。

User.php

//User.id  Iine の foreign_key 。さらには model が User のものを紐付ける。
public function iines()
{
	return $this->hasMany('App\Iine','foreign_key')->where('model', 'User');
}

いいねをしたり、いいねしているか取得する。

OkwsController.php

//いいねを取得
public static function getIine(request $request)
{
	$model = new Iine;

	$model->foreign_key = $request->foreign_key;
	$model->user_id = $request->user_id;
	$model->model = $request->model;


	$tmp = $model
	    ->select('id')
	    ->first();

	//要素の存在チェック bool
	if(!empty($tmp->id)){
	    $res = true;
	} else {
	    $res = false;
	}

	return response()->json(['res'=> $res]);

	}

//いいねを追加
	public static function addIine(request $request)
	{
	$model = new Iine;

	$model->foreign_key = $request->foreign_key;
	$model->user_id = $request->user_id;
	$model->model = $request->model;



	$tmp = $model
	    ->select('id')
	    ->first();


	//要素の存在チェック bool
	if(!empty($tmp->id)){
	    $res = false;
	    $model
	        ->where('id',$tmp->id)
	        ->delete();//削除
	} else {
	    $res = true;
	    $model->save();
	}

	return response()->json(['res'=> $res]);

}

あとは、web.phpにも動くようにルーティングを追加。

ここまででLaravel側の設定を完了。

つづいて、vue.js。
まずは、使い回しができるようにComponent化しておく。

IineComponent.vue

<template>

    <div>
        <button v-if="flag" @click="addIine">
            いいね済
        </button>
        <button @click="addIine" v-else>
            いいね
        </button>
        
    </div>

</template>

<script>
    export default {
        props: ['foreign_key','user_id','model'],

        data () {
            return {
                flag:false,
            };
        },

        created () {
            this.getIine();
        },

        methods: {

            //足跡を追加
            addIine(){
                let dataform = new FormData();
                dataform.append('foreign_key',this.foreign_key);
                dataform.append('user_id',this.user_id);
                dataform.append('model',this.model);
                axios.post('/okws/addIine/', dataform).then(e => {
                    this.flag = e.data.res;
                    console.log("いいね成功");
                }).catch((error) => {
                    console.log("エラー");
                });
            },
            //足跡を追加
            getIine(){
                let dataform = new FormData();
                dataform.append('foreign_key',this.foreign_key);
                dataform.append('user_id',this.user_id);
                dataform.append('model',this.model);
                axios.post('/okws/getIine/', dataform).then(e => {
                    this.flag = e.data.res;
                    console.log("いいねできたか取得");
                }).catch((error) => {
                    console.log("エラー");
                });
            },

        },
    }
</script>

つづいては、 Userview.vue から コンポーネントを読み出そう。
foreign_key に 訪問先ページの User.id。
user_id に 現在ログインしている User.id
model は 今回はUser

Userview.vue

<!--500,100,'User'-->
<iine-component :foreign_key="$route.params.id" :user_id="$root.user.id" :model="model"></iine-component>

Userview.vue は app.js でルーティングを忘れずに。

ここまででいいね機能をつけることができました。

■ いいね順に並び替えよう

//        関連モデル hasmany iineをいくつ持っているか で並び替え
        $res = User::withCount('iines')
            ->orderBy('iines_count', 'desc')
            ->get();


        foreach ($res as $v) {
            echo "記事のID : " . $v->id."<br>";
            echo "いいね数 : " . $v->iines_count."<br>";
        }

結果

記事のID : 10186
いいね数 : 2
記事のID : 10185
いいね数 : 1
記事のID : 0
いいね数 : 0

はい。並び替わりましたね♪