一、点赞和踩灭

样式

先来做样式，修改article_detail.html，增加div_digg的div

  1. {% extends "base.html" %}
  3. {% block content %}
  4.     <div class="article_info">
  5.         <h4 class="text-center">{{ article_obj.title }}</h4>
  6.         <div class="content">
  7.             {{ article_obj.content|safe }}
  8.         </div>
  9.         <div id="div_digg">
  10.             <div class="diggit">
  11.                 <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
  12.             </div>
  13.             <div class="buryit">
  14.                 <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
  15.             </div>
  16.             <div class="clear"></div>
  17.             <div class="diggword" id="digg_tips">
  18.             </div>
  19.         </div>
  20.     </div>
  22. {% endblock %}

在static—>css目录下，创建文件article_detail.css

  1. {% extends "base.html" %}
  3. {% block content %}
  4.     <div class="article_info">
  5.         <h4 class="text-center">{{ article_obj.title }}</h4>
  6.         <div class="content">
  7.             {{ article_obj.content|safe }}
  8.         </div>
  9.         <div id="div_digg">
  10.             <div class="diggit">
  11.                 <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
  12.             </div>
  13.             <div class="buryit">
  14.                 <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
  15.             </div>
  16.             <div class="clear"></div>
  17.             <div class="diggword" id="digg_tips">
  18.             </div>
  19.         </div>
  20.     </div>
  22. {% endblock %}

从博客园拷贝2个图片到static—>img目录下

