您的位置: 首页  >  文章  >  SSM博客 点赞和文章浏览量实现

SSM博客 点赞和文章浏览量实现

分类: 文章 • 2024-10-03 16:39:46

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

 效果预览

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

SSM博客 点赞和文章浏览量实现

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

SSM博客 点赞和文章浏览量实现

视图层代码如下

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

SSM博客 点赞和文章浏览量实现

 

 

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

相关推荐