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

avatar 2017年09月03日12:00:13 7 8049 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();
  30.     $(".favorite").click(function () {
  31.         if($.cookie("likeId")!=${articleCustom.articleId}) {
  32.             $.ajax({
  33.                 async: false,
  34.                 type:"POST",
  35.                 url:"${pageContext.request.contextPath}/article/like",
  36.                 data: {articleId:${articleCustom.articleId}},
  37.                 dataType:"text",
  38.                 success:function (data) {
  39.                     $(".likeCount").html(data);
  40.                     $.cookie(
  41.                         "likeId",
  42.                         ${articleCustom.articleId},//需要cookie写入的业务
  43.                         {
  44.                             "path":"/"//cookie的默认属性
  45.                         }
  46.                     );
  47.                 },
  48.                 error:function()
  49.                 {
  50.                     //alert("获取数据出错!");
  51.                 },
  52.             });
  53.         }
  54.     });


控制器代码

  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.     }
  13.     //文章访问量数增加
  14.     @RequestMapping(value = "/article/view",method = {RequestMethod.POST})
  15.     @ResponseBody
  16.     public Integer increaseViewCount(HttpServletRequest request)
  17.         throws Exception {
  18.         Integer articleId = Integer.valueOf(request.getParameter("articleId"));
  19.         ArticleCustom articleCustom = articleService.getArticleById(articleId);
  20.         int articleCount = articleCustom.getArticleViewCount();
  21.         articleCustom.setArticleViewCount(articleCount + 1);
  22.         articleService.updateArticle(articleId, articleCustom);
  23.         return articleCount+1;
  24.     }



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





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







本文链接:https://liuyanzhao.com/6175.html
  • 微信
  • 交流学习,资料分享
  • weinxin
  • 个人淘宝
  • 店铺名:言曌博客咨询部

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

发表评论

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

  

已通过评论:5   待审核评论数:0
  1. avatar 赵吱吱

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

  2. avatar two

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

  3. avatar 小八

    有全代码吗?请问

  4. avatar 阿瓜

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

    • avatar 言曌

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

  5. avatar dissertation structure

    感谢楼主的分享