点赞功能详解
先讲讲点赞功能的实现。
首先,你得为点赞功能建立一个表,表里需要记录点赞的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操作
}
}