在打开文章时,判断用户是否点赞或者收藏,切换显示点赞收藏图标；
Posted 小智RE0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在打开文章时,判断用户是否点赞或者收藏,切换显示点赞收藏图标；相关的知识，希望对你有一定的参考价值。
在做到某项目的文章显示时,考虑到用户的操作体验,添加了用户的点赞,评论,收藏行为;
首先去阿里图标矢量库;找几个关于点赞收藏评论的图标;
下载下来;
找到的这几张图标还不错;
大概写个样式,试试效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width:660px;">
<!-- 点赞图标存放处-->
<div style="width:220px; float: left;">
<a href="javascript:void(0)" onclick="toLink()">
<img style=" width: 74px; height: 74px; margin-right: 146px;" src="img/dzPre.png"/>
</a>
</div>
<!-- 评论图标存放处 -->
<div style="width:220px; float: left;">
<a href="javaScript:void(0)" onclick="toComment()">
<img style=" width: 74px; height: 74px;margin-left: 73px;margin-right: 73px;" src="img/plPre.png"/>
</a>
</div>
<!-- 收藏图标存放处 -->
<div style="width:220px; float: left;">
<a href="javaScript:void(0)" onclick="toCollect()">
<img style=" width: 74px; height: 74px;margin-left: 146px;" src="img/scPre.png"/>
</a>
</div>
<!-- 清除浮动 -->
<div style="clear: left;"></div>
</div>
<!-- 预先留给评论区的区域 -->
<div style="width:660px;" id="commentArea"></div>
</body>
</html>
效果;
然后考虑到该交流平台的实际使用; 若用户没有登录;就直接放置三个白色的点赞,评论,收藏图片;
(使用session进行判断)
然后还需要考虑到该用户若是登录了,就去根据用户的Id和当前文章的Id查询出点赞与收藏关系;
用Map集合将两个结果存储起来;
分别用不同的键"like"和"collect";
然后根据查询到的信息,决定是否为点赞或者收藏了;
最后将取得值存入隐藏的input标签中;
//这里根据用户是否登录,决定是否去查询当前用户是否点赞与收藏了;
if (userAcc != null)
//若登录了,就去查询一下信息;把并且存到下面的隐藏域中,这样的话,后面判断是否点赞/收藏就比较方便了;
$.get("../../showNews/isLikeAndCollectByNewIdAndUserId",
userId: userId,
newId: newId
, function (res)
if (res.code == 500)
alert("哎呦,出错了");
else if (res.code == 200)
//把得到的数据放到隐藏域;
$("input[name='isLike']").val(res.data.like);
$("input[name='isCollect']").val(res.data.collect);
)
控制层处理
/**
* @author by 小智RE0
* 用户登录状态下,根据用户的Id和新闻的Id查询一下是否存在着点赞或者收藏;
* @param userId 用户的Id
* @param newId 新闻的Id
*/
@ResponseBody
@GetMapping(value = "/isLikeAndCollectByNewIdAndUserId")
public CommonResult isLikeAndCollectByNewIdAndUserId(Integer userId,Integer newId)
CommonResult commonResult = null;
try
Map<String,String> isLikeOrCollect =showNewsService.isLikeAndCollectByNewIdAndUserId(userId,newId);
commonResult = new CommonResult(200,"显示新闻时;根据用户Id和新闻Id查询点赞与收藏",isLikeOrCollect);
catch (Exception e)
e.printStackTrace();
commonResult = new CommonResult(500,"显示新闻时;根据用户Id和新闻Id查询点赞与收藏出现异常",null);
return commonResult;
服务层处理
/**
* @author by 小智RE0
* 用户登录状态下,根据用户的Id和新闻的Id查询一下是否存在着点赞或者收藏;
* @param userId 用户的Id
* @param newId 新闻的Id
*/
public Map<String, String> isLikeAndCollectByNewIdAndUserId(Integer userId, Integer newId)
//先查询点赞关系;查询到1的话就说明点赞了
Integer like = showNewsDao.isLikeByNewIdAndUserId(userId,newId);
//在查询收藏关系;查询到1的话就说明收藏了;
Integer collect = showNewsDao.isCollectByNewIdAndUserId(userId,newId);
//测试查看;
System.out.println("-----------当前用户点赞了-------"+like);
System.out.println("-----------当前用户收藏了-------"+collect);
Map<String, String> map = new HashMap<>();
if(like.equals(1))
map.put("like","alreadyLike");
else
map.put("like","noLike");
if(collect.equals(1))
map.put("collect","alreadyCollect");
else
map.put("collect","noCollect");
return map;
数据交互层处理
/**
* 查询新闻与用户的点赞关系,得到结果;0没有点赞/1点赞了
* @param userId 用户Id
* @param newId 新闻Id
*/
Integer isLikeByNewIdAndUserId(@Param("userId") Integer userId, @Param("newId") Integer newId);
/**
* 查询新闻与用户的收藏关系,得到结果;0没有收藏/1收藏了
* @param userId 用户Id
* @param newId 新闻Id
*/
Integer isCollectByNewIdAndUserId(@Param("userId") Integer userId, @Param("newId") Integer newId);
SQL语句
<!--查询新闻与用户的点赞关系: 0:没有点赞 1:点赞了-->
<select id="isLikeByNewIdAndUserId" resultType="integer">
SELECT count(1) FROM user_like_news WHERE user_id = #userId AND news_id = #newId
</select>
<!--查询新闻与用户的收藏关系: 0:没有收藏 1:收藏了-->
<select id="isCollectByNewIdAndUserId" resultType="integer">
select count(1) from user_collect where user_id = #userId and news_id = #newId
</select>
数据表
在文章查询显示的过程中;根据情况判断,进行拼接图片;
收藏且点赞 ;
点赞,未收藏;
未点赞,未收藏;
以上是关于在打开文章时,判断用户是否点赞或者收藏,切换显示点赞收藏图标；的主要内容，如果未能解决你的问题，请参考以下文章