SSM博客实战(6)–点赞和文章浏览量实现

avatar 2017年09月03日12:00:13 7 8071 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
本文目标主要介绍 通过 ajax+cookie 实现文章访问量和点赞数量的动态更新，并且在一次会话中，不会重复增加。即刷新网页，访问量不会增加，点赞数量也不能多次增加。

 效果预览


点赞：点赞后再继续点，点赞数不会增加，刷新也不行



浏览量：浏览量+1，刷新不会继续增加


视图层代码如下


1、点赞的 html 部分
  1. <span class="like">
  2.      <a href="javascript:;" data-action="ding" data-id="1" title="点赞" class="favorite">
  3.          <i class="fa fa-thumbs-up"></i>赞
  4.          <i class="likeCount">${articleCustom.articleLikeCount}</i>
  5.      </a>
  6.  </span>

2、文章浏览量 html 部分
  1. <li class="views">
  2.       <i class="fa fa-eye"></i><i class="viewCount"> ${articleCustom.articleViewCount}</i> views
  3.   </li>

3、js 代码
  1. <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  2. <script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
  3. <script type="text/javascript">
  4.     function increaseViewCount() {
  5.         if($.cookie("viewId")!=${articleCustom.articleId}) {
  6.             $.ajax({
  7.                 async: false,
  8.                 type:"POST",
  9.                 url:"${pageContext.request.contextPath}/article/view",
  10.                 data: {articleId:${articleCustom.articleId}},
  11.                 dataType:"text",
  12.                 success:function (data) {
  13.                     $(".viewCount").html(data);
  14.                     $.cookie(
  15.                         "viewId",
  16.                         ${articleCustom.articleId},//需要cookie写入的业务
  17.                         {
  18.                             "path":"/", //cookie的默认属性
  19.                         }
  20.                     );
  21.                 },
  22.                 error:function()
  23.                 {
  24.                     //alert("获取数据出错!");
  25.                 },
  26.             });
  27.         }
  28.     }
  29.     increaseViewCount();
  31.     $(".favorite").click(function () {
  32.         if($.cookie("likeId")!=${articleCustom.articleId}) {
  33.             $.ajax({
  34.                 async: false,
  35.                 type:"POST",
  36.                 url:"${pageContext.request.contextPath}/article/like",
  37.                 data: {articleId:${articleCustom.articleId}},
  38.                 dataType:"text",
  39.                 success:function (data) {
  40.                     $(".likeCount").html(data);
  41.                     $.cookie(
  42.                         "likeId",
  43.                         ${articleCustom.articleId},//需要cookie写入的业务
  44.                         {
  45.                             "path":"/", //cookie的默认属性
  46.                         }
  47.                     );
  48.                 },
  49.                 error:function()
  50.                 {
  51.                     //alert("获取数据出错!");
  52.                 },
  53.             });
  54.         }
  55.     });


控制器代码

  1. //点赞数增加
  2.     @RequestMapping(value = "/article/like",method = {RequestMethod.POST})
  3.     @ResponseBody
  4.     public Integer increaseLikeCount(HttpServletRequest request)
  5.         throws Exception {
  6.         Integer articleId = Integer.valueOf(request.getParameter("articleId"));
  7.         ArticleCustom articleCustom = articleService.getArticleById(articleId);
  8.         int articleCount = articleCustom.getArticleLikeCount();
  9.         articleCustom.setArticleLikeCount(articleCount + 1);
  10.         articleService.updateArticle(articleId, articleCustom);
  11.         return articleCount+1;
  12.     }
  14.     //文章访问量数增加
  15.     @RequestMapping(value = "/article/view",method = {RequestMethod.POST})
  16.     @ResponseBody
  17.     public Integer increaseViewCount(HttpServletRequest request)
  18.         throws Exception {
  19.         Integer articleId = Integer.valueOf(request.getParameter("articleId"));
  20.         ArticleCustom articleCustom = articleService.getArticleById(articleId);
  21.         int articleCount = articleCustom.getArticleViewCount();
  22.         articleCustom.setArticleViewCount(articleCount + 1);
  23.         articleService.updateArticle(articleId, articleCustom);
  24.         return articleCount+1;
  25.     }



注意：一定要加 @ResponseBody  注解，否则返回值会被认为是 路径，导致 ajax 返回值类型不对，会出现一直是运行 error 里的部分。





最后我们可以查看浏览器 Cookie，发现里面有我们创建的 Cookie







本文链接：https://liuyanzhao.com/6175.html
历史上的今天
九月
03日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：5   待审核评论数：0
  1. avatar 赵吱吱
    回复 2021年05月20日 11:04:18

    好用！！，大家只要下一个cookies的js然后引入起来即可，地址如下https://plugins.jquery.com/cookie/ 其中${articleCustom.articleId} 替换成自己的id 即可。

  2. avatar two
    回复 2019年09月11日 00:27:59

    这些代码在哪个文件下添加？博主的文章右上角浏览统计是怎么实现的？

  3. avatar 小八
    回复 2019年09月06日 14:56:44

    有全代码吗？请问

  4. avatar 阿瓜
    回复 2019年01月09日 13:48:11

    Integer articleId = Integer.valueOf(request.getParameter("articleId"));这个不是获得文章id的吗？ 后台是怎么使用cookie的，判断是否存在，存在就不修改访问量，直接返回吗？ 代码没体现吗？

    • avatar 言曌
      回复 2019年01月09日 18:35:58

      后台没有用cookie，都是前台做的

  5. avatar dissertation structure
    回复 2017年09月04日 21:22:54

    感谢楼主的分享