html5点赞计数功能,点赞功能
今天琢磨着搞了个点赞功能,因为考虑到个人网站没有根基,所以如果必须要登录才可以点赞的话那绝大部分人肯定转头就走。
如果不登录就可以点赞的话,就要动脑筋去防止刷赞了,我也去看过一些别的网站搞的投票功能,纯粹是以IP来控制,水的不能再水。
表设计如下:
用户ID IP 浏览器信息 加上cookie html5缓存 一共5重关卡 任何一关过不去 都点不了赞
流程从点赞的动作开始:
首先js写个变量isLike标志是否点过赞 初始化为否
点击赞图标后:
$('body').on("click",'#like',function(){
if(false === isLike){
var C=parseInt($("#likeCount").html()); //当前文章点赞数量
$(this).css("background-position","");
$(this).addClass("heartAnimation");//改变赞图标样式
$("#likeCount").html(C+1);//更新文章数量+1
$.ajax({
type: "POST",
dataType:"json",
url: '{:\think\Url::build("Article/like")}',
data: {id:id},//传入文章id
success: function(result) {
localStorage.setItem('like_local_'+id,1);//html5缓存该文章以点过赞
}
});
isLike = true;
}
});
注释也的很清楚了,无论后端如何处理 都视为点赞成功 该变的样式照常变 isLike置为true ,站在用户的角度,既然这个赞图标是暗的,就证明可以点赞,如果点了赞提示失败,肯定要喷口水骂人的。点赞后将点赞记录缓存起来。
后端处理很简单,因个人网站定位,所以我会去判断是否是移动端,不是移动端直接跳过所有流程,这也算是第6重防作弊关卡。
流程为: 判断是否登录,上面的表结构已经贴出来了,user_id是非必填,如果登录则添加,没登录则不添加,浏览器信息 $_SERVER['HTTP_USER_AGENT'] ip用ip2long()函数包起来转成int 往数据库插 添加cookie 后端处理完成
接下来是解决 打开当前页面的时候,如何判断是否点过赞。
//查询点赞信息
$likeModel = new appindexmodelArticle_like();
$likeInfo = $likeModel::all(['article_id'=>$id]);//查出该文章的所有点赞记录
$is_like = 0;//是否点过赞
$ip = ip2long(get_ip());
$isLogin = $this->is_login();
if(0 !== count($likeInfo)){
//如果没有点赞记录 则不用走判断流程了
if( 1 == Cookie::get("like_cookie_".$id) ){
$is_like = 1;
}else{
//如果cookie没记录 再循环校验
foreach($likeInfo as $k => $v){
if($isLogin && $v->user_id == $this->user_info['id']){
//如果已登录并且用户Id存在
$is_like = 1;
}
if($v->browser == $_SERVER['HTTP_USER_AGENT'] || $v->ip == $ip ){
//如果浏览器信息存在或者IP存在
$is_like = 1;
}
}
}
}
$this->assign('is_like',$is_like);
流程走到前端后
判断is_like是1还是0 如果是0再把HTML5缓存校验一下 所有关卡都校验完之后 给点赞图标添加上合适的样式即可。
我这种玩法,已经接近于无缝可钻了。除非换IP 换浏览器 并且手动清理手机缓存 三者缺一不可 方可刷赞 否则滚粗
当用户登录的时候 再拿着用户登录的浏览器信息去点赞表里将相同的浏览器信息记录的user_id给添加上 。
本次杂耍结束,谢谢大家观看。
html5点赞计数功能,点赞功能相关推荐
- Redis如何高效实现点赞、取消点赞功能
点击关注公众号,实用技术文章及时了解 来源:blog.csdn.net/lsy0903/article/details/103949459 基于 SpringCloud, 用户发起点赞.取消点赞后先存 ...
- 【探花交友DAY 06】圈子中的互动功能(点赞、评论、喜欢)
1. 圈子中的互动功能的分析与设计 1.1 数据库的原则 经过我们分析,圈子中的互动数据有一下特点: 数据量非常大 数据变化迅速 数据价值相对较低 综上,我们采用MongoDB来存储圈子中的互动数据 ...
- 微信小程序——点赞和取消点赞功能的实现
这个项目是一个有前后端的微信小程序,能够发布和查看论文,并可以给论文点赞.这篇文章主要介绍点赞和取消点赞功能的实现. 一.成果展示 用户没有点赞的状态(可能有点看不清,是一个空的心的图标). 点一下之 ...
- java点赞_java实现点赞功能示例
最近做了一个评论的点赞功能,感觉有必要记录一下. 思路: 点赞功能,看起来挺简单,但是做的高效稳定还是需要一些处理. 归纳思路如下: 1.点赞接口要利用redis做点赞次数限制,比如一分钟之内最多点赞 ...
- 文章点赞以及取消点赞功能
今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下: /*更新点赞*/ update_zan:function(e){ var that = this; va ...
- 微信小程序实现列表页的点赞和取消点赞功能!
今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下: /*更新点赞*/ update_zan:function(e){ var that = this; va ...
- 使用Modernizr 检测HTML5和CSS3浏览器支持功能
http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html 传统浏览器目前不会被完全取代,令你难以将最新的 CSS ...
- html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能(图文详解上篇)...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 因为最近一段时间,一直在弄微信项目,其中涉及到 ...
- h5页面保存img_一文彻底解决HTML5页面中长按保存图片功能
本文详细介绍了如何在H5中实现长按保存图片的功能. 长按保存图片是现在一些宣传页H5中很常见的需求,但是js没有这样的能力,所以要么借助android或ios的原生能力,要么用canvas自己画一个( ...
最新文章
- ES6入门之对象扩展
- 在ASP.NET使用javascript的一点小技巧
- PHP svn开发环境搭建,手把手搭建WAMP+PHP+SVN开发环境,wampsvn_PHP教程
- 计算机视觉-SIFT
- 使用Python+tkinter编写电脑桌面放大镜程序
- php程序如何保证3秒作出响应,这个留言本的响应时间总是在3秒左右,如何优化?...
- SQL数据查询之——单表查询
- Drools 规则引擎的使用
- web前端大一实训 HTML+CSS+JavaScript王者荣耀(60页) web课程设计网页规划与设计 HTML期末大作业 HTML网页设计结课作业...
- 常用连接服务器的ssh工具
- ancestor descendant选择器
- 写给安卓软件工程师的3条建议,全套教学资料
- 19. RDMA之iWARP Soft-iWARP
- 三联莎士比亚阅读摘记
- 使用HTML制作个人简历
- Android中出现的各种错误
- leetcode-977
- 除草机(Grasscutter) ios/Android客户端配置教程
- 【译】什么是响应式编程
- 题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半;再落下,求它在第10次落地时,共经过多少米?第10次反弹多高?