问答社区-点赞功能实现
1、点赞
需求
点赞
- 支持对帖子、评论点赞
- 第一次点赞,第二次取消点赞
首页点赞数量
- 统计帖子的点赞数量
详情页点赞数量
- 统计点赞数量
- 显示点赞状态
实现
1、新建个工具类,用来生成redis key的
public class RedisKeyUtil { private static final String SPLIT = ":"; private static final String PREFIX_ENTITY_LIKE = "like:entity"; /** * 某个实体的赞 * 包含实体类型和实体ID信息 * 格式:like:entity:entityType:entityId */ public static String getEntityLikeKey(int entityType, int entityId) { return PREFIX_ENTITY_LIKE + SPLIT + entityType + SPLIT + entityId; } }
2、实现点赞业务,新建likeService,实现like方法
@Service public class LikeService { @Autowired private RedisTemplate redisTemplate; //点赞 public void like(int userId, int entityType, int entityId, int entityUserId) { String entityLikeKey = RedisKeyUtil.getEntityLikeKey(entityType, entityId); Boolean isMember = redisTemplate.opsForSet().isMember(entityLikeKeykey, userId); if (isMember) { redisTemplate.opsForSet().remove(entityLikeKeykey, userId); } else { redisTemplate.opsForSet().add(entityLikeKeykey, userId); } } } //查询某实体点赞的数量 public long findEntityLikeCount(int entityType, int entityId) { String entityLikeKey = RedisKeyUtil.getEntityLikeKey(entityType, entityId); return redisTemplate.opsForSet().size(entityLikeKey); } //查询某人对某实体的点赞状态 public int findEntityLikeStatus(int userId, int entityType, int entityId) { String entityLikeKey = RedisKeyUtil.getEntityLikeKey(entityType, entityId); return redisTemplate.opsForSet().isMember(entityLikeKey, userId) ? 1 : 0; }
3、完成controller层,向前台返回json数据
当点赞触发时,向数据库中新增,并且返回查询到的点赞数、点赞状态,并以json返回
@Controller public class LikeController implements CommunityConstant { @Autowired private LikeService likeService; @Autowired private HostHolder hostHolder; @Autowired private RedisTemplate redisTemplate; @RequestMapping(value = "/like", method = RequestMethod.POST) @ResponseBody public String like(int entityType, int entityId,int entityUserId,int postId) { User user = hostHolder.getUser(); //点赞 likeService.like(user.getId(), entityType, entityId,entityUserId); //数量 long entityLikeCount = likeService.findEntityLikeCount(entityType, entityId); //状态 int entityLikeStatus = user == null ? 0 : likeService.findEntityLikeStatus(user.getId(), entityType, entityId); Map<String, Object> map = new HashMap<>(); map.put("likeCount", entityLikeCount); map.put("likeStatus", entityLikeStatus); return CommunityUtil.getJSONString(0, null, map); } }
4、前台完成相应的显示
当单击“点赞”时,触发js,后端返回数据,前端响应
html
<ul class="d-inline float-right"> <li class="d-inline ml-2"> <a href="javascript:;" th:onclick="|like(this,1,${post.id},${post.userId},${post.id});|" class="text-primary"> <b th:text="${likeStatus==1?'已赞':'赞'}">赞</b> <i th:text="${likeCount}">11</i></a> </li> <li class="d-inline ml-2">|</li> <li class="d-inline ml-2"><a href="#replyform" class="text-primary">回帖 <i th:text="${post.commentCount}">7</i></a></li> </ul>
function like(btn, entityType, entityId, entityUserId,postId) { $.post( CONTEXT_PATH + "/like", {"entityType": entityType, "entityId": entityId,"entityUserId":entityUserId,"postId":postId}, function (data) { data = $.parseJSON(data); if (data.code == 0) { $(btn).children("i").text(data.likeCount); $(btn).children("b").text(data.likeStatus == 1 ? '已赞' : '赞'); } else { alert(data.msg); } } ); }