在打开文章时,判断用户是否点赞或者收藏,切换显示点赞收藏图标；

最新推荐文章于 2023-01-11 20:06:20 发布

小智RE0

最新推荐文章于 2023-01-11 20:06:20 发布

阅读量2k

点赞数 8

分类专栏：记录文章标签： Java

本文链接：https://blog.csdn.net/MrTumnus/article/details/121984239

版权

记录专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在做到某项目的文章显示时,考虑到用户的操作体验,添加了用户的点赞,评论,收藏行为;

首先去阿里图标矢量库;找几个关于点赞收藏评论的图标;
下载下来;

找到的这几张图标还不错;

大概写个样式,试试效果

<!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>

数据表

在文章查询显示的过程中;根据情况判断,进行拼接图片;

收藏且点赞 ;

点赞,未收藏;

未点赞,未收藏;

小智RE0

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
在打开文章时,判断用户是否点赞或者收藏,切换显示点赞收藏图标；

在做到某项目的文章显示时,考虑到用户的操作体验,添加了用户的点赞,评论,收藏行为;首先去阿里图标矢量库;找几个关于点赞收藏评论的图标;下载下来;找到的这几张图标还不错;<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="width:66.
复制链接

扫一扫