Laravel中添加点赞功能并实现一个用户只能点赞一次或取消点赞功能

目录

前言：在完成内容管理系统的过程中，点赞功能也是其中之一比较有趣且不可或缺的小功能。我在完成点赞功能之余，也依据需求做了些略有不同的点赞功能，遂有了今天这篇文章

一、前台模板点赞功能

1、创建数据表

（1）当我们已经创建并完善好内容详细页后，为了实现点赞功能，我们要先在控制台中创建一个点赞表对应的迁移文件，具体命令如下：

（2）为了在项目中操作点赞表，我们需要创建点赞表对应的模型文件，具体命令如下

2、显示点赞数量

（1）实现点赞功能前，我们需要先显示点赞数量，因此，我们需要先在Index控制器的detail()方法中获取内容点赞数量，代码如下

(2)我们需要在Index控制器中导入Like模型的命名空间，代码如下：

(3)接下来在内容详细页中点赞模块显示点赞数量，代码如下：

3、实现点赞功能

（1）实现点赞功能，我们需要先为点赞按钮做一个单击事件，我们在内容详细页的底部添加一个

（2）然后我们需要在Index控制器中添加like()方法，代码如下：

至此，我们的点赞功能就完成了，但是这个点赞功能一个用户可以无限次数点击，显然是不合理的，那么接下来，我们需要实现一个用户只能点赞一次的功能

4、实现一个用户只能点赞一次的功能

（1）实现这个功能其实很简单，前面我们已经将点赞功能的实现与显示完成，只需要在Index控制器的like()方法中添加一段代码，代码如下

5、实现用户可以取消点赞功能

（1）如果有时候手抖不小心点赞了，却又不想给作者赞，那么显然很需要一个可以取消点赞功能，依然在还是Index控制器的like()方法中，将上述只能点赞一次的代码改为：

---

一、前台模板点赞功能

1、创建数据表

（1）当我们已经创建并完善好内容详细页后，为了实现点赞功能，我们要先在控制台中创建一个点赞表对应的迁移文件，具体命令如下：

php artisan make:migration create_likes_table

并在迁移文件的up()方法中添加表结构信息，具体代码如下

.

   public function up()
    {
        Schema::create('likes', function (Blueprint $table) {
            $table->increments('id')->comment('主键');
            $table->integer('uid')->comment('用户id');
            $table->integer('cid')->comment('内容id');
            $table->timestamps();
        });
    }

其中,点赞表的字段有id、uid（用户id）、cid（内容id）、created_at()（创建时间）和updated_at（更新时间）。

uid字段是用户表的主键，cid字段是内容表的主键，created_at()（创建时间）和updated_at（更新时间）是由timestamps()方法自动创建的。

（2）为了在项目中操作点赞表，我们需要创建点赞表对应的模型文件，具体命令如下

PHP artisan make:model Like

执行命令后，会自动创建Like.php文件，具体代码如下：

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Like extends Model
{
    public $fillable = ['cid', 'uid'];
    }

2、显示点赞数量

（1）实现点赞功能前，我们需要先显示点赞数量，因此，我们需要先在Index控制器的detail()方法中获取内容点赞数量，代码如下

 public function detail($id)
    {
        //......（原有在制作内容详细页中已完成的接受内容id，根据id获取内容信息的代码）
        $count = Like::where('cid', $id)->get()->count();
        return view('detail', ['id' => $content->id, 'cid' => $content->cid,
            'content' => $content, 'count' =>$count ]);
    }

 这段代码用于获取内容的点赞数量，并将获取的结果发送到页面

而其中

$count = Like::where('cid', $id)->get()->count();

这行代码查询数据库中Like模型中满足条件cid字段与变量$id相等的记录的数量，并将数量赋值给变量$count。这个数量表示点赞的总数。

 return view('detail', ['id' => $content->id, 'cid' => $content->cid,
            'content' => $content, 'count' =>$count]);

 这行代码返回一个名为detail的视图页面，并将相关的数据传递给视图页面。传递的数据包括id、cid、content和count。这些数据将在视图页面中用于显示对应的内容。

(2)我们需要在Index控制器中导入Like模型的命名空间，代码如下：

use App\Like

(3)接下来在内容详细页中点赞模块显示点赞数量，代码如下：

 @if(session()->has('users'))
            <div class="main-article-like">
              <span>
              <i class="fa fa-thumbs-up" aria-hidden="true">{{$count}}</i>
              </span>
            </div>
          @endif