修改base.html，引入article_detail.css

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="shortcut icon" href="https://common.cnblogs.com/favicon.ico" type="image/x-icon"/>
  7.     {#公共样式#}
  8.     <link rel="stylesheet" href="/static/css/theme/common.css">
  9.     {#个人站点主题样式#}
  10.     <link rel="stylesheet" href="/static/css/theme/{{ blog.theme }}">
  11.     {#bootstrap#}
  12.     <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
  13.     <script src="/static/js/jquery.js"></script>
  14.     <script src="/static/bootstrap/js/bootstrap.js"></script>
  15.     {#文章详情#}
  16.     <link rel="stylesheet" href="/static/css/article_detail.css">
  18. </head>
  19. <body>
  20. <div class="header">
  21.     <p class="title">{{ blog.title }}</p>
  22. </div>
  25. <div class="container-fluid">
  26.     <div class="row">
  27.         <div class="col-md-3">
  28.             {#加载自定义标签模块#}
  29.             {% load my_tags %}
  30.             {#调用get_query_data标签,它返回left_region.html,是已经被渲染过的文件#}
  31.             {% get_query_data username %}
  32.         </div>
  33.         <div class="col-md-9">
  35.             {% block content %}
  37.             {% endblock %}
  39.         </div>
  40.     </div>
  41. </div>
  43. </body>
  44. </html>

点击一篇文章：http://127.0.0.1:8000/xiao/articles/5/

拉到最下面，右侧效果如下：

Day82 点赞和踩灭,用户评论 - 图1

绑定事件

推荐和反对有2个按钮，要绑定2个事件吗？答案是可以，但是不推荐使用！为什么呢？

因为会造成大量代码重复！这2个按钮需要发送的文章id和用户id是一样的，唯一不同的就是：一个是推荐，一个是反对。

修改article_detail.html增加div，测试js代码

注意：在base.html中已经导入了jquery

hasClass() 方法检查被选元素是否包含指定的 class。它返回True和False

  1. {% extends "base.html" %}
  3. {% block content %}
  4.     <div class="article_info">
  5.         <h4 class="text-center">{{ article_obj.title }}</h4>
  6.         <div class="content">
  7.             {{ article_obj.content|safe }}
  8.         </div>
  9.         <div id="div_digg">
  10.             <div class="diggit action">
  11.                 <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
  12.             </div>
  13.             <div class="buryit action">
  14.                 <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
  15.             </div>
  16.             <div class="clear"></div>
  17.             <div class="diggword" id="digg_tips">
  18.             </div>
  19.         </div>
  20.     </div>
  21.     <script>
  22.         $(".action").click(function () {
  23.             {#hasClass() 方法检查被选元素是否包含指定的 class#}
  24.             var is_up = $(this).hasClass("diggit");
  25.             alert(is_up);
  27.         })
  28.     </script>
  30. {% endblock %}

刷新网页，点击文章右下角的推荐，提示true

Day82 点赞和踩灭,用户评论 - 图2

点击反对，提示false

Day82 点赞和踩灭,用户评论 - 图3

发送ajax请求

数据分析

到底是用get还是post呢？有一个规范：查询用get，更改用post

查看blog_articleupdown表，这个是点赞表。插入一条记录，需要3个参数，分别是是否点赞、文章id、用户id

注意：这个用户id是当前登录用户，不是文章作者！

由于在视图函数中，有一个全局变量request.user。它是用户登录之后，才有的！所以这个用户id，不需要传。

只需要传2个值就可以了，分别是是否点赞和文章id。

在article_detail.html中，已经有一个article_obj，它是一个model对象，那么就可以得到文章id。

是否点赞，通过js代码中的is_up变量，也可以知道。

所以发送的数据，不需要使用标签选择器来获取。直接使用即可！

操作流程

  1. 用户点击推荐或者反对，触发点击事件
  2. 发送ajax请求给服务器
  3. 服务器接收参数，生成一条点赞或者踩灭的记录
  4. 服务器将返回结果响应给浏览器，浏览器中的ajax代码的success中的data接收响应体
  5. ajax对响应的数据做判断，操作DOM，显示给用户看！

服务器处理

修改urls.py，增加一个路径digg

  1. urlpatterns = [
  2.     path('admin/', admin.site.urls),
  3.     path('login/', views.login),
  4.     path('index/', views.index),
  5.     path('logout/', views.logout),
  6.     path('', views.index),
  7.     #点赞或者踩灭
  8.     path('digg/', views.digg),
  10.     #文章详情
  11.     re_path('(?P<username>\w+)/articles/(?P<article_id>\d+)/$', views.article_detail),
  12.     # 跳转
  13.     re_path('(?P<username>\w+)/(?P<condition>category|tag|achrive)/(?P<params>.*)/$', views.homesite),
  14.     # 个人站点
  15.     re_path('(?P<username>\w+)/$', views.homesite),
  16. ]

注意：digg要放到文章详情的上面

修改article_detail.html

  1. {% extends "base.html" %}
  3. {% block content %}
  4.     <div class="article_info">
  5.         <h4 class="text-center">{{ article_obj.title }}</h4>
  6.         <div class="content">
  7.             {{ article_obj.content|safe }}
  8.         </div>
  9.         <div id="div_digg">
  10.             <div class="diggit action">
  11.                 <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
  12.             </div>
  13.             <div class="buryit action">
  14.                 <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
  15.             </div>
  16.             <div class="clear"></div>
  17.             <div class="diggword" id="digg_tips">
  18.             </div>
  19.         </div>
  20.     </div>
  21.     {% csrf_token %}
  22.     <script>
  23.         $(".action").click(function () {
  24.             {#hasClass() 方法检查被选元素是否包含指定的 class#}
  25.             var is_up = $(this).hasClass("diggit");
  26.             {#判断是否登录#}
  27.             if ("{{ request.user.username }}") {
  28.                 $.ajax({
  29.                     url: "/digg/",
  30.                     type: "post",
  31.                     data: {
  32.                         is_up: is_up,
  33.                         article_id: "{{ article_obj.pk }}",
  34.                         csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
  35.                     },
  36.                     success: function (data) {
  37.                         console.log(data);
  38.                         console.log(typeof data);
  40.                     }
  41.                 })
  42.             } else {
  43.                 location.href = "/login/";
  44.             }
  46.         })
  47.     </script>
  49. {% endblock %}

修改views.py，增加视图函数digg

注意：导入2个模块

  1. import json
  2. from django.http import JsonResponse

视图函数如下：

  1. from django.shortcuts import render,HttpResponse,redirect
  2. from django.contrib import auth
  3. from blog.models import Article,UserInfo,Blog,Category,Tag,ArticleUpDown
  4. from django.db.models import Sum,Avg,Max,Min,Count
  5. from django.db.models import F
  6. import json
  7. from django.http import JsonResponse
  9. # Create your views here.
  10. def login(request):
  12.     if request.method=="POST":
  13.         user=request.POST.get("user")
  14.         pwd=request.POST.get("pwd")
  15.         # 用户验证成功,返回user对象,否则返回None
  16.         user=auth.authenticate(username=user,password=pwd)
  17.         if user:
  18.             # 登录,注册session
  19.             # 全局变量 request.user=当前登陆对象(session中)
  20.             auth.login(request,user)
  21.             return redirect("/index/")
  23.     return render(request,"login.html")
  25. def index(request):
  26.     article_list=Article.objects.all()
  27.     return render(request,"index.html",{"article_list":article_list})
  29. def logout(request):  # 注销
  30.     auth.logout(request)
  31.     return redirect("/index/")
  33. def query_current_site(request,username):  # 查询当前站点的博客标题
  34.     # 查询当前站点的用户对象
  35.     user = UserInfo.objects.filter(username=username).first()
  36.     if not user:
  37.         return render(request, "not_found.html")
  38.     # 查询当前站点对象
  39.     blog = user.blog
  40.     return blog
  42. def homesite(request,username,**kwargs):  # 个人站点主页
  43.     print("kwargs", kwargs)
  45.     blog = query_current_site(request,username)
  47.     # 查询当前用户发布的所有文章
  48.     if not kwargs:
  49.         article_list = Article.objects.filter(user__username=username)
  50.     else:
  51.         condition = kwargs.get("condition")
  52.         params = kwargs.get("params")
  53.         #判断分类、随笔、归档
  54.         if condition == "category":
  55.             article_list = Article.objects.filter(user__username=username).filter(category__title=params)
  56.         elif condition == "tag":
  57.             article_list = Article.objects.filter(user__username=username).filter(tags__title=params)
  58.         else:
  59.             year, month = params.split("/")
  60.             article_list = Article.objects.filter(user__username=username).filter(create_time__year=year,
  61.                                                                                   create_time__month=month)
  62.     return render(request,"homesite.html",{"blog":blog,"username":username,"article_list":article_list})
  64. def article_detail(request,username,article_id):
  65.     blog = query_current_site(request,username)
  67.     #查询指定id的文章
  68.     article_obj = Article.objects.filter(pk=article_id).first()
  69.     user_id = UserInfo.objects.filter(username=username).first().nid
  71.     return render(request,'article_detail.html',{"blog":blog,"username":username,'article_obj':article_obj,"user_id":user_id})
  73. def digg(request):
  74.     print(request.POST)
  75.     if request.method == "POST":
  76.         #ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值
  77.         is_up = json.loads(request.POST.get("is_up"))
  78.         article_id = request.POST.get("article_id")
  79.         user_id = request.user.pk
  81.         response = {"state": True, "msg": None}  # 初始状态
  82.         #判断当前登录用户是否对这篇文章做过点赞或者踩灭操作
  83.         obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=article_id).first()
  84.         if obj:
  85.             response["state"] = False  # 更改状态
  86.         else:
  87.             #插入一条记录
  88.             new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=is_up)
  90.         return JsonResponse(response)
  92.     else:
  93.         return HttpResponse("非法请求")

json处理问题

ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值

json支持7种数据格式，其中true和false是其中2种。那么反序列化之后，会得到一个布尔值。

为什么一定要反序列化呢？因为…create(…is_up=is_up) 等式右边的值，非空。那么ORM会认为是True！

所以不管ajax传过来的是true和falase，它都是字符串，那么ORM执行时，始终都是True

JsonResponse

JsonResponse对象是HttpRespon的子类，它主要和父类的区别在于：

1.它的默认Content-Type 被设置为： application/json

2.第一个参数，data应该是一个字典类型，如果不是字典，抛出 TypeError的异常

它返回json数据，那么ajax接收时，不需要反序列化，可以直接使用！

刷新网页，点击右侧的推荐，查看浏览器控制台

Day82 点赞和踩灭,用户评论 - 图4

查看blog_articleupdown表记录，发现多了一条记录

Day82 点赞和踩灭,用户评论 - 图5

查看Pycharm控制台输出：

  1. <QueryDict: {'article_id': ['6'], 'csrfmiddlewaretoken': ['JgLyFpVgp92Rs8ppPCd2pm9jVj6z8bo9KSsMwKnakpB6CwTCT1K58v2JHLeR5ejN'], 'is_up': ['true']}>

判断用户之前的操作

当用户第一次点击推荐时，直接将数字加1。再次点击时，提示您已经推荐过！再次点击返回时，也提示您已经推荐过。

同理，当用户对一篇点击返回后。之后不论是点击推荐还是反对，都会提示您已经反对过！

不可以取消推荐或者反对！

修改views.py，获取上一次操作的记录

  1. def digg(request):
  2.     print(request.POST)
  3.     if request.method == "POST":
  4.         #ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值
  5.         is_up = json.loads(request.POST.get("is_up"))
  6.         article_id = request.POST.get("article_id")
  7.         user_id = request.user.pk
  9.         response = {"state": True, "msg": None}  # 初始状态
  10.         #判断当前登录用户是否对这篇文章做过点赞或者踩灭操作
  11.         obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=article_id).first()
  12.         if obj:
  13.             response["state"] = False  # 更改状态
  14.             response["handled"] = obj.is_up  # 获取之前的操作,返回true或者false
  15.             print(obj.is_up)
  16.         else:
  17.             #插入一条记录
  18.             new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=is_up)
  20.         return JsonResponse(response)
  22.     else:
  23.         return HttpResponse("非法请求")

修改article_detail.html的js代码

  1. {% extends "base.html" %}
  3. {% block content %}
  4.     <div class="article_info">
  5.         <h4 class="text-center">{{ article_obj.title }}</h4>
  6.         <div class="content">
  7.             {{ article_obj.content|safe }}
  8.         </div>
  9.         <div id="div_digg">
  10.             <div class="diggit action">
  11.                 <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
  12.             </div>
  13.             <div class="buryit action">
  14.                 <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
  15.             </div>
  16.             <div class="clear"></div>
  17.             <div class="diggword" id="digg_tips">
  18.             </div>
  19.         </div>
  20.     </div>
  21.     {% csrf_token %}
  22.     <script>
  23.         $(".action").click(function () {
  24.             {#hasClass() 方法检查被选元素是否包含指定的 class#}
  25.             var is_up = $(this).hasClass("diggit");
  26.             {#判断是否登录#}
  27.             if ("{{ request.user.username }}") {
  28.                 $.ajax({
  29.                     url: "/digg/",
  30.                     type: "post",
  31.                     data: {
  32.                         is_up: is_up,
  33.                         article_id: "{{ article_obj.pk }}",
  34.                         csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
  35.                     },
  36.                     success: function (data) {
  37.                         console.log(data);
  38.                         console.log(typeof data);
  39.                         if (data.state) {
  40.                             //提交成功
  41.                         } else {
  42.                             if (data.handled) {  //判断之前的操作记录
  43.                                 $("#digg_tips").html("您已经推荐过！")
  44.                             } else {
  45.                                 $("#digg_tips").html("您已经反对过！")
  46.                             }
  47.                         }
  49.                     }
  50.                 })
  51.             } else {
  52.                 location.href = "/login/";
  53.             }
  55.         })
  56.     </script>
  58. {% endblock %}

修改static—>css目录下的article_detail.css，增加样式

  1. #div_digg {
  2.     float: right;
  3.     margin-bottom: 10px;
  4.     margin-right: 30px;
  5.     font-size: 12px;
  6.     width: 125px;
  7.     text-align: center;
  8.     margin-top: 10px;
  9. }
  11. .diggit {
  12.     float: left;
  13.     width: 46px;
  14.     height: 52px;
  15.     background: url("/static/img/upup.gif") no-repeat;
  16.     text-align: center;
  17.     cursor: pointer;
  18.     margin-top: 2px;
  19.     padding-top: 5px;
  20. }
  22. .buryit {
  23.     float: right;
  24.     margin-left: 20px;
  25.     width: 46px;
  26.     height: 52px;
  27.     background: url("/static/img/downdown.gif") no-repeat;
  28.     text-align: center;
  29.     cursor: pointer;
  30.     margin-top: 2px;
  31.     padding-top: 5px;
  32. }
  33. .clear {
  34.     clear: both;
  35. }
  37. #digg_tips{
  38.     color: red;
  39. }

重启django项目，页面强制刷新几次！

再次点击，提示已经点过了

Day82 点赞和踩灭,用户评论 - 图6

修改article_detail.html的js代码，增加动态效果，1秒后，清空红色文字

  1. {% extends "base.html" %}
  3. {% block content %}
  4.     <div class="article_info">
  5.         <h4 class="text-center">{{ article_obj.title }}</h4>
  6.         <div class="content">
  7.             {{ article_obj.content|safe }}
  8.         </div>
  9.         <div id="div_digg">
  10.             <div class="diggit action">
  11.                 <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
  12.             </div>
  13.             <div class="buryit action">
  14.                 <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
  15.             </div>
  16.             <div class="clear"></div>
  17.             <div class="diggword" id="digg_tips">
  18.             </div>
  19.         </div>
  20.     </div>
  21.     {% csrf_token %}
  22.     <script>
  23.         $(".action").click(function () {
  24.             {#hasClass() 方法检查被选元素是否包含指定的 class#}
  25.             var is_up = $(this).hasClass("diggit");
  26.             {#判断是否登录#}
  27.             if ("{{ request.user.username }}") {
  28.                 $.ajax({
  29.                     url: "/digg/",
  30.                     type: "post",
  31.                     data: {
  32.                         is_up: is_up,
  33.                         article_id: "{{ article_obj.pk }}",
  34.                         csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
  35.                     },
  36.                     success: function (data) {
  37.                         console.log(data);
  38.                         console.log(typeof data);
  39.                         if (data.state) {
  40.                             //提交成功
  41.                         } else {
  42.                             if (data.handled) {  //判断之前的操作记录
  43.                                 $("#digg_tips").html("您已经推荐过！")
  44.                             } else {
  45.                                 $("#digg_tips").html("您已经反对过！")
  46.                             }
  47.                             setTimeout(function () {
  48.                                 $("#digg_tips").html("")  //清空提示文字
  49.                             }, 1000)
  50.                         }
  52.                     }
  53.                 })
  54.             } else {
  55.                 location.href = "/login/";
  56.             }
  58.         })
  59.     </script>
  61. {% endblock %}

效果如下：

Day82 点赞和踩灭,用户评论 - 图7

更新文章表

blog_articleupdown表有一个联合唯一索引，即使重复点击，也不会增加记录！

blog_article表有一个up_count和down_count字段，分别表示推荐和反对的计数。

那么这2个字段，也需要同时更新。在原有数值的基础上加1，需要使用F查询！

导入F模块，完整代码如下：

  1. def digg(request):
  2.     print(request.POST)
  3.     if request.method == "POST":
  4.         #ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值
  5.         is_up = json.loads(request.POST.get("is_up"))
  6.         article_id = request.POST.get("article_id")
  7.         user_id = request.user.pk
  9.         response = {"state": True, "msg": None}  # 初始状态
  10.         #判断当前登录用户是否对这篇文章做过点赞或者踩灭操作
  11.         obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=article_id).first()
  12.         if obj:
  13.             response["state"] = False  # 更改状态
  14.             response["handled"] = obj.is_up  # 获取之前的操作,返回true或者false
  15.             print(obj.is_up)
  16.         else:
  17.             #插入一条记录
  18.             new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=is_up)
  19.             if is_up: # 判断为推荐
  20.                 Article.objects.filter(pk=article_id).update(up_count=F("up_count")+1)
  21.             else: # 反对
  22.                 Article.objects.filter(pk=article_id).update(down_count=F("down_count")+1)
  24.         return JsonResponse(response)
  26.     else:
  27.         return HttpResponse("非法请求")

清空blog_articleupdown表记录

访问网页，重新点击。再次刷新页面，那么值就会更新了！

Day82 点赞和踩灭,用户评论 - 图8

网页实时展示

上面已经实现了，点击之后，更新数据库。但是需要刷新网页，才会有效果。想要用户能实时看到数字，需要进行DOM操作。

获取网页原有的值，进行加1。最后进行DOM操作，展示给用户看！

修改article_detail.html的js代码

注意：js是弱类型语言，获取到值时，不能直接进行加法，需要强制转换才行！

  1. {% extends "base.html" %}
  3. {% block content %}
  4.     <div class="article_info">
  5.         <h4 class="text-center">{{ article_obj.title }}</h4>
  6.         <div class="content">
  7.             {{ article_obj.content|safe }}
  8.         </div>
  9.         <div id="div_digg">
  10.             <div class="diggit action">
  11.                 <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
  12.             </div>
  13.             <div class="buryit action">
  14.                 <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
  15.             </div>
  16.             <div class="clear"></div>
  17.             <div class="diggword" id="digg_tips">
  18.             </div>
  19.         </div>
  20.     </div>
  21.     {% csrf_token %}
  22.     <script>
  23.         $(".action").click(function () {
  24.             {#hasClass() 方法检查被选元素是否包含指定的 class#}
  25.             var is_up = $(this).hasClass("diggit");
  26.             {#获取提示的span标签#}
  27.             var _this= $(this).children("span");
  28.             {#判断是否登录#}
  29.             if ("{{ request.user.username }}") {
  30.                 $.ajax({
  31.                     url: "/digg/",
  32.                     type: "post",
  33.                     data: {
  34.                         is_up: is_up,
  35.                         article_id: "{{ article_obj.pk }}",
  36.                         csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
  37.                     },
  38.                     success: function (data) {
  39.                         console.log(data);
  40.                         console.log(typeof data);
  41.                         if (data.state) {
  42.                             //提交成功
  43.                             var val=_this.text();  //获取text值
  44.                             //在原有的基础上加1。注意:一定要进行类型转换
  45.                             _this.text(parseInt(val)+1)
  46.                         } else {
  47.                             if (data.handled) {  //判断之前的操作记录
  48.                                 $("#digg_tips").html("您已经推荐过！")
  49.                             } else {
  50.                                 $("#digg_tips").html("您已经反对过！")
  51.                             }
  52.                             setTimeout(function () {
  53.                                 $("#digg_tips").html("")  //清空提示文字
  54.                             }, 1000)
  55.                         }
  57.                     }
  58.                 })
  59.             } else {
  60.                 location.href = "/login/";
  61.             }
  63.         })
  64.     </script>
  66. {% endblock %}

清空blog_articleupdown表记录

将blog_article表的相关字段设置为0

访问网页，重新点击，效果如下：

Day82 点赞和踩灭,用户评论 - 图9

优化js代码

将if判断部分，改成三元运算

  1. {% extends "base.html" %}
  3. {% block content %}
  4.     <div class="article_info">
  5.         <h4 class="text-center">{{ article_obj.title }}</h4>
  6.         <div class="content">
  7.             {{ article_obj.content|safe }}
  8.         </div>
  9.         <div id="div_digg">
  10.             <div class="diggit action">
  11.                 <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
  12.             </div>
  13.             <div class="buryit action">
  14.                 <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
  15.             </div>
  16.             <div class="clear"></div>
  17.             <div class="diggword" id="digg_tips">
  18.             </div>
  19.         </div>
  20.     </div>
  21.     {% csrf_token %}
  22.     <script>
  23.         $(".action").click(function () {
  24.             {#hasClass() 方法检查被选元素是否包含指定的 class#}
  25.             var is_up = $(this).hasClass("diggit");
  26.             {#获取提示的span标签#}
  27.             var _this = $(this).children("span");
  28.             {#判断是否登录#}
  29.             if ("{{ request.user.username }}") {
  30.                 $.ajax({
  31.                     url: "/digg/",
  32.                     type: "post",
  33.                     data: {
  34.                         is_up: is_up,
  35.                         article_id: "{{ article_obj.pk }}",
  36.                         csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
  37.                     },
  38.                     success: function (data) {
  39.                         console.log(data);
  40.                         console.log(typeof data);
  41.                         if (data.state) {
  42.                             //提交成功
  43.                             var val = _this.text();  //获取text值
  44.                             //在原有的基础上加1。注意:一定要进行类型转换
  45.                             _this.text(parseInt(val) + 1)
  46.                         } else {
  47.                             // 重复提交
  48.                             var val = data.handled ? "您已经推荐过！" : "您已经反对过！";
  49.                             $("#digg_tips").html(val);
  50.                             setTimeout(function () {
  51.                                 $("#digg_tips").html("")  //清空提示文字
  52.                             }, 1000)
  53.                         }
  55.                     }
  56.                 })
  57.             } else {
  58.                 location.href = "/login/";
  59.             }
  61.         })
  62.     </script>
  64. {% endblock %}

事务

是指作为单个逻辑工作单元执行的一系列操作，要么完全地执行，要么完全地不执行。 事务处理可以确保除非事务性单元内的所有操作都成功完成，否则不会永久更新面向数据的资源。

在上面的例子，点赞时，需要更新2个表。一个是blog_articleupdown表，一个是blog_article表。

如果有一个表没有更新，那么就会产生脏数据！为了避免这个问题，需要使用事务！

举例：模拟异常情况

修改digg视图函数，模拟异常

  1. def digg(request):
  2.     print(request.POST)
  3.     if request.method == "POST":
  4.         #ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值
  5.         is_up = json.loads(request.POST.get("is_up"))
  6.         article_id = request.POST.get("article_id")
  7.         user_id = request.user.pk
  9.         response = {"state": True, "msg": None}  # 初始状态
  10.         #判断当前登录用户是否对这篇文章做过点赞或者踩灭操作
  11.         obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=article_id).first()
  12.         if obj:
  13.             response["state"] = False  # 更改状态
  14.             response["handled"] = obj.is_up  # 获取之前的操作,返回true或者false
  15.             print(obj.is_up)
  16.         else:
  17.             #插入一条记录
  18.             new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=is_up)
  19.             ask  # 这一行故意出错
  20.             if is_up: # 判断为推荐
  21.                 Article.objects.filter(pk=article_id).update(up_count=F("up_count")+1)
  22.             else: # 反对
  23.                 Article.objects.filter(pk=article_id).update(down_count=F("down_count")+1)
  25.         return JsonResponse(response)
  27.     else:
  28.         return HttpResponse("非法请求")

清空blog_articleupdown表，将blog_article表的up_count和down_count字段设置为0

刷新页面，重新点击，打开浏览器工具—>network

出行了500错误

Day82 点赞和踩灭,用户评论 - 图10

查看blog_articleupdown表，多了一条记录

Day82 点赞和踩灭,用户评论 - 图11

查看blog_article表，对应文章的up_count字段，发现还是为0

Day82 点赞和踩灭,用户评论 - 图12

使用事务

修改digg视图函数，导入模块transaction。

使用语法很简单，将相关原子操作的代码直接tab一下，就可以了

完整代码如下：

  1. from django.shortcuts import render,HttpResponse,redirect
  2. from django.contrib import auth
  3. from blog.models import Article,UserInfo,Blog,Category,Tag,ArticleUpDown
  4. from django.db.models import Sum,Avg,Max,Min,Count
  5. from django.db.models import F
  6. import json
  7. from django.http import JsonResponse
  8. from django.db import transaction
  10. # Create your views here.
  11. def login(request):
  13.     if request.method=="POST":
  14.         user=request.POST.get("user")
  15.         pwd=request.POST.get("pwd")
  16.         # 用户验证成功,返回user对象,否则返回None
  17.         user=auth.authenticate(username=user,password=pwd)
  18.         if user:
  19.             # 登录,注册session
  20.             # 全局变量 request.user=当前登陆对象(session中)
  21.             auth.login(request,user)
  22.             return redirect("/index/")
  24.     return render(request,"login.html")
  26. def index(request):
  27.     article_list=Article.objects.all()
  28.     return render(request,"index.html",{"article_list":article_list})
  30. def logout(request):  # 注销
  31.     auth.logout(request)
  32.     return redirect("/index/")
  34. def query_current_site(request,username):  # 查询当前站点的博客标题
  35.     # 查询当前站点的用户对象
  36.     user = UserInfo.objects.filter(username=username).first()
  37.     if not user:
  38.         return render(request, "not_found.html")
  39.     # 查询当前站点对象
  40.     blog = user.blog
  41.     return blog
  43. def homesite(request,username,**kwargs):  # 个人站点主页
  44.     print("kwargs", kwargs)
  46.     blog = query_current_site(request,username)
  48.     # 查询当前用户发布的所有文章
  49.     if not kwargs:
  50.         article_list = Article.objects.filter(user__username=username)
  51.     else:
  52.         condition = kwargs.get("condition")
  53.         params = kwargs.get("params")
  54.         #判断分类、随笔、归档
  55.         if condition == "category":
  56.             article_list = Article.objects.filter(user__username=username).filter(category__title=params)
  57.         elif condition == "tag":
  58.             article_list = Article.objects.filter(user__username=username).filter(tags__title=params)
  59.         else:
  60.             year, month = params.split("/")
  61.             article_list = Article.objects.filter(user__username=username).filter(create_time__year=year,
  62.                                                                                   create_time__month=month)
  63.     return render(request,"homesite.html",{"blog":blog,"username":username,"article_list":article_list})
  65. def article_detail(request,username,article_id):
  66.     blog = query_current_site(request,username)
  68.     #查询指定id的文章
  69.     article_obj = Article.objects.filter(pk=article_id).first()
  70.     user_id = UserInfo.objects.filter(username=username).first().nid
  72.     return render(request,'article_detail.html',{"blog":blog,"username":username,'article_obj':article_obj,"user_id":user_id})
  74. def digg(request):
  75.     print(request.POST)
  76.     if request.method == "POST":
  77.         #ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值
  78.         is_up = json.loads(request.POST.get("is_up"))
  79.         article_id = request.POST.get("article_id")
  80.         user_id = request.user.pk
  82.         response = {"state": True, "msg": None}  # 初始状态
  83.         #判断当前登录用户是否对这篇文章做过点赞或者踩灭操作
  84.         obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=article_id).first()
  85.         if obj:
  86.             response["state"] = False  # 更改状态
  87.             response["handled"] = obj.is_up  # 获取之前的操作,返回true或者false
  88.             print(obj.is_up)
  89.         else:
  90.             with transaction.atomic():
  91.                 #插入一条记录
  92.                 new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=is_up)
  93.                 ask  # 模拟异常
  94.                 if is_up: # 判断为推荐
  95.                     Article.objects.filter(pk=article_id).update(up_count=F("up_count")+1)
  96.                 else: # 反对
  97.                     Article.objects.filter(pk=article_id).update(down_count=F("down_count")+1)
  99.         return JsonResponse(response)
  101.     else:
  102.         return HttpResponse("非法请求")

清空blog_articleupdown表

刷新页面，重新点击，再一次返回500错误

查看blog_articleupdown表，发现并没增加一条记录。

Day82 点赞和踩灭,用户评论 - 图13

这样就比较合理了！删除异常代码

  1. def digg(request):
  2.     print(request.POST)
  3.     if request.method == "POST":
  4.         #ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值
  5.         is_up = json.loads(request.POST.get("is_up"))
  6.         article_id = request.POST.get("article_id")
  7.         user_id = request.user.pk
  9.         response = {"state": True, "msg": None}  # 初始状态
  10.         #判断当前登录用户是否对这篇文章做过点赞或者踩灭操作
  11.         obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=article_id).first()
  12.         if obj:
  13.             response["state"] = False  # 更改状态
  14.             response["handled"] = obj.is_up  # 获取之前的操作,返回true或者false
  15.             print(obj.is_up)
  16.         else:
  17.             with transaction.atomic():
  18.                 #插入一条记录
  19.                 new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=is_up)
  20.                 if is_up: # 判断为推荐
  21.                     Article.objects.filter(pk=article_id).update(up_count=F("up_count")+1)
  22.                 else: # 反对
  23.                     Article.objects.filter(pk=article_id).update(down_count=F("down_count")+1)
  25.         return JsonResponse(response)
  27.     else:
  28.         return HttpResponse("非法请求")

刷新页面，重新点击

Day82 点赞和踩灭,用户评论 - 图14

查看blog_articleupdown表，发现增加了一条记录。

Day82 点赞和踩灭,用户评论 - 图15

查看blog_article表，对应文章的up_count字段，发现为1了！

Day82 点赞和踩灭,用户评论 - 图16

事务用起来很简单，是因为django把复杂的逻辑给封装好了！

有时间的小伙伴，还可以加一个需求，自己不能给自己点赞！

二、用户评论

评论样式

先写html的样式代码

修改article_detail.html

  1. {% extends "base.html" %}
  3. {% block content %}
  4.     <div class="article_info">
  5.         <h4 class="text-center">{{ article_obj.title }}</h4>
  6.         <div class="content">
  7.             {{ article_obj.content|safe }}
  8.         </div>
  9.         <div id="div_digg">
  10.             <div class="diggit action">
  11.                 <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
  12.             </div>
  13.             <div class="buryit action">
  14.                 <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
  15.             </div>
  16.             <div class="clear"></div>
  17.             <div class="diggword" id="digg_tips">
  18.             </div>
  19.         </div>
  20.     <div class="clearfix"></div>
  22.         <div class="comment">
  23.             <p>评论列表</p>
  24.             <ul class="comment_list list-group">
  25.                 {% for comment in comment_list %}
  26.                 <li class="list-group-item">
  27.                    <div>
  28.                        <a href="">#{{ forloop.counter }}楼</a>  
  29.                        <span class="small">{{ comment.create_time|date:"Y-m-d H:i" }}</span>  
  30.                        <a href="">{{ comment.user.username }}</a>
  31.                        <a href="" class="pull-right"><span>回复</span></a>
  33.                    </div>
  34.                    <div>
  35.                        <p>{{ comment.content }}</p>
  36.                    </div>
  37.                 </li>
  38.                 {% endfor %}
  40.             </ul>
  41.             <p>发表评论</p>
  42.             <p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="{{ request.user.username }}"></p>
  43.             <div>
  44.                 <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
  45.             </div>
  46.             <input type="button" value="submit" class="btn btn-default comment_btn">
  47.         </div>
  49.     </div>
  50.     {% csrf_token %}
  51.     <script>
  52.         $(".action").click(function () {
  53.             {#hasClass() 方法检查被选元素是否包含指定的 class#}
  54.             var is_up = $(this).hasClass("diggit");
  55.             {#获取提示的span标签#}
  56.             var _this = $(this).children("span");
  57.             {#判断是否登录#}
  58.             if ("{{ request.user.username }}") {
  59.                 $.ajax({
  60.                     url: "/digg/",
  61.                     type: "post",
  62.                     data: {
  63.                         is_up: is_up,
  64.                         article_id: "{{ article_obj.pk }}",
  65.                         csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
  66.                     },
  67.                     success: function (data) {
  68.                         console.log(data);
  69.                         console.log(typeof data);
  70.                         if (data.state) {
  71.                             //提交成功
  72.                             var val = _this.text();  //获取text值
  73.                             //在原有的基础上加1。注意:一定要进行类型转换
  74.                             _this.text(parseInt(val) + 1)
  75.                         } else {
  76.                             // 重复提交
  77.                             var val = data.handled ? "您已经推荐过！" : "您已经反对过！";
  78.                             $("#digg_tips").html(val);
  79.                             setTimeout(function () {
  80.                                 $("#digg_tips").html("")  //清空提示文字
  81.                             }, 1000)
  82.                         }
  84.                     }
  85.                 })
  86.             } else {
  87.                 location.href = "/login/";
  88.             }
  90.         })
  91.     </script>
  93. {% endblock %}

修改css目录下的article_detail.css

注意放一个gif图片到img目录下

  1. /*推荐和反对*/
  2. #div_digg {
  3.     float: right;
  4.     margin-bottom: 10px;
  5.     margin-right: 30px;
  6.     font-size: 12px;
  7.     width: 125px;
  8.     text-align: center;
  9.     margin-top: 10px;
  10. }
  12. .diggit {
  13.     float: left;
  14.     width: 46px;
  15.     height: 52px;
  16.     background: url("/static/img/upup.gif") no-repeat;
  17.     text-align: center;
  18.     cursor: pointer;
  19.     margin-top: 2px;
  20.     padding-top: 5px;
  21. }
  23. .buryit {
  24.     float: right;
  25.     margin-left: 20px;
  26.     width: 46px;
  27.     height: 52px;
  28.     background: url("/static/img/downdown.gif") no-repeat;
  29.     text-align: center;
  30.     cursor: pointer;
  31.     margin-top: 2px;
  32.     padding-top: 5px;
  33. }
  34. .clear {
  35.     clear: both;
  36. }
  38. #digg_tips{
  39.     color: red;
  40. }
  42. /*评论*/
  43.  input.author{
  44.     background-image: url("/static/img/icon_form.gif");
  45.     background-repeat: no-repeat;
  46.     border: 1px solid #ccc;
  47.     padding: 4px 4px 4px 30px;
  48.     width: 300px;
  49.     font-size: 13px;
  50. }
  52. input.author {
  53.     background-position: 3px -3px;
  54. }

刷新网页，拉到最下面，效果如下：

Day82 点赞和踩灭,用户评论 - 图17

评论步骤

  • 提交根评论请求
  • 显示根评论
  1. render
  2. Ajax显示
  • 提交子评论
  • 显示子评论
  • 评论树

发送ajax请求

查看评论表模型

  1. class Comment(models.Model):
  2.     """
  4.     评论表
  6.     """
  7.     nid = models.AutoField(primary_key=True)
  8.     article = models.ForeignKey(verbose_name='评论文章', to='Article', to_field='nid', on_delete=models.CASCADE)
  9.     user = models.ForeignKey(verbose_name='评论者', to='UserInfo', to_field='nid', on_delete=models.CASCADE)
  10.     content = models.CharField(verbose_name='评论内容', max_length=255)
  11.     create_time = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)
  12.     parent_comment = models.ForeignKey(verbose_name="父级评论id", to='Comment',null=True, on_delete=models.CASCADE)

它有6个字段，其中nid、user、parent_comment、create_time是可选的。

user 在视图函数中，可以直接获取，不需要ajax传此参数。

parent_comment字段的值为空，表示这是一条根评论。否则为一条子评论！

那么ajax如果传一个空值，表示为根评论，否则为子评论。

create_time字段有一个属性：auto_now_add=True。

字段在实例第一次保存的时候会保存当前时间，不管你在这里是否对其赋值。但是之后的save()是可以手动赋值的。

也就是新实例化一个model，想手动存其他时间，就需要对该实例save()之后赋值然后再save()

根评论

修改article_detail.html的js代码，只需要发送3个参数即可。分别是content，atricle_id，parent_comment

  1. {% extends "base.html" %}
  3. {% block content %}
  4.     <div class="article_info">
  5.         <h4 class="text-center">{{ article_obj.title }}</h4>
  6.         <div class="content">
  7.             {{ article_obj.content|safe }}
  8.         </div>
  9.         <div id="div_digg">
  10.             <div class="diggit action">
  11.                 <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
  12.             </div>
  13.             <div class="buryit action">
  14.                 <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
  15.             </div>
  16.             <div class="clear"></div>
  17.             <div class="diggword" id="digg_tips">
  18.             </div>
  19.         </div>
  20.         <div class="clearfix"></div>
  22.         <div class="comment">
  23.             <p>评论列表</p>
  24.             <ul class="comment_list list-group">
  25.                 {% for comment in comment_list %}
  26.                     <li class="list-group-item">
  27.                         <div>
  28.                             <a href="">#{{ forloop.counter }}楼</a>  
  29.                             <span class="small">{{ comment.create_time|date:"Y-m-d H:i" }}</span>  
  30.                             <a href="">{{ comment.user.username }}</a>
  31.                             <a href="" class="pull-right"><span>回复</span></a>
  33.                         </div>
  34.                         <div>
  35.                             <p>{{ comment.content }}</p>
  36.                         </div>
  37.                     </li>
  38.                 {% endfor %}
  40.             </ul>
  41.             <p>发表评论</p>
  42.             <p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
  43.                          value="{{ request.user.username }}"></p>
  44.             <div>
  45.                 <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
  46.             </div>
  47.             <input type="button" value="submit" class="btn btn-default comment_btn">
  48.         </div>
  50.     </div>
  51.     {% csrf_token %}
  52.     <script>
  53.         // 点赞和踩灭
  54.         $(".action").click(function () {
  55.             {#hasClass() 方法检查被选元素是否包含指定的 class#}
  56.             var is_up = $(this).hasClass("diggit");
  57.             {#获取提示的span标签#}
  58.             var _this = $(this).children("span");
  59.             {#判断是否登录#}
  60.             if ("{{ request.user.username }}") {
  61.                 $.ajax({
  62.                     url: "/digg/",
  63.                     type: "post",
  64.                     data: {
  65.                         is_up: is_up,
  66.                         article_id: "{{ article_obj.pk }}",
  67.                         csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
  68.                     },
  69.                     success: function (data) {
  70.                         console.log(data);
  71.                         console.log(typeof data);
  72.                         if (data.state) {
  73.                             //提交成功
  74.                             var val = _this.text();  //获取text值
  75.                             //在原有的基础上加1。注意:一定要进行类型转换
  76.                             _this.text(parseInt(val) + 1)
  77.                         } else {
  78.                             // 重复提交
  79.                             var val = data.handled ? "您已经推荐过！" : "您已经反对过！";
  80.                             $("#digg_tips").html(val);
  81.                             setTimeout(function () {
  82.                                 $("#digg_tips").html("")  //清空提示文字
  83.                             }, 1000)
  84.                         }
  86.                     }
  87.                 })
  88.             } else {
  89.                 location.href = "/login/";
  90.             }
  92.         })
  94.         // 提交评论
  95.         $(".comment_btn").click(function () {
  96.             {#评论内容#}
  97.             var content = $("#comment_content").val();
  98.             {#默认为空#}
  99.             var pid = "";
  100.             $.ajax({
  101.                 url: "/comment/",
  102.                 type: "post",
  103.                 data: {
  104.                     content: content,
  105.                     article_id: "{{ article_obj.pk }}",
  106.                     pid: pid,
  107.                     csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
  108.                 },
  109.                 success: function (data) {
  110.                     console.log(data);
  111.                     // 清空输入框的内容
  112.                     $("#comment_content").val("")
  113.                 }
  114.             })
  116.         })
  117.     </script>
  119. {% endblock %}

修改urls.py，增加路径comment

  1. urlpatterns = [
  2.     path('admin/', admin.site.urls),
  3.     path('login/', views.login),
  4.     path('index/', views.index),
  5.     path('logout/', views.logout),
  6.     path('', views.index),
  7.     #点赞或者踩灭
  8.     path('digg/', views.digg),
  9.     # 评论
  10.     path('comment/', views.comment),
  12.     #文章详情
  13.     re_path('(?P<username>\w+)/articles/(?P<article_id>\d+)/$', views.article_detail),
  14.     # 跳转
  15.     re_path('(?P<username>\w+)/(?P<condition>category|tag|achrive)/(?P<params>.*)/$', views.homesite),
  16.     # 个人站点
  17.     re_path('(?P<username>\w+)/$', views.homesite),
  18. ]

修改views.py，增加视图函数comment，完整代码如下：

  1. from django.shortcuts import render,HttpResponse,redirect
  2. from django.contrib import auth
  3. from blog.models import Article,UserInfo,Blog,Category,Tag,ArticleUpDown,Comment
  4. from django.db.models import Sum,Avg,Max,Min,Count
  5. from django.db.models import F
  6. import json
  7. from django.http import JsonResponse
  8. from django.db import transaction
  10. # Create your views here.
  11. def login(request):
  13.     if request.method=="POST":
  14.         user=request.POST.get("user")
  15.         pwd=request.POST.get("pwd")
  16.         # 用户验证成功,返回user对象,否则返回None
  17.         user=auth.authenticate(username=user,password=pwd)
  18.         if user:
  19.             # 登录,注册session
  20.             # 全局变量 request.user=当前登陆对象(session中)
  21.             auth.login(request,user)
  22.             return redirect("/index/")
  24.     return render(request,"login.html")
  26. def index(request):
  27.     article_list=Article.objects.all()
  28.     return render(request,"index.html",{"article_list":article_list})
  30. def logout(request):  # 注销
  31.     auth.logout(request)
  32.     return redirect("/index/")
  34. def query_current_site(request,username):  # 查询当前站点的博客标题
  35.     # 查询当前站点的用户对象
  36.     user = UserInfo.objects.filter(username=username).first()
  37.     if not user:
  38.         return render(request, "not_found.html")
  39.     # 查询当前站点对象
  40.     blog = user.blog
  41.     return blog
  43. def homesite(request,username,**kwargs):  # 个人站点主页
  44.     print("kwargs", kwargs)
  46.     blog = query_current_site(request,username)
  48.     # 查询当前用户发布的所有文章
  49.     if not kwargs:
  50.         article_list = Article.objects.filter(user__username=username)
  51.     else:
  52.         condition = kwargs.get("condition")
  53.         params = kwargs.get("params")
  54.         #判断分类、随笔、归档
  55.         if condition == "category":
  56.             article_list = Article.objects.filter(user__username=username).filter(category__title=params)
  57.         elif condition == "tag":
  58.             article_list = Article.objects.filter(user__username=username).filter(tags__title=params)
  59.         else:
  60.             year, month = params.split("/")
  61.             article_list = Article.objects.filter(user__username=username).filter(create_time__year=year,
  62.                                                                                   create_time__month=month)
  63.     return render(request,"homesite.html",{"blog":blog,"username":username,"article_list":article_list})
  65. def article_detail(request,username,article_id):
  66.     blog = query_current_site(request,username)
  68.     #查询指定id的文章
  69.     article_obj = Article.objects.filter(pk=article_id).first()
  70.     user_id = UserInfo.objects.filter(username=username).first().nid
  72.     return render(request,'article_detail.html',{"blog":blog,"username":username,'article_obj':article_obj,"user_id":user_id})
  74. def digg(request):
  75.     print(request.POST)
  76.     if request.method == "POST":
  77.         #ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值
  78.         is_up = json.loads(request.POST.get("is_up"))
  79.         article_id = request.POST.get("article_id")
  80.         user_id = request.user.pk
  82.         response = {"state": True, "msg": None}  # 初始状态
  83.         #判断当前登录用户是否对这篇文章做过点赞或者踩灭操作
  84.         obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=article_id).first()
  85.         if obj:
  86.             response["state"] = False  # 更改状态
  87.             response["handled"] = obj.is_up  # 获取之前的操作,返回true或者false
  88.             print(obj.is_up)
  89.         else:
  90.             with transaction.atomic():
  91.                 #插入一条记录
  92.                 new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=is_up)
  93.                 if is_up: # 判断为推荐
  94.                     Article.objects.filter(pk=article_id).update(up_count=F("up_count")+1)
  95.                 else: # 反对
  96.                     Article.objects.filter(pk=article_id).update(down_count=F("down_count")+1)
  98.         return JsonResponse(response)
  100.     else:
  101.         return HttpResponse("非法请求")
  103. def comment(request):
  104.     print(request.POST)
  105.     if request.method == "POST":
  106.         # 获取数据
  107.         user_id = request.user.pk
  108.         article_id = request.POST.get("article_id")
  109.         content = request.POST.get("content")
  110.         pid = request.POST.get("pid")
  111.         # 生成评论对象
  112.         with transaction.atomic():  # 增加事务
  113.             # 评论表增加一条记录
  114.             comment = Comment.objects.create(user_id=user_id, article_id=article_id, content=content, parent_comment_id=pid)
  115.             # 当前文章的评论数加1
  116.             Article.objects.filter(pk=article_id).update(comment_count=F("comment_count") + 1)
  118.         response = {"state": False}  # 初始状态
  120.         if comment.user_id:  # 判断返回值
  121.             response = {"state": True}
  123.         return JsonResponse(response)  # 返回json对象
  125.     else:
  126.         return HttpResponse("非法请求")

刷新网页，发表一条评论

Day82 点赞和踩灭,用户评论 - 图18

查看表blog_comment，多了一条记录

Day82 点赞和踩灭,用户评论 - 图19

查看blog_article表，对应的comment_count值，数值加1了。

Day82 点赞和踩灭,用户评论 - 图20

渲染评论

修改article_detail视图函数，将评论列表传给模板

  1. def article_detail(request,username,article_id):
  2.     blog = query_current_site(request,username)
  4.     #查询指定id的文章
  5.     article_obj = Article.objects.filter(pk=article_id).first()
  6.     user_id = UserInfo.objects.filter(username=username).first().nid
  8.     comment_list = Comment.objects.filter(article_id=article_id)
  9.     dict = {"blog":blog,
  10.             "username":username,
  11.             'article_obj':article_obj,
  12.             "user_id":user_id,
  13.             "comment_list":comment_list,
  14.             }
  16.     return render(request,'article_detail.html',dict)

修改article_detail.html，使用for循环，遍历列表

  1. {% extends "base.html" %}
  3. {% block content %}
  4.     <div class="article_info">
  5.         <h4 class="text-center">{{ article_obj.title }}</h4>
  6.         <div class="content">
  7.             {{ article_obj.content|safe }}
  8.         </div>
  9.         <div id="div_digg">
  10.             <div class="diggit action">
  11.                 <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
  12.             </div>
  13.             <div class="buryit action">
  14.                 <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
  15.             </div>
  16.             <div class="clear"></div>
  17.             <div class="diggword" id="digg_tips">
  18.             </div>
  19.         </div>
  20.         <div class="clearfix"></div>
  22.         <div class="comment">
  23.             <p>评论列表</p>
  24.             <ul class="comment_list list-group">
  25.                 {% for comment in comment_list %}
  26.                     <li class="list-group-item">
  27.                         <div>
  28.                             <a href="">#{{ forloop.counter }}楼</a>  
  29.                             <span class="small">{{ comment.create_time|date:"Y-m-d H:i" }}</span>  
  30.                             <a href="">{{ comment.user.username }}</a>
  31.                             <a href="" class="pull-right"><span>回复</span></a>
  33.                         </div>
  34.                         <div>
  35.                             <p>{{ comment.content }}</p>
  36.                         </div>
  37.                     </li>
  38.                 {% endfor %}
  40.             </ul>
  41.             <p>发表评论</p>
  42.             <p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
  43.                          value="{{ request.user.username }}"></p>
  44.             <div>
  45.                 <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
  46.             </div>
  47.             <input type="button" value="submit" class="btn btn-default comment_btn">
  48.         </div>
  50.     </div>
  51.     {% csrf_token %}
  52.     <script>
  53.         // 点赞和踩灭
  54.         $(".action").click(function () {
  55.             {#hasClass() 方法检查被选元素是否包含指定的 class#}
  56.             var is_up = $(this).hasClass("diggit");
  57.             {#获取提示的span标签#}
  58.             var _this = $(this).children("span");
  59.             {#判断是否登录#}
  60.             if ("{{ request.user.username }}") {
  61.                 $.ajax({
  62.                     url: "/digg/",
  63.                     type: "post",
  64.                     data: {
  65.                         is_up: is_up,
  66.                         article_id: "{{ article_obj.pk }}",
  67.                         csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
  68.                     },
  69.                     success: function (data) {
  70.                         console.log(data);
  71.                         console.log(typeof data);
  72.                         if (data.state) {
  73.                             //提交成功
  74.                             var val = _this.text();  //获取text值
  75.                             //在原有的基础上加1。注意:一定要进行类型转换
  76.                             _this.text(parseInt(val) + 1)
  77.                         } else {
  78.                             // 重复提交
  79.                             var val = data.handled ? "您已经推荐过！" : "您已经反对过！";
  80.                             $("#digg_tips").html(val);
  81.                             setTimeout(function () {
  82.                                 $("#digg_tips").html("")  //清空提示文字
  83.                             }, 1000)
  84.                         }
  86.                     }
  87.                 })
  88.             } else {
  89.                 location.href = "/login/";
  90.             }
  92.         })
  94.         // 提交评论
  95.         $(".comment_btn").click(function () {
  96.             {#评论内容#}
  97.             var content = $("#comment_content").val();
  98.             {#默认为空#}
  99.             var pid = "";
  100.             $.ajax({
  101.                 url: "/comment/",
  102.                 type: "post",
  103.                 data: {
  104.                     content: content,
  105.                     article_id: "{{ article_obj.pk }}",
  106.                     pid: pid,
  107.                     csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
  108.                 },
  109.                 success: function (data) {
  110.                     console.log(data);
  111.                     // 清空输入框的内容
  112.                     $("#comment_content").val("")
  113.                 }
  114.             })
  116.         })
  117.     </script>
  119. {% endblock %}

刷新网页，效果如下：

Day82 点赞和踩灭,用户评论 - 图21

评论实时展示

上面提交评论后，网页不能立即看到，需要刷新之后，才能看到。这样体验不好！

查看博客园的评论，提交之后，会立即看到评论。此时不会显示楼层，只会显示评论内容！

那么只需要提交成功之后，操作DOM，在评论列表中，追加一段li标签，展示一下，就可以了！

数据获取问题

那么内容从何而来呢？

1.直接从html中获取相关数据

2.让服务器返回相关数据，从响应体中取数据。

针对这2种方式，我们选择第2种！

为什么不选择第一种呢？因为第一种是原始输入框中的值，那么存储到数据后之后。就不一定还是输入框的值！

服务器存储到数据库之前，会将提交的数据，做一次处理！

我们想要的效果，就是不论是DOM操作，追加一段html代码。还是刷新网页，加载评论。这2种方式，评论内容是一摸一样的！

所以，我们必须选择第二种方案，让服务器返回存储的值给ajax，ajax操作DOM，最加一段html代码，给用户展示！

数据展示

修改comment视图函数，返回3个变量给ajax

def comment(request):
    print(request.POST)
    if request.method == "POST":
        # 获取数据
        user_id = request.user.pk
        article_id = request.POST.get("article_id")
        content = request.POST.get("content")
        pid = request.POST.get("pid")
        # 生成评论对象
        with transaction.atomic():  # 增加事务
            # 评论表增加一条记录
            comment = Comment.objects.create(user_id=user_id, article_id=article_id, content=content, parent_comment_id=pid)
            # 当前文章的评论数加1
            Article.objects.filter(pk=article_id).update(comment_count=F("comment_count") + 1)

        response = {"state": False}  # 初始状态

        if comment.user_id:  # 判断返回值
            response = {"state": True}

        #响应体增加3个变量
        response["timer"] = comment.create_time.strftime("%Y-%m-%d %X")
        response["content"] = comment.content
        response["user"] = request.user.username

        return JsonResponse(response)  # 返回json对象

    else:
        return HttpResponse("非法请求")

修改article_detail.html中的js代码，使用append最加一段li标签

{% extends "base.html" %}

{% block content %}
    <div class="article_info">
        <h4 class="text-center">{{ article_obj.title }}</h4>
        <div class="content">
            {{ article_obj.content|safe }}
        </div>
        <div id="div_digg">
            <div class="diggit action">
                <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
            </div>
            <div class="buryit action">
                <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="digg_tips">
            </div>
        </div>
        <div class="clearfix"></div>

        <div class="comment">
            <p>评论列表</p>
            <ul class="comment_list list-group">
                {% for comment in comment_list %}
                    <li class="list-group-item">
                        <div>
                            <a href="">#{{ forloop.counter }}楼</a>  
                            <span class="small">{{ comment.create_time|date:"Y-m-d H:i" }}</span>  
                            <a href="">{{ comment.user.username }}</a>
                            <a href="" class="pull-right"><span>回复</span></a>

                        </div>
                        <div>
                            <p>{{ comment.content }}</p>
                        </div>
                    </li>
                {% endfor %}

            </ul>
            <p>发表评论</p>
            <p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                         value="{{ request.user.username }}"></p>
            <div>
                <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
            </div>
            <input type="button" value="submit" class="btn btn-default comment_btn">
        </div>

    </div>
    {% csrf_token %}
    <script>
        // 点赞和踩灭
        $(".action").click(function () {
            {#hasClass() 方法检查被选元素是否包含指定的 class#}
            var is_up = $(this).hasClass("diggit");
            {#获取提示的span标签#}
            var _this = $(this).children("span");
            {#判断是否登录#}
            if ("{{ request.user.username }}") {
                $.ajax({
                    url: "/digg/",
                    type: "post",
                    data: {
                        is_up: is_up,
                        article_id: "{{ article_obj.pk }}",
                        csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
                    },
                    success: function (data) {
                        console.log(data);
                        console.log(typeof data);
                        if (data.state) {
                            //提交成功
                            var val = _this.text();  //获取text值
                            //在原有的基础上加1。注意:一定要进行类型转换
                            _this.text(parseInt(val) + 1)
                        } else {
                            // 重复提交
                            var val = data.handled ? "您已经推荐过！" : "您已经反对过！";
                            $("#digg_tips").html(val);
                            setTimeout(function () {
                                $("#digg_tips").html("")  //清空提示文字
                            }, 1000)
                        }

                    }
                })
            } else {
                location.href = "/login/";
            }

        })

        // 提交评论
        $(".comment_btn").click(function () {
            {#评论内容#}
            var content = $("#comment_content").val();
            {#默认为空#}
            var pid = "";
            $.ajax({
                url: "/comment/",
                type: "post",
                data: {
                    content: content,
                    article_id: "{{ article_obj.pk }}",
                    pid: pid,
                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
                },
                success: function (data) {
                    console.log(data);
                    {#获取3个值#}
                    var comment_time = data.timer;
                    var comment_content = data.content;
                    var comment_user = data.user;
                    {#组织li标签#}
                    var $li = ` <li class="list-group-item">
                                       <div>
                                           <span class="small">${comment_time}</span>  
                                           <a href="">${comment_user}</a>
                                       </div>
                                       <div>
                                           <p>${comment_content}</p>
                                       </div>
                                    </li>`;
                    {#追加到评论列表中#}
                    $(".comment_list").append($li);
                    // 清空输入框的内容
                    $("#comment_content").val("")
                }
            })

        })
    </script>

{% endblock %}

刷新网页，重新评论，效果如下：

评论可以实时展示了

Day82 点赞和踩灭,用户评论 - 图22

刷新网页，效果如下：

显示出楼层

Day82 点赞和踩灭,用户评论 - 图23