（九）Vue项目——轻社区：完成点赞功能—实现点赞和取消点赞

点赞

1.创建点赞表

执行命令。

php think migrate:create Like

打开database\migrations\……_like.php，编写change()方法。

public function change()

{

    $table = $this->table(

        'like',

        ['engine' => 'InnoDB', 'collation' => 'utf8mb4_general_ci']

    );

    $table->addColumn(

        'topic_id',

        'integer',

        ['null' => false, 'default' => 0, 'comment' => '分类id']

    )

    ->addColumn(

        'user_id',

        'integer',

        ['null' => false, 'default' => 0, 'comment' => '用户id']

    )

    ->addTimestamps()

    ->create();

}

执行迁移。

php think migrate:run

2.显示点赞按钮

打开src\components\topic\Show.vue，先获取当前主题的“点赞”状态。

data () {

  return {

    ……（原有代码）

    isLike: null

  }

},

获取状态。

created () {

  this.getTopic()

  this.getLike()

},

methods: {

  ……（原有代码）

  getLike () {

    this.$http.get('like/isLike', { params: { id: this.id } }).then(res => {

      if (res.data.code === 1) {

        this.isLike = res.data.data.isLike

      }

    }).catch(() => {

      this.$toastr.e('加载失败，服务器异常。')

    })

  },

}

打开route\route.php，添加服务器路由。

Route::get('like/isLike', 'api/Like/isLike');

创建application\api\controller\Like.php。

<?php

namespace app\api\controller;

class Like extends Common

{

    public function isLike()

    {

    }

}

创建application\api\model\Like.php模型。

<?php

namespace app\api\model;

use think\Model;

class Like extends Model

{

}

在application\api\controller\Like.php中导入命名空间。

use app\api\model\Like as LikeModel;

在application\api\controller\Like.php中编写isLike()方法。

public function isLike()

{

    $id = $this->request->get('id/d', 0);

    $like = LikeModel::field('id')->where([

        'topic_id' => $id,

        'user_id' => $this->user->id

    ])->find();

    $this->success('', null, ['isLike' => !empty($like)]);

}

打开src\components\topic\Show.vue，在页面中添加“点赞”链接。

<div>

  <h5>{{topic.title}}</h5>

  <span class="small text-muted">作者 {{ topic.user.name }} / 阅读数 {{ topic.hits }} / 点赞数 {{ topic.likenum }}</span>

  <span v-if="isLike !== null">

    <button v-if="isLike" type="button" class="btn btn-link opt" @click="likeTopic(false)">

      <i class="fa fa-thumbs-up"></i> 取消点赞

    </button>

    <button v-else type="button" class="btn btn-link opt" @click="likeTopic(true)">

      <i class="fa fa-thumbs-up"></i> 点赞

    </button>

  </span>

</div>

在methods中编写对应的方法。

methods: {

  ……（原有代码）

  likeTopic (isLike) {

    window.console.log(isLike)

  }

}

查看页面效果。

 3.实现点赞和取消点赞

打开src\components\topic\Show.vue，编写likeTopic()方法。

likeTopic (isLike) {

  var data = { id: this.id, isLike: isLike }

  this.$http.post('like/setLike', data).then(res => {

    if (res.data.code === 1) {

      this.isLike = res.data.data.isLike

      if (isLike) {

        this.topic.likenum++

        this.$toastr.s('点赞成功。')

      } else {

        this.topic.likenum--

        this.$toastr.s('取消点赞成功。')

      }

    }

  }).catch(() => {

    this.$toastr.e('加载失败，服务器异常。')

  })

},

打开route\route.php，编写服务器端路由。

Route::post('like/setLike', 'api/Like/setLike');

打开application\api\controller\Like.php，编写setLike()方法，先查出是否已经点赞。

public function setLike()

{

    $id = $this->request->post('id/d', 0);

    $setLike = $this->request->post('isLike/b', false);

    $like = LikeModel::field('id')->where([

        'topic_id' => $id,

        'user_id' => $this->user->id

    ])->find();

}

然后根据是否已经点赞的情况进行操作。导入命名空间。

use app\api\model\Topic as TopicModel;

继续编写setLike()方法。

public function setLike()

{

    ……（原有代码）

    if ($like) {

        if (!$setLike) {

            $like->delete();

        }

        if ($topic = TopicModel::where('is_show', 1)->get($id)) {

            $topic->setDec('likenum');

        }

    } else {

        if ($setLike) {

            $like = LikeModel::create([

                'topic_id' => $id,

                'user_id' => $this->user->id

            ]);

            if ($topic = TopicModel::where('is_show', 1)->get($id)) {

                $topic->setInc('likenum');

            }

        }

    }

    $this->success('', null, ['isLike' => $setLike]);

}

测试程序，点赞前，结果如下

 

点赞后，结果如下