@if(session()->has('users'))`：这是一个条件语句，用于检查会话中是否存在名为`users`的键。`session()`函数用于获取当前会话的实例，`has()`方法用于检查会话中是否存在指定的键。如果`users`键存在，则条件成立，执行下面的代码块。

<div class="main-article-like">`：这是一个HTML `<div>` 元素，用于包含点赞区域的内容。

<span>`：这是一个HTML `<span>` 元素，用于包含点赞图标和数量的内容。

<i class="fa fa-thumbs-up" aria-hidden="true">{{$count}}</i>`：这是一个图标，用于显示点赞的图标。`{{$count}}`是一个变量，用于显示点赞的数量。

这段代码的作用是在视图页面中根据会话中的`users`键的存在与否来决定是否显示点赞区域，如果存在，则显示点赞图标和数量。

3、实现点赞功能

（1）实现点赞功能，我们需要先为点赞按钮做一个单击事件，我们在内容详细页的底部添加一个<script>标签，代码如下：

<script>
$(function(){
  $(".fa-thumbs-up").bind("click", function () {
      $.get("{{ url('like', $id) }}", {}, function (result) {
        var count = result.count;
        $(".fa-thumbs-up").html(count);
      });
    });
  });
</script>

单击点赞按钮后，会请求"like"路由，以下是对这段代码的解释：

[1]、$(function(){ ... });`：这是一个jQuery的语法，表示在文档加载完成后执行其中的代码。
$(".fa-thumbs-up").bind("click", function () { ... });`：这是一个事件绑定的方法，表示当页面中的类名为`fa-thumbs-up`的元素被点击时，执行后面的函数。

[2]、$.get("{{ url('like', $id) }}", {}, function (result) { ... });`：这是一个使用GET方法发送异步请求的方法。`{{ url('like', $id) }}`是一个Laravel中的路由生成函数，用于生成点赞的URL，并将`$id`作为参数传递给URL。异步请求的结果会传递给后面的回调函数。

[3]、var count = result.count;`：这是一个用于获取点赞数量的值的语句。`result`是异步请求返回的结果对象，其中包含了点赞数量的属性`count`。

