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

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

效果预览

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

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

视图层代码如下

1、点赞的 html 部分

<span class="like">
<a href="javascript:;" data-action="ding" data-id="1" title="点赞" class="favorite">
<i class="fa fa-thumbs-up"></i>赞
<i class="likeCount">${articleCustom.articleLikeCount}</i>
</a>
</span>

2、文章浏览量 html 部分

<li class="views">
<i class="fa fa-eye"></i><i class="viewCount"> ${articleCustom.articleViewCount}</i> views
</li>

3、js 代码

<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
<script type="text/javascript">
function increaseViewCount() {
if($.cookie("viewId")!=${articleCustom.articleId}) {
$.ajax({
async: false,
type:"POST",
url:"${pageContext.request.contextPath}/article/view",
data: {articleId:${articleCustom.articleId}},
dataType:"text",
success:function (data) {
$(".viewCount").html(data);
$.cookie(
"viewId",
${articleCustom.articleId},//需要cookie写入的业务
{
"path":"/", //cookie的默认属性
}
);
},
error:function()
{
//alert("获取数据出错!");
},
});
}
}
increaseViewCount();
$(".favorite").click(function () {
if($.cookie("likeId")!=${articleCustom.articleId}) {
$.ajax({
async: false,
type:"POST",
url:"${pageContext.request.contextPath}/article/like",
data: {articleId:${articleCustom.articleId}},
dataType:"text",
success:function (data) {
$(".likeCount").html(data);
$.cookie(
"likeId",
${articleCustom.articleId},//需要cookie写入的业务
{
"path":"/", //cookie的默认属性
}
);
},
error:function()
{
//alert("获取数据出错!");
},
});
}
});

控制器代码

//点赞数增加
@RequestMapping(value = "/article/like",method = {RequestMethod.POST})
@ResponseBody
public Integer increaseLikeCount(HttpServletRequest request)
throws Exception {
Integer articleId = Integer.valueOf(request.getParameter("articleId"));
ArticleCustom articleCustom = articleService.getArticleById(articleId);
int articleCount = articleCustom.getArticleLikeCount();
articleCustom.setArticleLikeCount(articleCount + 1);
articleService.updateArticle(articleId, articleCustom);
return articleCount+1;
}
//文章访问量数增加
@RequestMapping(value = "/article/view",method = {RequestMethod.POST})
@ResponseBody
public Integer increaseViewCount(HttpServletRequest request)
throws Exception {
Integer articleId = Integer.valueOf(request.getParameter("articleId"));
ArticleCustom articleCustom = articleService.getArticleById(articleId);
int articleCount = articleCustom.getArticleViewCount();
articleCustom.setArticleViewCount(articleCount + 1);
articleService.updateArticle(articleId, articleCustom);
return articleCount+1;
}

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

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

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

SSM博客点赞和文章浏览量实现相关推荐

利用requests库模拟访问博客来提升文章阅读量
利用requests库模拟访问博客来提升文章阅读量一.概述二.简陋版程序三.升级版程序一.概述有的同学在csdn上写了文章之后,看着自己文章的阅读量,少的可怜,不禁希望能把阅读量快速涨上去, ...
php 文章浏览量缓存,WordPress缓存文章浏览量访问不自动增加怎么办？WordPress缓存导致文章阅读数点赞数不更新...
Wordpress 静态缓存目前对于何先生来说作用不是很大,比较适合一些流量比较大的博客或者网站. 之前接触过 Wordpress 静态缓存,遇到过这个问题后面没有去深究. WordPress缓存文章 ...
Django博客系统(推荐文章数据展示)
1. 添加文章浏览量数据 1.每次请求文章详情时给浏览量+1 try:article=Article.objects.get(id=id) except Article.DoesNotExist:re ...
《恋花蝶的博客》所有文章的官方阅读指引
<恋花蝶的博客>所有文章的官方阅读指引恋花蝶的博客:http://blog.csdn.net/lanphaday 导语至2007年7月4日,我的博客(http://blog.csdn. ...
博客推广优化SEO排名方案大汇总！何必东奔西走这里的博客优化的文章应有尽有！！...
企业博客优化推广精品方案很有深度,很有参考价值．建立博客群博客地址: ①Donews :http://blog.donews.com/default.html ②新浪:http://blog.s ...
快过年了，博客园里的文章也变少了
快过年了,博客园里的文章也变少了,大家都开始休息了吗? 转载于:https://www.cnblogs.com/RobotTech/archive/2008/02/03/1063461.html
使用metablog迁移博客园的文章
有时候我们希望能将自己所有博客园的文章迁移到其他的博客site,大家可能最先想到的就是metablog,没错,只有它了. 首先搜索了一下,很容易搜到老赵这篇文章 "一次批量修改博客文章的经验 ...
怎么博客圆的文章越来越杂?
最近发现怎么博客圆的文章越来越杂? PHP,JAVA等非.NET技术也来拉好象博客圆现在不是一个纯.NET社区拉管理员是不是该采取一些手段来防止这种现象的扩大
.NET Core 实现定时抓取博客园首页文章信息并发送到邮箱
前言大家好,我是晓晨.许久没有更新博客了,今天给大家带来一篇干货型文章,一个每隔5分钟抓取博客园首页文章信息并在第二天的上午9点发送到你的邮箱的小工具.比如我在2018年2月14日,9点来到公司我就 ...
博客版面设计~文章填充
博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博 ...

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

效果预览

视图层代码如下

控制器代码

SSM博客点赞和文章浏览量实现相关推荐

最新文章

热门文章

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

效果预览

视图层代码如下

控制器代码

SSM博客 点赞和文章浏览量实现相关推荐

最新文章

热门文章

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

SSM博客点赞和文章浏览量实现相关推荐