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

本文目标主要介绍 通过 ajax+cookie 实现文章访问量和点赞数量的动态更新,并且在一次会话中,不会重复增加。即刷新网页,访问量不会增加,点赞数量也不能多次增加。

 效果预览

点赞:点赞后再继续点,点赞数不会增加,刷新也不行

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

浏览量:浏览量+1,刷新不会继续增加

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

视图层代码如下

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

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

 

 

本文链接:https://liuyanzhao.com/6175.html

  • 微信
  • 赶快加我聊天吧
  • weinxin
  • 博客交流群
  • 海纳百川,大家来水
  • weinxin
言曌

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar dissertation structure

      感谢楼主的分享