[4]、$(".fa-thumbs-up").html(count);`：这是一个用于更新点赞图标中显示的数量的语句。将点赞数量的值`count`设置为`fa-thumbs-up`元素的HTML内容。

总之，这段代码的作用是在点击点赞图标时，通过异步请求获取点赞数量，并将数量更新到点赞图标的显示中。

（2）然后我们需要在Index控制器中添加like()方法，代码如下：

   public function like($id)
    {
        if(!$id){
            return response()->json(['status'=>'2','msg'=>'缺少参数']);
        }
        @session_start();
        $data = array(
            'uid' => session()->get('users.id'),
            'cid' => $id
        );
        $re = Like::create($data);
        if($re){
            $count = Like::where('cid', $id)->get()->count();
            return response()->json(['status'=>'1', 'msg'=>'点赞成功', 'count'=>$count]);
        }else{
            return response()->json(['status'=>'2', 'msg'=>'点赞失败']);
        }
        

    }

这段代码中

1. 首先，函数接受一个参数$id，用于标识要点赞的内容。

2. 如果$id为空，即缺少参数，函数会返回一个JSON响应，其中包含一个状态码为2和一条消息提示缺少参数。

3. 接下来，函数使用@session_start()语句启动会话，并创建一个关联数组$data，其中包含两个键值对：
   - 'uid'键对应的值是通过session()->get('users.id')获取的当前用户的ID。
   - 'cid'键对应的值是传递给函数的$id参数。

4. 函数使用Like模型的create方法将$data数组插入数据库中的like表，并将插入操作的结果赋值给变量$re。

5. 如果插入操作成功（$re为真），函数将使用Like模型的where方法查询like表中与传递的$id参数匹配的所有记录，并使用count方法获取记录的数量。

6. 最后，函数返回一个JSON响应，其中包含一个状态码为1、一条成功的点赞消息以及点赞数量。

7. 如果插入操作失败（$re为假），函数将返回一个JSON响应，其中包含一个状态码为2和一条点赞失败的消息。

这段代码的作用是处理用户的点赞操作。它会将点赞信息插入数据库，并返回点赞成功或失败的消息以及更新后的点赞数量。

至此，我们的点赞功能就完成了，但是这个点赞功能一个用户可以无限次数点击，显然是不合理的，那么接下来，我们需要实现一个用户只能点赞一次的功能

4、实现一个用户只能点赞一次的功能

（1）实现这个功能其实很简单，前面我们已经将点赞功能的实现与显示完成，只需要在Index控制器的like()方法中添加一段代码，代码如下

//获取当前用户id
        $uid = session()->get('users.id');
        //查询当前用户是否点赞过
        $like = Like::where('uid', $uid)->where('cid', $id)->first();
        if ($like) {
             //若已经点过赞，返回提示信息
               return response()->json(['status'=>'2', 'msg'=>'您已经点过赞了']);
             }

1. 获取当前用户id：
   ```
   $uid = session()->get('users.id');
   ```
   这行代码获取当前用户的id，其中`session()->get('users.id')`是获取当前会话中用户的id。

2. 查询当前用户是否点赞过：
   ```
   $like = Like::where('uid', $uid)->where('cid', $id)->first();
   ```
   这行代码使用`Like`模型对数据库进行查询，检查当前用户是否已经点赞过。`where('uid', $uid)`是查询条件，表示查找`uid`字段等于当前用户id的记录；`where('cid', $id)`是另一个查询条件，表示查找`cid`字段等于给定id的记录。`first()`方法返回查询结果的第一条记录。

3. 判断是否已经点赞过：
   ```
   if ($like) {
       return response()->json(['status'=>'2', 'msg'=>'您已经点过赞了']);
   }
   ```
   这段代码判断是否已经点赞过，如果`$like`存在（即查询到已经点赞的记录），则返回一个JSON响应，其中包含状态码`2`和提示信息"您已经点过赞了"。

这段代码的作用是检查当前用户是否已经点赞过某个内容。如果已经点赞过，则返回一个提示信息。

这段代码的原理是用于处理点赞操作的功能。首先，它获取当前用户的ID，通常是从会话中获取。然后，它使用该用户ID和特定的内容ID（在这里表示为$id）查询数据库中是否存在与该用户和内容相关联的点赞记录。

如果找到了点赞记录（$like存在），则表示当前用户已经点过赞，代码会返回一个JSON响应，包含状态码为2和提示信息"您已经点过赞了"。

如果没有找到点赞记录，则表示当前用户还没有点赞，可以继续执行后续的点赞操作。

5、实现用户可以取消点赞功能

（1）如果有时候手抖不小心点赞了，却又不想给作者赞，那么显然很需要一个可以取消点赞功能，依然在还是Index控制器的like()方法中，将上述只能点赞一次的代码改为：

 //获取当前用户id
        $uid = session()->get('users.id');
        //查询当前用户是否点赞过
        $like = Like::where('uid', $uid)->where('cid', $id)->first();
        //取消点赞功能
        if ($like) {
                //若已经点过赞，删除该点赞记录，并返回取消点赞成功的提示信息
                $like->delete();
                $count = Like::where('cid', $id)->get()->count();
                return response()->json(['status'=>'1', 'msg'=>'取消点赞成功', 'count'=>$count]);
            }

这段代码主要是用来处理取消点赞功能的操作，其中的原理为：

1. 获取当前用户id：
   这一行代码使用`session()`函数获取当前用户的id。`session()->get('users.id')`表示从session中获取名为'users.id'的值，即当前用户的id，并将其赋值给变量$uid。

2. 查询当前用户是否点赞过：
   这一行代码使用Like模型的where方法查询数据库，条件是uid等于$uid（即当前用户id）并且cid等于$id（传入的参数）。使用first方法获取第一条匹配的记录，并将其赋值给变量$like。

3. 取消点赞功能：
   这部分代码是一个条件判断，如果$like存在（即当前用户已经点赞过），则执行以下操作：
   - 使用delete方法删除$like指向的点赞记录。
   - 使用Like模型的where方法再次查询数据库，条件是cid等于$id（传入的参数），获取所有匹配的记录。
   - 使用get方法获取所有匹配的记录，并使用count方法获取点赞数量。
   - 最后，使用response()函数返回一个JSON响应，包含取消点赞成功的提示信息、点赞数量和状态码。

总结一下，这段代码的作用是，首先获取当前用户的id，然后查询当前用户是否已经点赞过。如果已经点赞过，则删除点赞记录并返回取消点赞成功的提示信息和最新的点赞数量。

至此，我们的点赞功能就实现完毕了。