点赞功能详解

点赞功能详解

先讲讲点赞功能的实现。
首先，你得为点赞功能建立一个表，表里需要记录点赞的topic的ID,已经点赞的人的id.
对应的实体类如下：

package com.example.demo.domain;

import javax.persistence.*;
import java.io.Serializable;
import java.util.Date;

/**
 * @ClassName Praise
 * @Description TODO
 * @Auther ydc
 * @Date 2019/1/25 14:40
 * @Version 1.0
 **/
@Entity
@Table(name = "praise")
/**
 * 点赞
 */
public class Praise extends BaseDomain implements Serializable {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "praise_id")
    private int praiseId;


    @Column(name = "topic_id")
    private int topicId;//被点赞的话题

    @Column(name = "user_id")
    private int userId;//点赞人id

    @Column(name = "praise_time")
    private Date praiseTime;//点赞时间

    public int getPraiseId() {
        return praiseId;
    }

    public int getTopicId() {
        return topicId;
    }

    public int getUserId() {
        return userId;
    }

    public Date getPraiseTime() {
        return praiseTime;
    }

    public void setPraiseId(int praiseId) {
        this.praiseId = praiseId;
    }

    public void setTopicId(int topicId) {
        this.topicId = topicId;
    }

    public void setUserId(int userId) {
        this.userId = userId;
    }

    public void setPraiseTime(Date praiseTime) {
        this.praiseTime = praiseTime;
    }

    public Praise() {
    }

    public Praise(int topicId, int userId, Date praiseTime) {
        this.topicId = topicId;
        this.userId = userId;
        this.praiseTime = praiseTime;
    }
}

与点赞对应的必然是取消点赞，也就是说前端必须有两个按钮，一个是点赞，另一个是取消点赞，并且这两个按钮只能出现一个。先判断你有没有给这个文章点赞，如果你已经点赞了，那么就给你取消点赞的按钮，反之亦然。
点赞以后，前端通过ajax将点赞信息发送到后端，后端保存下点赞信息并且修改文章的点赞次数即可。

 <a th:id="'like' + ${collect.topicId}"  class="sharing-action-button" th:style="'display:' + @{(${collect.isPraise==1} ? 'none' : 'inline-block')} + ''"    th:onclick="'ChangePraise(' + ${collect.topicId} + ');'"> <span class="fa fa-thumbs-o-up"></span>
                                    <show th:id="'likeS' + ${collect.topicId}"  th:text="|点赞(${collect.praise})|" ></show>
                                </a>
                                <!-- <if th:id="'unlikel' + ${collect.topicId}"  th:style="'display:' + @{(${collect.Praise} ? 'inline-block' : 'none')}+ ''" > | </if> -->
                                <a th:id="'unlike' + ${collect.topicId}"  class="sharing-action-button" th:style="'display:' + @{(${collect.isPraise==1} ? 'inline-block' : 'none')}+ ''"    th:onclick="'ChangePraise(' + ${collect.topicId} + ');'">  <span class="fa fa-thumbs-up"></span>
                                    <show th:id="'unlikeS' + ${collect.topicId}" th:text="|取消点赞(${collect.praise})|"></show>
                                </a>

注意下面js的写法

function ChangePraise(id) {
    var userId = document.getElementById("userId").value;
    //console.log(userId);
    //alert(userId);
    console.log(Object.prototype.toString.call(userId));
    if (userId != "0") {
        $.ajax({
            async: false,
            type: 'POST',
            dataType: 'json',
            data: "",
            url: '/topic/like/' + id,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            },
            success: function (like) {
                if ($("#like" + id).is(":hidden")) {
                    $("#like" + id).show();
                    var praiseCount = parseInt($("#praiseC" + id).val()) - 1;
                    $("#praiseC" + id).val(praiseCount);
                    $("#likeS" + id).html("点赞(" + praiseCount + ")");//前端页面的点赞次数，直接修改，不用根据后端来
                    $("#likel" + id).show();
                    $("#unlike" + id).hide();
                    $("#unlikel" + id).hide();
                } else {
                    $("#like" + id).hide();
                    $("#likel" + id).hide();
                    $("#unlike" + id).show();
                    $("#unlikel" + id).show();
                    var praiseCount = parseInt($("#praiseC" + id).val()) + 1;
                    $("#praiseC" + id).val(praiseCount);
                    $("#unlikeS" + id).html("取消点赞(" + praiseCount + ")");
                }
            }
        });
    } else {
        //toast.fail("请先登录");
        window.location.href = "/login";
    }
}

后端

 @RequestMapping("topic/like/{topicId}")
    public ResponseData changePraise(HttpServletRequest request, @PathVariable("topicId") int topicId){
        System.out.println(111);
        try {
            User user = getSessionUser(request);
            praiseServiceImp.like(topicId,user.getUserId());//完成修改
        }
        catch (Exception e){
            System.err.println("有错误");
        }
        return new ResponseData(ExceptionMsg.SUCCESS);
    }

 @Override
    public void like(int topicId, int userId) {
        Praise praise = praiseDao.findByUserIdAndTopicId(userId,topicId);
        Topic topic = topicDao.findByTopicId(topicId);
        if(praise==null){
            praise = new Praise(topicId,userId,new Date());
            praiseDao.save(praise);//先保存点赞信息
            topicDao.updatePraiseByTopicId(topic.getPraise()+1,topicId);//+1操作
        }
        else{
            praiseDao.deleteByPraiseId(praise.getPraiseId());
            topicDao.updatePraiseByTopicId(topic.getPraise()-1,topicId);//-1操作
        }
    }

添加链接描述

项目演示