一、点赞和踩灭
1、事务
事务:要么同时发生,要么同时不发生,文章点赞表增加一条数据的时候,对应的文章的点赞或者踩灭数加1,如果后面的if语句不能执行,则根据事务,点赞表也不会增加数据
from django.db import transaction #引入transaction事务 with transaction.atomic(): obj = ArticleUpDown.objects.create(user_id=user_pk, article_id=article_id, is_up=is_up) #文章点赞表里面添加一条数据 if is_up: Article.objects.filter(pk=article_id).update(up_count=F("up_count") + 1) #文章表相应的文章的点赞数加1 else: Article.objects.filter(pk=article_id).update(down_count=F("down_count") + 1) #文章表相应的文章的踩灭数加1
2、render方法
浏览器给服务器发送一个请求,视图函数从模板中取到html页面,如果页面里面有模板语法,如{{ }}、{% %},render方法会先对其进行渲染,将模板语法替换为相应的html标签,
最后将标签返回给浏览器,所以如果js在html页面,那么就可以使用模板语法,而如果将js单独做成一个静态文件,则不能使用模板语法。
3、点赞的视图函数和页面
views.py文件增加点赞视图:
import json from django.http import JsonResponse from django.db.models import F from django.db import transaction def digg(request): res={"state":True} #状态为true代表点赞,false为踩灭 user_pk=request.user.pk # 当前登录用户,即点赞用户,request.user是全局变量 article_id=request.POST.get("article_id") is_up=request.POST.get("is_up") #因为js默认post是urlencode,发送的是字符串,所以这里接收到的就是字符串 is_up=json.loads(is_up) #将收到的字符串通过json序列化为我们需要的布尔值 try: with transaction.atomic(): #事务 obj=ArticleUpDown.objects.create(user_id=user_pk,article_id=article_id,is_up=is_up) if is_up: Article.objects.filter(pk=article_id).update(up_count=F("up_count")+1) else: Article.objects.filter(pk=article_id).update(down_count=F("down_count") + 1) except Exception as e: res["state"]=False #变成踩灭状态 res["first_action"]=ArticleUpDown.objects.filter(user_id=user_pk,article_id=article_id).first().is_up #返回给ajax的数据多了first_action属性 return JsonResponse(res) #返回给ajax的时候,ajax不用反序列化,接收到的是一个字典格式
article_detail.html页面:
{% extends "base.html" %} {% block content %}{{ article_obj.title }}
{{ article_obj.articledetail.content|safe }}{#为了在静态文件article_detail.js中取到html页面的变量#} {% csrf_token %} {% endblock %} 因为我们的html是继承的base.html页面,所有要在base.html页面引入{{ article_obj.up_count }}{{ article_obj.down_count }}
article_detail.css样式代码:
#div_digg { float: right; margin-bottom: 10px; margin-right: 30px; font-size: 12px; width: 125px; text-align: center; margin-top: 10px; } .diggit { float: left; width: 46px; height: 52px; background: url('/static/img/upup.gif') no-repeat; /*引用的网站的图片会因为网站做的防盗链而使图片无妨访问,所以要把图片下载到本地*/ text-align: center; cursor: pointer; margin-top: 2px; padding-top: 5px; } .buryit { float: right; margin-left: 20px; width: 46px; height: 52px; background: url('/static/img/downdown.gif') no-repeat; text-align: center; cursor: pointer; margin-top: 2px; padding-top: 5px; } .clear { clear: both; }
article_detail.js代码:
$(".action").click(function () { if ($(".info").attr("username")) { //表示当前用户登录 var is_up; is_up = $(this).hasClass("diggit"); article_id = $(".info").attr("article_id"); //根据属性查找取到article_detail.html页面article_id的值 // $.ajax({ url: "blog/digg/", type: "post", data: { is_up: is_up, article_id: article_id, csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val() //防止出现404 forbidden错误 }, success: function (data) { if (data.state) { // 点赞或者踩灭成功 if (is_up) { // 点赞成功 var val = $("#digg_count").text(); val = parseInt(val) + 1; $("#digg_count").text(val); } else { // 踩灭成功 var val = $("#bury_count").text(); val = parseInt(val) + 1; $("#bury_count").text(val); } } else { //重复提交 console.log(data.first_action); if (data.first_action) { $("#digg_tips").html("您已经推荐过了"); setTimeout(function () { // 1秒后下面的消息不显示 $("#digg_tips").html(""); }, 1000) } else { $("#digg_tips").html("您已经反对过了"); setTimeout(function () { $("#digg_tips").html(""); }, 1000) } } } }) } else{ //用户必须登录后才能进行点赞、踩灭 # var s="请登陆!"; # $("#div_digg").after(s); //返回给用户“请登陆”信息 location.href = "/login/?next=" + location.pathname //直接调转到用户登录页面 } });
二、评论
1、js取标签里的值
select标签 .val(); input标签 .val(); textarea标签 .val(); div标签、span标签取里面值的时候用.html()或.text();
2、评论楼:
article_detail.html页面:
{% extends "base.html" %} {% block content %}{{ article_obj.title }}
{{ article_obj.articledetail.content|safe }}
-
评论楼:
{% for comment in comment_list %}
-
#{{ forloop.counter }}楼 {{ comment.create_time|date:"Y-m-d H:i" }} {#显示时间,格式为年-月-日 时:分#} {{ comment.user.username }} {#评论人,当前评论的评论名#} 回复{% if comment.parent_comment_id %} {#评论是子评论#}@{{ comment.parent_comment.user.username }} : {{ comment.parent_comment.content }}{% else %} {#评论是根评论#}
{{ comment.content }}{{ comment.content }}
{% endfor %}
昵称:
评论内容
article_detail.css代码:
input.author { background-image: url("/static/img/icon_form.gif"); background-repeat: no-repeat; border: 1px solid #ccc; padding: 4px 4px 4px 30px; width: 300px; font-size: 13px; } .comment_item .comment_con{ margin-top: 10px; margin-left: 20px; } .conmment_item{ margin-left: 20px; } .comment { width: 820px; } .parent_comment_infon{ position: relative; margin: 0 40px 0 40px; border: #ccc 1px dashed; padding: 1px; color: grey; font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: normal; text-decoration: none; } .comment_con{ position: relative; margin: 0 10px 0 10px; border: #ccc 1px dashed; padding: 5px; color: black; font-family: Arial,Helvetica,sans-serif; font-size: 15px; font-weight: normal; text-decoration: none; } .temp { background-color: gainsboro; }
views.py文件增加评论楼视图:
# 评论 def comment(request): user_pk=request.user.pk article_id=request.POST.get("article_id") content=request.POST.get("content") pid=request.POST.get("pid") response={} with transaction.atomic(): #事件 if not pid: # pid为空表示根评论 comment_obj=Comment.objects.create(user_id=user_pk,article_id=article_id,content=content) # 提交根评论 else: # 子评论 comment_obj = Comment.objects.create(user_id=user_pk, article_id=article_id, content=content,parent_comment_id=pid) # 提交子评论 Article.objects.filter(pk=article_id).update(comment_count=F("comment_count")+1) response["ctime"]=comment_obj.create_time.strftime("%Y-%m-%d %H:%M") #返回给ajax的创建时间,时间格式为%Y-%m-%d %H:%M response["content"]=comment_obj.content #返回给ajax的评论内容 return JsonResponse(response) def article_detail(request,username,article_id): user = UserInfo.objects.filter(username=username).first() # 查当前站点的用户对象 blog = user.blog article_obj=Article.objects.filter(pk=article_id).first() comment_list=Comment.objects.filter(article_id=article_id) return render(request,"article_detail.html",locals())
3、评论树:
article_detail.html页面添加评论树代码:
评论树
views.py文件增加评论树视图函数:
def comment_tree(request,article_id): comment_list=list(Comment.objects.filter(article_id=article_id).values("content","pk","parent_comment_id")) print(comment_list) return JsonResponse(comment_list,safe=False) #JsonResponse返回的是列表,需要参数safe=False处理