web页面 之 超人性的点赞与狂踩
点赞
我们在浏览一些文章或博客的时候，都看到过文章后有个赞或是踩，我们也都支持或是踩过！不知大家有没有这样的体验，就是：你随手点了一下，想撤销都撤不掉！！！哪怕是把鼠标点烂，他就是取消不掉！！！好气哦！有没有！同时一点也不人性化：可以让我取消了，我再点别的啊！或是我随手点错了，你不让我撤销，人家辛辛苦苦写出来的文章看到个踩，让作者怎么想？！所以我就想把这个做成可变动的！苦心专研还真实现了！！！以下就是关于点赞与狂踩的分享！
鄙人写的这个在HTML模版页面中，使用了font-awesome这个前端组件中的样式！使用时记得要导入哦！！！再者点赞与狂踩JS代码整合成了一个函数！！！
<div class="articles_post_btn"> <div id="div_digg"> <div class="thumbs_up" id="ThumbsUp" num="1" onclick="upDown(this);"> <span class="DiggNums" id="ThumbsCount">{{数据库中的数据,自行动态获取!}}</span> <span class="DiggBtn"> <i class="fa fa-thumbs-up" aria-hidden="true"></i>点赞</span> </div> <div class="step_on" id="StepOn" num="0" onclick="upDown(this);"> <span class="DiggNums" id="StepCount">{{数据库中的数据,自行动态获取!}}</span> <span class="DiggBtn"> <i class="fa fa-thumbs-down" aria-hidden="true"></i>狂踩</span> </div> <span id="err" style="color:red;"></span> </div> </div>
div.articles_post_btn{ width: 97%; height:auto!important; overflow: hidden; } div#div_digg{ width: 125px; height: auto!important; margin-top: 10px; margin-bottom: 10px; margin-left: 84%; text-align: center; font-size: 12px; /*background-color: #b92c28;*/ position: relative; overflow: hidden; } div.thumbs_up,div.step_on{ display: inline-block; width: auto!important; height: auto!important; min-width: 46px; min-height: 55px; margin-left: 10px; margin-top: 2px; padding-top:5px; text-align: center; color: #1b6d85; vertical-align: baseline; background-color: #f7f7f7; border-radius: 3px; } span.DiggNums{ display: block; font-size: 14px; color: #075db3; padding: 3px 0; margin-bottom: 5px; border-radius: 5px; } span#ThumbsCount{ background-color: #f2dede; } span#StepCount{ background-color: #e3e3e3; } span.DiggBtn{ display: block; padding-bottom: 5px; font-size: 13px; font-weight: 600; }
$(function () { var $art_id = $("#arts_id").text(); var $user_id = $("#user_id").text(); upDown = function (ths) { var num = $(ths).attr("num"); var csrf = $('input[name="csrfmiddlewaretoken"]').val(); $.ajax({ url:"/upordown/", // headers:{'X-CSRFToken':$.cookie('csrftoken')}, type:"POST", data:{"num":num,"articles_id":$art_id,"user_id":$user_id,'csrfmiddlewaretoken':csrf}, dataType:"JSON", success:function (arg) { if(arg.status){ if(num == 1){ $("#ThumbsCount").text(arg.counts); $("#err").text(""); }else{ $("#StepCount").text(arg.counts); $("#err").text(""); } } else { $("#err").text(arg.message) } } }); }; // $("#ThumbsUp").click(function () { // $.ajax({ // url:"/upordown/", // type:"POST", // data:{"num":1,"articles_id":$art_id,"user_id":$user_id,csrfmiddlewaretoken:"{{ csrf_token }}"}, // dataType:"JSON", // success:function (arg) { // if(arg.status){ // $("#ThumbsCount").text(arg.counts); // $("#err").text(""); // } else { // $("#rr").text(arg.message) // } // } // }) // }); // // $("#StepOn").click(function () { // $.ajax({ // url:"/upordown/", // type:"POST", // data:{"num":0,"articles_id":$art_id,"user_id":$user_id,csrfmiddlewaretoken:'{{ csrf_token }}'}, // dataType:"JSON", // success:function (arg) { // if(arg.status){ // $("#StepCount").text(arg.counts); // $("#err").text(""); // } else { // $("#err").text(arg.message) // } // } // }) // }); });
def upordown(request): """ 用户点赞及狂踩操作 :param request: 请求提交的相关信息 :return: #为页面Ajax返回的信息 """ ret = {"status": True, "message": None,"counts":None} users = request.session.get("users") up = request.POST.get("num") #从模版传回的信息全部是字符串类型 article_id = request.POST.get("articles_id") comment_id = request.POST.get("user_id") if not users: #如果用户未登录 ret["status"] = False ret["message"] = "请先登录再操作!" return HttpResponse(json.dumps(ret)) else: #用户登录 判断是否博客所属是不是当前用户 user_id = users["nid"] if int(user_id) == int(comment_id): #如果是当前用户的话，返回信息 不能自己给自己点赞或踩 ret["status"] = False ret["message"] = "对不起，不能给自己点赞或踩!" return HttpResponse(json.dumps(ret)) else: #如果不是的话，就从数据库中去筛选 n = models.UpDown.objects.filter(article_id=article_id,user_id=user_id).values("up").first() #从数据表中查询相关信息 create_dict = {"up": up, "article_id": article_id, "user_id": user_id, } if not n: #判断 如果没有在数据库中找到，则新添加一条数据 with transaction.atomic(): #事务操作，出错回滚 if int(up) == 1: #是点赞的话， models.UpDown.objects.create(**create_dict) #点赞或是踩表创建一条数据 models.Article.objects.filter(nid=article_id).update(up_count=F("up_count")+1) #文章表对应的数据加1 currentid = models.Article.objects.filter(nid=article_id).values("up_count").first() #获取对应的数据，返回 ret["counts"]=currentid["up_count"] else: #是狂踩的话，原理同上 models.UpDown.objects.create(**create_dict) models.Article.objects.filter(nid=article_id).update(down_count=F("down_count") + 1) currentid = models.Article.objects.filter(nid=article_id).values("down_count").first() ret["counts"] = currentid["down_count"] return HttpResponse(json.dumps(ret)) else: #如果查询的结果存在的话，说明已经赞或是踩过，判断这两次的操作是否相同 if int(n["up"]) != int(up): #如果不相同的话，返回信息 ret["status"] = False ret["message"] = "已完成赞或踩，不能重复操作！" return HttpResponse(json.dumps(ret)) else: #如果相同的话，就把对应的操作取消掉！！！ with transaction.atomic(): # 事务操作，出错回滚 把对应的点赞或是踩取消 if int(up) == 0: #如果为0的话，就把踩的次数取消 models.Article.objects.filter(nid=article_id).update(down_count=F("down_count") - 1) currentid = models.Article.objects.filter(nid=article_id).values("down_count").first() ret["counts"] = currentid["down_count"] models.UpDown.objects.filter(article_id=article_id, user_id=user_id).delete() else: #如果为1的话，就把赞的次数取消 models.Article.objects.filter(nid=article_id).update(up_count=F("up_count") - 1) currentid = models.Article.objects.filter(nid=article_id).values("up_count").first() ret["counts"] = currentid["up_count"] models.UpDown.objects.filter(article_id=article_id, user_id=user_id).delete() return HttpResponse(json.dumps(ret))
url(r'^upordown/',views.upordown,),
