zoukankan html css js c++ java

python 全栈开发，Day82(点赞和踩灭,用户评论)

一、点赞和踩灭

样式

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

{% 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">

<span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>

</div>

<div class="buryit">

<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>
{% endblock %}

View Code

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

#div_digg {
    float: right;
    margin-bottom: 10px;
    margin-right: 30px;
    font-size: 12px;
     125px;
    text-align: center;
    margin-top: 10px;
}
.diggit {

float: left;

 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;

 46px;

height: 52px;

background: url("/static/img/downdown.gif") no-repeat;

text-align: center;

cursor: pointer;

margin-top: 2px;

padding-top: 5px;

}

View Code

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

修改base.html，引入article_detail.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="https://common.cnblogs.com/favicon.ico" type="image/x-icon"/>
    {#公共样式#}
    <link rel="stylesheet" href="/static/css/theme/common.css">
    {#个人站点主题样式#}
    <link rel="stylesheet" href="/static/css/theme/{{ blog.theme }}">
    {#bootstrap#}
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <script src="/static/js/jquery.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    {#文章详情#}
    <link rel="stylesheet" href="/static/css/article_detail.css">
</head>

<body>

<div class="header">

<p class="title">{{ blog.title }}</p>

</div>
<div class="container-fluid">

<div class="row">

<div class="col-md-3">

{#加载自定义标签模块#}

{% load my_tags %}

{#调用get_query_data标签,它返回left_region.html,是已经被渲染过的文件#}

{% get_query_data username %}

</div>

<div class="col-md-9">
        {</span>% block content %<span style="color: #000000;">}

        {</span>% endblock %<span style="color: #000000;">}

    </span>&lt;/div&gt;
&lt;/div&gt;

</div>
</body>

</html>

View Code

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

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

绑定事件

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

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

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

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

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

{% 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>

<script>

$(".action").click(function () {

{#hasClass() 方法检查被选元素是否包含指定的 class#}

var is_up = $(this).hasClass("diggit");

alert(is_up);
    })
</span>&lt;/script&gt;<span style="color: #000000;">

{% endblock %}

View Code

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

点击反对，提示false

发送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变量，也可以知道。

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

操作流程

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

服务器处理

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', views.login),
    path('index/', views.index),
    path('logout/', views.logout),
    path('', views.index),
    #点赞或者踩灭
    path('digg/', views.digg),
</span><span style="color: #008000;">#</span><span style="color: #008000;">文章详情</span>
re_path(<span style="color: #800000;">'</span><span style="color: #800000;">(?P&lt;username&gt;w+)/articles/(?P&lt;article_id&gt;d+)/$</span><span style="color: #800000;">'</span><span style="color: #000000;">, views.article_detail),
</span><span style="color: #008000;">#</span><span style="color: #008000;"> 跳转</span>
re_path(<span style="color: #800000;">'</span><span style="color: #800000;">(?P&lt;username&gt;w+)/(?P&lt;condition&gt;category|tag|achrive)/(?P&lt;params&gt;.*)/$</span><span style="color: #800000;">'</span><span style="color: #000000;">, views.homesite),
</span><span style="color: #008000;">#</span><span style="color: #008000;"> 个人站点</span>
re_path(<span style="color: #800000;">'</span><span style="color: #800000;">(?P&lt;username&gt;w+)/$</span><span style="color: #800000;">'</span><span style="color: #000000;">, views.homesite),

]

View Code

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

修改article_detail.html

{% 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>

{% csrf_token %}

<script>

$(".action").click(function () {

{#hasClass() 方法检查被选元素是否包含指定的 class#}

var is_up = $(this).hasClass("diggit");

{#判断是否登录#}

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);
                }
            })
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            location.href </span>= <span style="color: #800000;">"</span><span style="color: #800000;">/login/</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        }

    })
</span>&lt;/script&gt;<span style="color: #000000;">

{% endblock %}

View Code

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

注意：导入2个模块

import json
from django.http import JsonResponse

视图函数如下：

from django.shortcuts import render,HttpResponse,redirect
from django.contrib import auth
from blog.models import Article,UserInfo,Blog,Category,Tag,ArticleUpDown
from django.db.models import Sum,Avg,Max,Min,Count
from django.db.models import F
import json
from django.http import JsonResponse
# Create your views here.

def login(request):
</span><span style="color: #0000ff;">if</span> request.method==<span style="color: #800000;">"</span><span style="color: #800000;">POST</span><span style="color: #800000;">"</span><span style="color: #000000;">:
    user</span>=request.POST.get(<span style="color: #800000;">"</span><span style="color: #800000;">user</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    pwd</span>=request.POST.get(<span style="color: #800000;">"</span><span style="color: #800000;">pwd</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    </span><span style="color: #008000;">#</span><span style="color: #008000;"> 用户验证成功,返回user对象,否则返回None</span>
    user=auth.authenticate(username=user,password=<span style="color: #000000;">pwd)
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> user:
        </span><span style="color: #008000;">#</span><span style="color: #008000;"> 登录,注册session</span>
        <span style="color: #008000;">#</span><span style="color: #008000;"> 全局变量 request.user=当前登陆对象(session中)</span>

            auth.login(request,user)

return redirect("/index/")
</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">login.html</span><span style="color: #800000;">"</span><span style="color: #000000;">)

def index(request):

article_list=Article.objects.all()

return render(request,"index.html",{"article_list":article_list})
def logout(request):  # 注销

    auth.logout(request)

return redirect("/index/")
def query_current_site(request,username):  # 查询当前站点的博客标题

# 查询当前站点的用户对象

user = UserInfo.objects.filter(username=username).first()

if not user:

return render(request, "not_found.html")

# 查询当前站点对象

blog = user.blog

return blog
def homesite(request,username,**kwargs):  # 个人站点主页

print("kwargs", kwargs)
blog </span>=<span style="color: #000000;"> query_current_site(request,username)

</span><span style="color: #008000;">#</span><span style="color: #008000;"> 查询当前用户发布的所有文章</span>
<span style="color: #0000ff;">if</span> <span style="color: #0000ff;">not</span><span style="color: #000000;"> kwargs:
    article_list </span>= Article.objects.filter(user__username=<span style="color: #000000;">username)
</span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
    condition </span>= kwargs.get(<span style="color: #800000;">"</span><span style="color: #800000;">condition</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    params </span>= kwargs.get(<span style="color: #800000;">"</span><span style="color: #800000;">params</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    </span><span style="color: #008000;">#</span><span style="color: #008000;">判断分类、随笔、归档</span>
    <span style="color: #0000ff;">if</span> condition == <span style="color: #800000;">"</span><span style="color: #800000;">category</span><span style="color: #800000;">"</span><span style="color: #000000;">:
        article_list </span>= Article.objects.filter(user__username=username).filter(category__title=<span style="color: #000000;">params)
    </span><span style="color: #0000ff;">elif</span> condition == <span style="color: #800000;">"</span><span style="color: #800000;">tag</span><span style="color: #800000;">"</span><span style="color: #000000;">:
        article_list </span>= Article.objects.filter(user__username=username).filter(tags__title=<span style="color: #000000;">params)
    </span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
        year, month </span>= params.split(<span style="color: #800000;">"</span><span style="color: #800000;">/</span><span style="color: #800000;">"</span><span style="color: #000000;">)
        article_list </span>= Article.objects.filter(user__username=username).filter(create_time__year=<span style="color: #000000;">year,
                                                                              create_time__month</span>=<span style="color: #000000;">month)
</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">homesite.html</span><span style="color: #800000;">"</span>,{<span style="color: #800000;">"</span><span style="color: #800000;">blog</span><span style="color: #800000;">"</span>:blog,<span style="color: #800000;">"</span><span style="color: #800000;">username</span><span style="color: #800000;">"</span>:username,<span style="color: #800000;">"</span><span style="color: #800000;">article_list</span><span style="color: #800000;">"</span><span style="color: #000000;">:article_list})

def article_detail(request,username,article_id):

blog = query_current_site(request,username)
</span><span style="color: #008000;">#</span><span style="color: #008000;">查询指定id的文章</span>
article_obj = Article.objects.filter(pk=<span style="color: #000000;">article_id).first()
user_id </span>= UserInfo.objects.filter(username=<span style="color: #000000;">username).first().nid

</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">'</span><span style="color: #800000;">article_detail.html</span><span style="color: #800000;">'</span>,{<span style="color: #800000;">"</span><span style="color: #800000;">blog</span><span style="color: #800000;">"</span>:blog,<span style="color: #800000;">"</span><span style="color: #800000;">username</span><span style="color: #800000;">"</span>:username,<span style="color: #800000;">'</span><span style="color: #800000;">article_obj</span><span style="color: #800000;">'</span>:article_obj,<span style="color: #800000;">"</span><span style="color: #800000;">user_id</span><span style="color: #800000;">"</span><span style="color: #000000;">:user_id})

def digg(request):

print(request.POST)

if request.method == "POST":

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

is_up = json.loads(request.POST.get("is_up"))

article_id = request.POST.get("article_id")

user_id = request.user.pk
    response </span>= {<span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>: True, <span style="color: #800000;">"</span><span style="color: #800000;">msg</span><span style="color: #800000;">"</span>: None}  <span style="color: #008000;">#</span><span style="color: #008000;"> 初始状态</span>
    <span style="color: #008000;">#</span><span style="color: #008000;">判断当前登录用户是否对这篇文章做过点赞或者踩灭操作</span>
    obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=<span style="color: #000000;">article_id).first()
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> obj:
        response[</span><span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>] = False  <span style="color: #008000;">#</span><span style="color: #008000;"> 更改状态</span>
    <span style="color: #0000ff;">else</span><span style="color: #000000;">:
        </span><span style="color: #008000;">#</span><span style="color: #008000;">插入一条记录</span>
        new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=<span style="color: #000000;">is_up)

    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> JsonResponse(response)

</span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
    </span><span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">"</span><span style="color: #800000;">非法请求</span><span style="color: #800000;">"</span>)</pre>

View Code

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接收时，不需要反序列化，可以直接使用！

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

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

查看Pycharm控制台输出：

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

判断用户之前的操作

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

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

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

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

def digg(request):
    print(request.POST)
    if request.method == "POST":
        #ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值
        is_up = json.loads(request.POST.get("is_up"))
        article_id = request.POST.get("article_id")
        user_id = request.user.pk
    response </span>= {<span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>: True, <span style="color: #800000;">"</span><span style="color: #800000;">msg</span><span style="color: #800000;">"</span>: None}  <span style="color: #008000;">#</span><span style="color: #008000;"> 初始状态</span>
    <span style="color: #008000;">#</span><span style="color: #008000;">判断当前登录用户是否对这篇文章做过点赞或者踩灭操作</span>
    obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=<span style="color: #000000;">article_id).first()
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> obj:
        response[</span><span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>] = False  <span style="color: #008000;">#</span><span style="color: #008000;"> 更改状态</span>
        response[<span style="color: #800000;">"</span><span style="color: #800000;">handled</span><span style="color: #800000;">"</span>] = obj.is_up  <span style="color: #008000;">#</span><span style="color: #008000;"> 获取之前的操作,返回true或者false</span>
        <span style="color: #0000ff;">print</span><span style="color: #000000;">(obj.is_up)
    </span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
        </span><span style="color: #008000;">#</span><span style="color: #008000;">插入一条记录</span>
        new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=<span style="color: #000000;">is_up)

    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> JsonResponse(response)

</span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
    </span><span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">"</span><span style="color: #800000;">非法请求</span><span style="color: #800000;">"</span>)</pre>

View Code

修改article_detail.html的js代码

{% 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>

{% csrf_token %}

<script>

$(".action").click(function () {

{#hasClass() 方法检查被选元素是否包含指定的 class#}

var is_up = $(this).hasClass("diggit");

{#判断是否登录#}

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) {

//提交成功

} else {

if (data.handled) {  //判断之前的操作记录

$("#digg_tips").html("您已经推荐过！")

} else {

$("#digg_tips").html("您已经反对过！")

}

}
                }
            })
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            location.href </span>= <span style="color: #800000;">"</span><span style="color: #800000;">/login/</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        }

    })
</span>&lt;/script&gt;<span style="color: #000000;">

{% endblock %}

View Code

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

#div_digg {
    float: right;
    margin-bottom: 10px;
    margin-right: 30px;
    font-size: 12px;
     125px;
    text-align: center;
    margin-top: 10px;
}
.diggit {

float: left;

 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;

 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;

}
#digg_tips{

    color: red;

}

View Code

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

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

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

{% 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>

{% csrf_token %}

<script>

$(".action").click(function () {

{#hasClass() 方法检查被选元素是否包含指定的 class#}

var is_up = $(this).hasClass("diggit");

{#判断是否登录#}

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) {

//提交成功

} else {

if (data.handled) {  //判断之前的操作记录

$("#digg_tips").html("您已经推荐过！")

} else {

$("#digg_tips").html("您已经反对过！")

}

setTimeout(function () {

$("#digg_tips").html("")  //清空提示文字

}, 1000)

}
                }
            })
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            location.href </span>= <span style="color: #800000;">"</span><span style="color: #800000;">/login/</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        }

    })
</span>&lt;/script&gt;<span style="color: #000000;">

{% endblock %}

View Code

效果如下：

更新文章表

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

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

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

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

def digg(request):
    print(request.POST)
    if request.method == "POST":
        #ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值
        is_up = json.loads(request.POST.get("is_up"))
        article_id = request.POST.get("article_id")
        user_id = request.user.pk
    response </span>= {<span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>: True, <span style="color: #800000;">"</span><span style="color: #800000;">msg</span><span style="color: #800000;">"</span>: None}  <span style="color: #008000;">#</span><span style="color: #008000;"> 初始状态</span>
    <span style="color: #008000;">#</span><span style="color: #008000;">判断当前登录用户是否对这篇文章做过点赞或者踩灭操作</span>
    obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=<span style="color: #000000;">article_id).first()
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> obj:
        response[</span><span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>] = False  <span style="color: #008000;">#</span><span style="color: #008000;"> 更改状态</span>
        response[<span style="color: #800000;">"</span><span style="color: #800000;">handled</span><span style="color: #800000;">"</span>] = obj.is_up  <span style="color: #008000;">#</span><span style="color: #008000;"> 获取之前的操作,返回true或者false</span>
        <span style="color: #0000ff;">print</span><span style="color: #000000;">(obj.is_up)
    </span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
        </span><span style="color: #008000;">#</span><span style="color: #008000;">插入一条记录</span>
        new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=<span style="color: #000000;">is_up)
        </span><span style="color: #0000ff;">if</span> is_up: <span style="color: #008000;">#</span><span style="color: #008000;"> 判断为推荐</span>
            Article.objects.filter(pk=article_id).update(up_count=F(<span style="color: #800000;">"</span><span style="color: #800000;">up_count</span><span style="color: #800000;">"</span>)+1<span style="color: #000000;">)
        </span><span style="color: #0000ff;">else</span>: <span style="color: #008000;">#</span><span style="color: #008000;"> 反对</span>
            Article.objects.filter(pk=article_id).update(down_count=F(<span style="color: #800000;">"</span><span style="color: #800000;">down_count</span><span style="color: #800000;">"</span>)+1<span style="color: #000000;">)

    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> JsonResponse(response)

</span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
    </span><span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">"</span><span style="color: #800000;">非法请求</span><span style="color: #800000;">"</span>)</pre>

View Code

清空blog_articleupdown表记录

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

网页实时展示

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

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

修改article_detail.html的js代码

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

{% 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>

{% 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 {

if (data.handled) {  //判断之前的操作记录

$("#digg_tips").html("您已经推荐过！")

} else {

$("#digg_tips").html("您已经反对过！")

}

setTimeout(function () {

$("#digg_tips").html("")  //清空提示文字

}, 1000)

}
                }
            })
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            location.href </span>= <span style="color: #800000;">"</span><span style="color: #800000;">/login/</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        }

    })
</span>&lt;/script&gt;<span style="color: #000000;">

{% endblock %}

View Code

清空blog_articleupdown表记录

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

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

优化js代码

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

{% 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>

{% 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)

}
                }
            })
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            location.href </span>= <span style="color: #800000;">"</span><span style="color: #800000;">/login/</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        }

    })
</span>&lt;/script&gt;<span style="color: #000000;">

{% endblock %}

View Code

事务

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

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

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

举例：模拟异常情况

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

def digg(request):
    print(request.POST)
    if request.method == "POST":
        #ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值
        is_up = json.loads(request.POST.get("is_up"))
        article_id = request.POST.get("article_id")
        user_id = request.user.pk
    response </span>= {<span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>: True, <span style="color: #800000;">"</span><span style="color: #800000;">msg</span><span style="color: #800000;">"</span>: None}  <span style="color: #008000;">#</span><span style="color: #008000;"> 初始状态</span>
    <span style="color: #008000;">#</span><span style="color: #008000;">判断当前登录用户是否对这篇文章做过点赞或者踩灭操作</span>
    obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=<span style="color: #000000;">article_id).first()
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> obj:
        response[</span><span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>] = False  <span style="color: #008000;">#</span><span style="color: #008000;"> 更改状态</span>
        response[<span style="color: #800000;">"</span><span style="color: #800000;">handled</span><span style="color: #800000;">"</span>] = obj.is_up  <span style="color: #008000;">#</span><span style="color: #008000;"> 获取之前的操作,返回true或者false</span>
        <span style="color: #0000ff;">print</span><span style="color: #000000;">(obj.is_up)
    </span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
        </span><span style="color: #008000;">#</span><span style="color: #008000;">插入一条记录</span>
        new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=<span style="color: #000000;">is_up)
        ask  </span><span style="color: #008000;">#</span><span style="color: #008000;"> 这一行故意出错</span>
        <span style="color: #0000ff;">if</span> is_up: <span style="color: #008000;">#</span><span style="color: #008000;"> 判断为推荐</span>
            Article.objects.filter(pk=article_id).update(up_count=F(<span style="color: #800000;">"</span><span style="color: #800000;">up_count</span><span style="color: #800000;">"</span>)+1<span style="color: #000000;">)
        </span><span style="color: #0000ff;">else</span>: <span style="color: #008000;">#</span><span style="color: #008000;"> 反对</span>
            Article.objects.filter(pk=article_id).update(down_count=F(<span style="color: #800000;">"</span><span style="color: #800000;">down_count</span><span style="color: #800000;">"</span>)+1<span style="color: #000000;">)

    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> JsonResponse(response)

</span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
    </span><span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">"</span><span style="color: #800000;">非法请求</span><span style="color: #800000;">"</span>)</pre>

View Code

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

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

出行了500错误

查看blog_articleupdown表，多了一条记录

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

使用事务

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

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

完整代码如下：

from django.shortcuts import render,HttpResponse,redirect
from django.contrib import auth
from blog.models import Article,UserInfo,Blog,Category,Tag,ArticleUpDown
from django.db.models import Sum,Avg,Max,Min,Count
from django.db.models import F
import json
from django.http import JsonResponse
from django.db import transaction
# Create your views here.

def login(request):
</span><span style="color: #0000ff;">if</span> request.method==<span style="color: #800000;">"</span><span style="color: #800000;">POST</span><span style="color: #800000;">"</span><span style="color: #000000;">:
    user</span>=request.POST.get(<span style="color: #800000;">"</span><span style="color: #800000;">user</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    pwd</span>=request.POST.get(<span style="color: #800000;">"</span><span style="color: #800000;">pwd</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    </span><span style="color: #008000;">#</span><span style="color: #008000;"> 用户验证成功,返回user对象,否则返回None</span>
    user=auth.authenticate(username=user,password=<span style="color: #000000;">pwd)
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> user:
        </span><span style="color: #008000;">#</span><span style="color: #008000;"> 登录,注册session</span>
        <span style="color: #008000;">#</span><span style="color: #008000;"> 全局变量 request.user=当前登陆对象(session中)</span>

            auth.login(request,user)

return redirect("/index/")
</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">login.html</span><span style="color: #800000;">"</span><span style="color: #000000;">)

def index(request):

article_list=Article.objects.all()

return render(request,"index.html",{"article_list":article_list})
def logout(request):  # 注销

    auth.logout(request)

return redirect("/index/")
def query_current_site(request,username):  # 查询当前站点的博客标题

# 查询当前站点的用户对象

user = UserInfo.objects.filter(username=username).first()

if not user:

return render(request, "not_found.html")

# 查询当前站点对象

blog = user.blog

return blog
def homesite(request,username,**kwargs):  # 个人站点主页

print("kwargs", kwargs)
blog </span>=<span style="color: #000000;"> query_current_site(request,username)

</span><span style="color: #008000;">#</span><span style="color: #008000;"> 查询当前用户发布的所有文章</span>
<span style="color: #0000ff;">if</span> <span style="color: #0000ff;">not</span><span style="color: #000000;"> kwargs:
    article_list </span>= Article.objects.filter(user__username=<span style="color: #000000;">username)
</span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
    condition </span>= kwargs.get(<span style="color: #800000;">"</span><span style="color: #800000;">condition</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    params </span>= kwargs.get(<span style="color: #800000;">"</span><span style="color: #800000;">params</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    </span><span style="color: #008000;">#</span><span style="color: #008000;">判断分类、随笔、归档</span>
    <span style="color: #0000ff;">if</span> condition == <span style="color: #800000;">"</span><span style="color: #800000;">category</span><span style="color: #800000;">"</span><span style="color: #000000;">:
        article_list </span>= Article.objects.filter(user__username=username).filter(category__title=<span style="color: #000000;">params)
    </span><span style="color: #0000ff;">elif</span> condition == <span style="color: #800000;">"</span><span style="color: #800000;">tag</span><span style="color: #800000;">"</span><span style="color: #000000;">:
        article_list </span>= Article.objects.filter(user__username=username).filter(tags__title=<span style="color: #000000;">params)
    </span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
        year, month </span>= params.split(<span style="color: #800000;">"</span><span style="color: #800000;">/</span><span style="color: #800000;">"</span><span style="color: #000000;">)
        article_list </span>= Article.objects.filter(user__username=username).filter(create_time__year=<span style="color: #000000;">year,
                                                                              create_time__month</span>=<span style="color: #000000;">month)
</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">homesite.html</span><span style="color: #800000;">"</span>,{<span style="color: #800000;">"</span><span style="color: #800000;">blog</span><span style="color: #800000;">"</span>:blog,<span style="color: #800000;">"</span><span style="color: #800000;">username</span><span style="color: #800000;">"</span>:username,<span style="color: #800000;">"</span><span style="color: #800000;">article_list</span><span style="color: #800000;">"</span><span style="color: #000000;">:article_list})

def article_detail(request,username,article_id):

blog = query_current_site(request,username)
</span><span style="color: #008000;">#</span><span style="color: #008000;">查询指定id的文章</span>
article_obj = Article.objects.filter(pk=<span style="color: #000000;">article_id).first()
user_id </span>= UserInfo.objects.filter(username=<span style="color: #000000;">username).first().nid

</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">'</span><span style="color: #800000;">article_detail.html</span><span style="color: #800000;">'</span>,{<span style="color: #800000;">"</span><span style="color: #800000;">blog</span><span style="color: #800000;">"</span>:blog,<span style="color: #800000;">"</span><span style="color: #800000;">username</span><span style="color: #800000;">"</span>:username,<span style="color: #800000;">'</span><span style="color: #800000;">article_obj</span><span style="color: #800000;">'</span>:article_obj,<span style="color: #800000;">"</span><span style="color: #800000;">user_id</span><span style="color: #800000;">"</span><span style="color: #000000;">:user_id})

def digg(request):

print(request.POST)

if request.method == "POST":

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

is_up = json.loads(request.POST.get("is_up"))

article_id = request.POST.get("article_id")

user_id = request.user.pk
    response </span>= {<span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>: True, <span style="color: #800000;">"</span><span style="color: #800000;">msg</span><span style="color: #800000;">"</span>: None}  <span style="color: #008000;">#</span><span style="color: #008000;"> 初始状态</span>
    <span style="color: #008000;">#</span><span style="color: #008000;">判断当前登录用户是否对这篇文章做过点赞或者踩灭操作</span>
    obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=<span style="color: #000000;">article_id).first()
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> obj:
        response[</span><span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>] = False  <span style="color: #008000;">#</span><span style="color: #008000;"> 更改状态</span>
        response[<span style="color: #800000;">"</span><span style="color: #800000;">handled</span><span style="color: #800000;">"</span>] = obj.is_up  <span style="color: #008000;">#</span><span style="color: #008000;"> 获取之前的操作,返回true或者false</span>
        <span style="color: #0000ff;">print</span><span style="color: #000000;">(obj.is_up)
    </span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
        with transaction.atomic():
            </span><span style="color: #008000;">#</span><span style="color: #008000;">插入一条记录</span>
            new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=<span style="color: #000000;">is_up)
            ask  </span><span style="color: #008000;">#</span><span style="color: #008000;"> 模拟异常</span>
            <span style="color: #0000ff;">if</span> is_up: <span style="color: #008000;">#</span><span style="color: #008000;"> 判断为推荐</span>
                Article.objects.filter(pk=article_id).update(up_count=F(<span style="color: #800000;">"</span><span style="color: #800000;">up_count</span><span style="color: #800000;">"</span>)+1<span style="color: #000000;">)
            </span><span style="color: #0000ff;">else</span>: <span style="color: #008000;">#</span><span style="color: #008000;"> 反对</span>
                Article.objects.filter(pk=article_id).update(down_count=F(<span style="color: #800000;">"</span><span style="color: #800000;">down_count</span><span style="color: #800000;">"</span>)+1<span style="color: #000000;">)

    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> JsonResponse(response)

</span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
    </span><span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">"</span><span style="color: #800000;">非法请求</span><span style="color: #800000;">"</span>)</pre>

View Code

清空blog_articleupdown表

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

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

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

def digg(request):
    print(request.POST)
    if request.method == "POST":
        #ajax发送的过来的true和false是字符串，使用json反序列化得到布尔值
        is_up = json.loads(request.POST.get("is_up"))
        article_id = request.POST.get("article_id")
        user_id = request.user.pk
    response </span>= {<span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>: True, <span style="color: #800000;">"</span><span style="color: #800000;">msg</span><span style="color: #800000;">"</span>: None}  <span style="color: #008000;">#</span><span style="color: #008000;"> 初始状态</span>
    <span style="color: #008000;">#</span><span style="color: #008000;">判断当前登录用户是否对这篇文章做过点赞或者踩灭操作</span>
    obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=<span style="color: #000000;">article_id).first()
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> obj:
        response[</span><span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>] = False  <span style="color: #008000;">#</span><span style="color: #008000;"> 更改状态</span>
        response[<span style="color: #800000;">"</span><span style="color: #800000;">handled</span><span style="color: #800000;">"</span>] = obj.is_up  <span style="color: #008000;">#</span><span style="color: #008000;"> 获取之前的操作,返回true或者false</span>
        <span style="color: #0000ff;">print</span><span style="color: #000000;">(obj.is_up)
    </span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
        with transaction.atomic():
            </span><span style="color: #008000;">#</span><span style="color: #008000;">插入一条记录</span>
            new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=<span style="color: #000000;">is_up)
            </span><span style="color: #0000ff;">if</span> is_up: <span style="color: #008000;">#</span><span style="color: #008000;"> 判断为推荐</span>
                Article.objects.filter(pk=article_id).update(up_count=F(<span style="color: #800000;">"</span><span style="color: #800000;">up_count</span><span style="color: #800000;">"</span>)+1<span style="color: #000000;">)
            </span><span style="color: #0000ff;">else</span>: <span style="color: #008000;">#</span><span style="color: #008000;"> 反对</span>
                Article.objects.filter(pk=article_id).update(down_count=F(<span style="color: #800000;">"</span><span style="color: #800000;">down_count</span><span style="color: #800000;">"</span>)+1<span style="color: #000000;">)

    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> JsonResponse(response)

</span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
    </span><span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">"</span><span style="color: #800000;">非法请求</span><span style="color: #800000;">"</span>)</pre>

View Code

刷新页面，重新点击

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

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

事务用起来很简单，是因为django把复杂的逻辑给封装好了！
有时间的小伙伴，还可以加一个需求，自己不能给自己点赞！

二、用户评论

评论样式

先写html的样式代码

修改article_detail.html

{% 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>
    &lt;div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">comment</span><span style="color: #800000;">"</span>&gt;
        &lt;p&gt;评论列表&lt;/p&gt;
        &lt;ul <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">comment_list list-group</span><span style="color: #800000;">"</span>&gt;<span style="color: #000000;">
            {</span>% <span style="color: #0000ff;">for</span> comment <span style="color: #0000ff;">in</span> comment_list %<span style="color: #000000;">}
            </span>&lt;li <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">list-group-item</span><span style="color: #800000;">"</span>&gt;
               &lt;div&gt;
                   &lt;a href=<span style="color: #800000;">""</span>&gt;<span style="color: #008000;">#</span><span style="color: #008000;">{{ forloop.counter }}楼&lt;/a&gt;&amp;nbsp;&amp;nbsp;</span>
                   &lt;span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">small</span><span style="color: #800000;">"</span>&gt;{{ comment.create_time|date:<span style="color: #800000;">"</span><span style="color: #800000;">Y-m-d H:i</span><span style="color: #800000;">"</span> }}&lt;/span&gt;&amp;nbsp;&amp;<span style="color: #000000;">nbsp;
                   </span>&lt;a href=<span style="color: #800000;">""</span>&gt;{{ comment.user.username }}&lt;/a&gt;
                   &lt;a href=<span style="color: #800000;">""</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">pull-right</span><span style="color: #800000;">"</span>&gt;&lt;span&gt;回复&lt;/span&gt;&lt;/a&gt;

               &lt;/div&gt;
               &lt;div&gt;
                   &lt;p&gt;{{ comment.content }}&lt;/p&gt;
               &lt;/div&gt;
            &lt;/li&gt;<span style="color: #000000;">
            {</span>% endfor %<span style="color: #000000;">}

        </span>&lt;/ul&gt;
        &lt;p&gt;发表评论&lt;/p&gt;
        &lt;p&gt;昵称：&lt;input type=<span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">tbCommentAuthor</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">author</span><span style="color: #800000;">"</span> disabled=<span style="color: #800000;">"</span><span style="color: #800000;">disabled</span><span style="color: #800000;">"</span> size=<span style="color: #800000;">"</span><span style="color: #800000;">50</span><span style="color: #800000;">"</span> value=<span style="color: #800000;">"</span><span style="color: #800000;">{{ request.user.username }}</span><span style="color: #800000;">"</span>&gt;&lt;/p&gt;
        &lt;div&gt;
            &lt;textarea name=<span style="color: #800000;">""</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">comment_content</span><span style="color: #800000;">"</span> cols=<span style="color: #800000;">"</span><span style="color: #800000;">60</span><span style="color: #800000;">"</span> rows=<span style="color: #800000;">"</span><span style="color: #800000;">10</span><span style="color: #800000;">"</span>&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;input type=<span style="color: #800000;">"</span><span style="color: #800000;">button</span><span style="color: #800000;">"</span> value=<span style="color: #800000;">"</span><span style="color: #800000;">submit</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">btn btn-default comment_btn</span><span style="color: #800000;">"</span>&gt;
    &lt;/div&gt;

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

                }
            })
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            location.href </span>= <span style="color: #800000;">"</span><span style="color: #800000;">/login/</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        }

    })
</span>&lt;/script&gt;<span style="color: #000000;">

{% endblock %}

View Code

修改css目录下的article_detail.css

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

/*推荐和反对*/
#div_digg {
    float: right;
    margin-bottom: 10px;
    margin-right: 30px;
    font-size: 12px;
     125px;
    text-align: center;
    margin-top: 10px;
}
.diggit {

float: left;

 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;

 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;

}
#digg_tips{

    color: red;

}
/评论/

input.author{

background-image: url("/static/img/icon_form.gif");

background-repeat: no-repeat;

border: 1px solid #ccc;

    padding: 4px 4px 4px 30px;

 300px;

font-size: 13px;

}
input.author {

background-position: 3px -3px;

}

View Code

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

评论步骤

提交根评论请求
显示根评论

render
Ajax显示

提交子评论
显示子评论
评论树

发送ajax请求

查看评论表模型

class Comment(models.Model):
    """
评论表

</span><span style="color: #800000;">"""</span><span style="color: #000000;">
nid </span>= models.AutoField(primary_key=<span style="color: #000000;">True)
article </span>= models.ForeignKey(verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">评论文章</span><span style="color: #800000;">'</span>, to=<span style="color: #800000;">'</span><span style="color: #800000;">Article</span><span style="color: #800000;">'</span>, to_field=<span style="color: #800000;">'</span><span style="color: #800000;">nid</span><span style="color: #800000;">'</span>, on_delete=<span style="color: #000000;">models.CASCADE)
user </span>= models.ForeignKey(verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">评论者</span><span style="color: #800000;">'</span>, to=<span style="color: #800000;">'</span><span style="color: #800000;">UserInfo</span><span style="color: #800000;">'</span>, to_field=<span style="color: #800000;">'</span><span style="color: #800000;">nid</span><span style="color: #800000;">'</span>, on_delete=<span style="color: #000000;">models.CASCADE)
content </span>= models.CharField(verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">评论内容</span><span style="color: #800000;">'</span>, max_length=255<span style="color: #000000;">)
create_time </span>= models.DateTimeField(verbose_name=<span style="color: #800000;">'</span><span style="color: #800000;">创建时间</span><span style="color: #800000;">'</span>, auto_now_add=<span style="color: #000000;">True)
parent_comment </span>= models.ForeignKey(verbose_name=<span style="color: #800000;">"</span><span style="color: #800000;">父级评论id</span><span style="color: #800000;">"</span>, to=<span style="color: #800000;">'</span><span style="color: #800000;">Comment</span><span style="color: #800000;">'</span>,null=True, on_delete=models.CASCADE)</pre>

View Code

它有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

{% 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>
    &lt;div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">comment</span><span style="color: #800000;">"</span>&gt;
        &lt;p&gt;评论列表&lt;/p&gt;
        &lt;ul <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">comment_list list-group</span><span style="color: #800000;">"</span>&gt;<span style="color: #000000;">
            {</span>% <span style="color: #0000ff;">for</span> comment <span style="color: #0000ff;">in</span> comment_list %<span style="color: #000000;">}
                </span>&lt;li <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">list-group-item</span><span style="color: #800000;">"</span>&gt;
                    &lt;div&gt;
                        &lt;a href=<span style="color: #800000;">""</span>&gt;<span style="color: #008000;">#</span><span style="color: #008000;">{{ forloop.counter }}楼&lt;/a&gt;&amp;nbsp;&amp;nbsp;</span>
                        &lt;span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">small</span><span style="color: #800000;">"</span>&gt;{{ comment.create_time|date:<span style="color: #800000;">"</span><span style="color: #800000;">Y-m-d H:i</span><span style="color: #800000;">"</span> }}&lt;/span&gt;&amp;nbsp;&amp;<span style="color: #000000;">nbsp;
                        </span>&lt;a href=<span style="color: #800000;">""</span>&gt;{{ comment.user.username }}&lt;/a&gt;
                        &lt;a href=<span style="color: #800000;">""</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">pull-right</span><span style="color: #800000;">"</span>&gt;&lt;span&gt;回复&lt;/span&gt;&lt;/a&gt;

                    &lt;/div&gt;
                    &lt;div&gt;
                        &lt;p&gt;{{ comment.content }}&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/li&gt;<span style="color: #000000;">
            {</span>% endfor %<span style="color: #000000;">}

        </span>&lt;/ul&gt;
        &lt;p&gt;发表评论&lt;/p&gt;
        &lt;p&gt;昵称：&lt;input type=<span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">tbCommentAuthor</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">author</span><span style="color: #800000;">"</span> disabled=<span style="color: #800000;">"</span><span style="color: #800000;">disabled</span><span style="color: #800000;">"</span> size=<span style="color: #800000;">"</span><span style="color: #800000;">50</span><span style="color: #800000;">"</span><span style="color: #000000;">
                     value</span>=<span style="color: #800000;">"</span><span style="color: #800000;">{{ request.user.username }}</span><span style="color: #800000;">"</span>&gt;&lt;/p&gt;
        &lt;div&gt;
            &lt;textarea name=<span style="color: #800000;">""</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">comment_content</span><span style="color: #800000;">"</span> cols=<span style="color: #800000;">"</span><span style="color: #800000;">60</span><span style="color: #800000;">"</span> rows=<span style="color: #800000;">"</span><span style="color: #800000;">10</span><span style="color: #800000;">"</span>&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;input type=<span style="color: #800000;">"</span><span style="color: #800000;">button</span><span style="color: #800000;">"</span> value=<span style="color: #800000;">"</span><span style="color: #800000;">submit</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">btn btn-default comment_btn</span><span style="color: #800000;">"</span>&gt;
    &lt;/div&gt;

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

                }
            })
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            location.href </span>= <span style="color: #800000;">"</span><span style="color: #800000;">/login/</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        }

    })

    </span>//<span style="color: #000000;"> 提交评论
    $(</span><span style="color: #800000;">"</span><span style="color: #800000;">.comment_btn</span><span style="color: #800000;">"</span><span style="color: #000000;">).click(function () {
        {</span><span style="color: #008000;">#</span><span style="color: #008000;">评论内容#}</span>
        var content = $(<span style="color: #800000;">"</span><span style="color: #800000;">#comment_content</span><span style="color: #800000;">"</span><span style="color: #000000;">).val();
        {</span><span style="color: #008000;">#</span><span style="color: #008000;">默认为空#}</span>
        var pid = <span style="color: #800000;">""</span><span style="color: #000000;">;
        $.ajax({
            url: </span><span style="color: #800000;">"</span><span style="color: #800000;">/comment/</span><span style="color: #800000;">"</span><span style="color: #000000;">,
            type: </span><span style="color: #800000;">"</span><span style="color: #800000;">post</span><span style="color: #800000;">"</span><span style="color: #000000;">,
            data: {
                content: content,
                article_id: </span><span style="color: #800000;">"</span><span style="color: #800000;">{{ article_obj.pk }}</span><span style="color: #800000;">"</span><span style="color: #000000;">,
                pid: pid,
                csrfmiddlewaretoken: $(</span><span style="color: #800000;">"</span><span style="color: #800000;">[name='csrfmiddlewaretoken']</span><span style="color: #800000;">"</span><span style="color: #000000;">).val()
            },
            success: function (data) {
                console.log(data);
                </span>//<span style="color: #000000;"> 清空输入框的内容
                $(</span><span style="color: #800000;">"</span><span style="color: #800000;">#comment_content</span><span style="color: #800000;">"</span>).val(<span style="color: #800000;">""</span><span style="color: #000000;">)
            }
        })

    })
</span>&lt;/script&gt;<span style="color: #000000;">

{% endblock %}

View Code

修改urls.py，增加路径comment

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', views.login),
    path('index/', views.index),
    path('logout/', views.logout),
    path('', views.index),
    #点赞或者踩灭
    path('digg/', views.digg),
    # 评论
    path('comment/', views.comment),
</span><span style="color: #008000;">#</span><span style="color: #008000;">文章详情</span>
re_path(<span style="color: #800000;">'</span><span style="color: #800000;">(?P&lt;username&gt;w+)/articles/(?P&lt;article_id&gt;d+)/$</span><span style="color: #800000;">'</span><span style="color: #000000;">, views.article_detail),
</span><span style="color: #008000;">#</span><span style="color: #008000;"> 跳转</span>
re_path(<span style="color: #800000;">'</span><span style="color: #800000;">(?P&lt;username&gt;w+)/(?P&lt;condition&gt;category|tag|achrive)/(?P&lt;params&gt;.*)/$</span><span style="color: #800000;">'</span><span style="color: #000000;">, views.homesite),
</span><span style="color: #008000;">#</span><span style="color: #008000;"> 个人站点</span>
re_path(<span style="color: #800000;">'</span><span style="color: #800000;">(?P&lt;username&gt;w+)/$</span><span style="color: #800000;">'</span><span style="color: #000000;">, views.homesite),

]

View Code

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

from django.shortcuts import render,HttpResponse,redirect
from django.contrib import auth
from blog.models import Article,UserInfo,Blog,Category,Tag,ArticleUpDown,Comment
from django.db.models import Sum,Avg,Max,Min,Count
from django.db.models import F
import json
from django.http import JsonResponse
from django.db import transaction
# Create your views here.

def login(request):
</span><span style="color: #0000ff;">if</span> request.method==<span style="color: #800000;">"</span><span style="color: #800000;">POST</span><span style="color: #800000;">"</span><span style="color: #000000;">:
    user</span>=request.POST.get(<span style="color: #800000;">"</span><span style="color: #800000;">user</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    pwd</span>=request.POST.get(<span style="color: #800000;">"</span><span style="color: #800000;">pwd</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    </span><span style="color: #008000;">#</span><span style="color: #008000;"> 用户验证成功,返回user对象,否则返回None</span>
    user=auth.authenticate(username=user,password=<span style="color: #000000;">pwd)
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> user:
        </span><span style="color: #008000;">#</span><span style="color: #008000;"> 登录,注册session</span>
        <span style="color: #008000;">#</span><span style="color: #008000;"> 全局变量 request.user=当前登陆对象(session中)</span>

            auth.login(request,user)

return redirect("/index/")
</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">login.html</span><span style="color: #800000;">"</span><span style="color: #000000;">)

def index(request):

article_list=Article.objects.all()

return render(request,"index.html",{"article_list":article_list})
def logout(request):  # 注销

    auth.logout(request)

return redirect("/index/")
def query_current_site(request,username):  # 查询当前站点的博客标题

# 查询当前站点的用户对象

user = UserInfo.objects.filter(username=username).first()

if not user:

return render(request, "not_found.html")

# 查询当前站点对象

blog = user.blog

return blog
def homesite(request,username,**kwargs):  # 个人站点主页

print("kwargs", kwargs)
blog </span>=<span style="color: #000000;"> query_current_site(request,username)

</span><span style="color: #008000;">#</span><span style="color: #008000;"> 查询当前用户发布的所有文章</span>
<span style="color: #0000ff;">if</span> <span style="color: #0000ff;">not</span><span style="color: #000000;"> kwargs:
    article_list </span>= Article.objects.filter(user__username=<span style="color: #000000;">username)
</span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
    condition </span>= kwargs.get(<span style="color: #800000;">"</span><span style="color: #800000;">condition</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    params </span>= kwargs.get(<span style="color: #800000;">"</span><span style="color: #800000;">params</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    </span><span style="color: #008000;">#</span><span style="color: #008000;">判断分类、随笔、归档</span>
    <span style="color: #0000ff;">if</span> condition == <span style="color: #800000;">"</span><span style="color: #800000;">category</span><span style="color: #800000;">"</span><span style="color: #000000;">:
        article_list </span>= Article.objects.filter(user__username=username).filter(category__title=<span style="color: #000000;">params)
    </span><span style="color: #0000ff;">elif</span> condition == <span style="color: #800000;">"</span><span style="color: #800000;">tag</span><span style="color: #800000;">"</span><span style="color: #000000;">:
        article_list </span>= Article.objects.filter(user__username=username).filter(tags__title=<span style="color: #000000;">params)
    </span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
        year, month </span>= params.split(<span style="color: #800000;">"</span><span style="color: #800000;">/</span><span style="color: #800000;">"</span><span style="color: #000000;">)
        article_list </span>= Article.objects.filter(user__username=username).filter(create_time__year=<span style="color: #000000;">year,
                                                                              create_time__month</span>=<span style="color: #000000;">month)
</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">"</span><span style="color: #800000;">homesite.html</span><span style="color: #800000;">"</span>,{<span style="color: #800000;">"</span><span style="color: #800000;">blog</span><span style="color: #800000;">"</span>:blog,<span style="color: #800000;">"</span><span style="color: #800000;">username</span><span style="color: #800000;">"</span>:username,<span style="color: #800000;">"</span><span style="color: #800000;">article_list</span><span style="color: #800000;">"</span><span style="color: #000000;">:article_list})

def article_detail(request,username,article_id):

blog = query_current_site(request,username)
</span><span style="color: #008000;">#</span><span style="color: #008000;">查询指定id的文章</span>
article_obj = Article.objects.filter(pk=<span style="color: #000000;">article_id).first()
user_id </span>= UserInfo.objects.filter(username=<span style="color: #000000;">username).first().nid

</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">'</span><span style="color: #800000;">article_detail.html</span><span style="color: #800000;">'</span>,{<span style="color: #800000;">"</span><span style="color: #800000;">blog</span><span style="color: #800000;">"</span>:blog,<span style="color: #800000;">"</span><span style="color: #800000;">username</span><span style="color: #800000;">"</span>:username,<span style="color: #800000;">'</span><span style="color: #800000;">article_obj</span><span style="color: #800000;">'</span>:article_obj,<span style="color: #800000;">"</span><span style="color: #800000;">user_id</span><span style="color: #800000;">"</span><span style="color: #000000;">:user_id})

def digg(request):

print(request.POST)

if request.method == "POST":

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

is_up = json.loads(request.POST.get("is_up"))

article_id = request.POST.get("article_id")

user_id = request.user.pk
    response </span>= {<span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>: True, <span style="color: #800000;">"</span><span style="color: #800000;">msg</span><span style="color: #800000;">"</span>: None}  <span style="color: #008000;">#</span><span style="color: #008000;"> 初始状态</span>
    <span style="color: #008000;">#</span><span style="color: #008000;">判断当前登录用户是否对这篇文章做过点赞或者踩灭操作</span>
    obj = ArticleUpDown.objects.filter(user_id=user_id, article_id=<span style="color: #000000;">article_id).first()
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> obj:
        response[</span><span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>] = False  <span style="color: #008000;">#</span><span style="color: #008000;"> 更改状态</span>
        response[<span style="color: #800000;">"</span><span style="color: #800000;">handled</span><span style="color: #800000;">"</span>] = obj.is_up  <span style="color: #008000;">#</span><span style="color: #008000;"> 获取之前的操作,返回true或者false</span>
        <span style="color: #0000ff;">print</span><span style="color: #000000;">(obj.is_up)
    </span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
        with transaction.atomic():
            </span><span style="color: #008000;">#</span><span style="color: #008000;">插入一条记录</span>
            new_obj = ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=<span style="color: #000000;">is_up)
            </span><span style="color: #0000ff;">if</span> is_up: <span style="color: #008000;">#</span><span style="color: #008000;"> 判断为推荐</span>
                Article.objects.filter(pk=article_id).update(up_count=F(<span style="color: #800000;">"</span><span style="color: #800000;">up_count</span><span style="color: #800000;">"</span>)+1<span style="color: #000000;">)
            </span><span style="color: #0000ff;">else</span>: <span style="color: #008000;">#</span><span style="color: #008000;"> 反对</span>
                Article.objects.filter(pk=article_id).update(down_count=F(<span style="color: #800000;">"</span><span style="color: #800000;">down_count</span><span style="color: #800000;">"</span>)+1<span style="color: #000000;">)

    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> JsonResponse(response)

</span><span style="color: #0000ff;">else</span><span style="color: #000000;">:
    </span><span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">"</span><span style="color: #800000;">非法请求</span><span style="color: #800000;">"</span><span style="color: #000000;">)

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 </span>= {<span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>: False}  <span style="color: #008000;">#</span><span style="color: #008000;"> 初始状态</span>
    
    <span style="color: #0000ff;">if</span> comment.user_id:  <span style="color: #008000;">#</span><span style="color: #008000;"> 判断返回值</span>
        response = {<span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span><span style="color: #000000;">: True}
    
    </span><span style="color: #0000ff;">return</span> JsonResponse(response)  <span style="color: #008000;">#</span><span style="color: #008000;"> 返回json对象</span>

<span style="color: #0000ff;">else</span><span style="color: #000000;">:
    </span><span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">"</span><span style="color: #800000;">非法请求</span><span style="color: #800000;">"</span>)</pre>

View Code

刷新网页，发表一条评论

查看表blog_comment，多了一条记录

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

渲染评论

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

def article_detail(request,username,article_id):
    blog = query_current_site(request,username)
</span><span style="color: #008000;">#</span><span style="color: #008000;">查询指定id的文章</span>
article_obj = Article.objects.filter(pk=<span style="color: #000000;">article_id).first()
user_id </span>= UserInfo.objects.filter(username=<span style="color: #000000;">username).first().nid

comment_list </span>= Comment.objects.filter(article_id=<span style="color: #000000;">article_id)
dict </span>= {<span style="color: #800000;">"</span><span style="color: #800000;">blog</span><span style="color: #800000;">"</span><span style="color: #000000;">:blog,
        </span><span style="color: #800000;">"</span><span style="color: #800000;">username</span><span style="color: #800000;">"</span><span style="color: #000000;">:username,
        </span><span style="color: #800000;">'</span><span style="color: #800000;">article_obj</span><span style="color: #800000;">'</span><span style="color: #000000;">:article_obj,
        </span><span style="color: #800000;">"</span><span style="color: #800000;">user_id</span><span style="color: #800000;">"</span><span style="color: #000000;">:user_id,
        </span><span style="color: #800000;">"</span><span style="color: #800000;">comment_list</span><span style="color: #800000;">"</span><span style="color: #000000;">:comment_list,
        }

</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">'</span><span style="color: #800000;">article_detail.html</span><span style="color: #800000;">'</span>,dict)</pre>

View Code

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

{% 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>
    &lt;div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">comment</span><span style="color: #800000;">"</span>&gt;
        &lt;p&gt;评论列表&lt;/p&gt;
        &lt;ul <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">comment_list list-group</span><span style="color: #800000;">"</span>&gt;<span style="color: #000000;">
            {</span>% <span style="color: #0000ff;">for</span> comment <span style="color: #0000ff;">in</span> comment_list %<span style="color: #000000;">}
                </span>&lt;li <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">list-group-item</span><span style="color: #800000;">"</span>&gt;
                    &lt;div&gt;
                        &lt;a href=<span style="color: #800000;">""</span>&gt;<span style="color: #008000;">#</span><span style="color: #008000;">{{ forloop.counter }}楼&lt;/a&gt;&amp;nbsp;&amp;nbsp;</span>
                        &lt;span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">small</span><span style="color: #800000;">"</span>&gt;{{ comment.create_time|date:<span style="color: #800000;">"</span><span style="color: #800000;">Y-m-d H:i</span><span style="color: #800000;">"</span> }}&lt;/span&gt;&amp;nbsp;&amp;<span style="color: #000000;">nbsp;
                        </span>&lt;a href=<span style="color: #800000;">""</span>&gt;{{ comment.user.username }}&lt;/a&gt;
                        &lt;a href=<span style="color: #800000;">""</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">pull-right</span><span style="color: #800000;">"</span>&gt;&lt;span&gt;回复&lt;/span&gt;&lt;/a&gt;

                    &lt;/div&gt;
                    &lt;div&gt;
                        &lt;p&gt;{{ comment.content }}&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/li&gt;<span style="color: #000000;">
            {</span>% endfor %<span style="color: #000000;">}

        </span>&lt;/ul&gt;
        &lt;p&gt;发表评论&lt;/p&gt;
        &lt;p&gt;昵称：&lt;input type=<span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">tbCommentAuthor</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">author</span><span style="color: #800000;">"</span> disabled=<span style="color: #800000;">"</span><span style="color: #800000;">disabled</span><span style="color: #800000;">"</span> size=<span style="color: #800000;">"</span><span style="color: #800000;">50</span><span style="color: #800000;">"</span><span style="color: #000000;">
                     value</span>=<span style="color: #800000;">"</span><span style="color: #800000;">{{ request.user.username }}</span><span style="color: #800000;">"</span>&gt;&lt;/p&gt;
        &lt;div&gt;
            &lt;textarea name=<span style="color: #800000;">""</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">comment_content</span><span style="color: #800000;">"</span> cols=<span style="color: #800000;">"</span><span style="color: #800000;">60</span><span style="color: #800000;">"</span> rows=<span style="color: #800000;">"</span><span style="color: #800000;">10</span><span style="color: #800000;">"</span>&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;input type=<span style="color: #800000;">"</span><span style="color: #800000;">button</span><span style="color: #800000;">"</span> value=<span style="color: #800000;">"</span><span style="color: #800000;">submit</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">btn btn-default comment_btn</span><span style="color: #800000;">"</span>&gt;
    &lt;/div&gt;

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

                }
            })
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            location.href </span>= <span style="color: #800000;">"</span><span style="color: #800000;">/login/</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        }

    })

    </span>//<span style="color: #000000;"> 提交评论
    $(</span><span style="color: #800000;">"</span><span style="color: #800000;">.comment_btn</span><span style="color: #800000;">"</span><span style="color: #000000;">).click(function () {
        {</span><span style="color: #008000;">#</span><span style="color: #008000;">评论内容#}</span>
        var content = $(<span style="color: #800000;">"</span><span style="color: #800000;">#comment_content</span><span style="color: #800000;">"</span><span style="color: #000000;">).val();
        {</span><span style="color: #008000;">#</span><span style="color: #008000;">默认为空#}</span>
        var pid = <span style="color: #800000;">""</span><span style="color: #000000;">;
        $.ajax({
            url: </span><span style="color: #800000;">"</span><span style="color: #800000;">/comment/</span><span style="color: #800000;">"</span><span style="color: #000000;">,
            type: </span><span style="color: #800000;">"</span><span style="color: #800000;">post</span><span style="color: #800000;">"</span><span style="color: #000000;">,
            data: {
                content: content,
                article_id: </span><span style="color: #800000;">"</span><span style="color: #800000;">{{ article_obj.pk }}</span><span style="color: #800000;">"</span><span style="color: #000000;">,
                pid: pid,
                csrfmiddlewaretoken: $(</span><span style="color: #800000;">"</span><span style="color: #800000;">[name='csrfmiddlewaretoken']</span><span style="color: #800000;">"</span><span style="color: #000000;">).val()
            },
            success: function (data) {
                console.log(data);
                </span>//<span style="color: #000000;"> 清空输入框的内容
                $(</span><span style="color: #800000;">"</span><span style="color: #800000;">#comment_content</span><span style="color: #800000;">"</span>).val(<span style="color: #800000;">""</span><span style="color: #000000;">)
            }
        })

    })
</span>&lt;/script&gt;<span style="color: #000000;">

{% endblock %}

View Code

刷新网页，效果如下：

评论实时展示

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

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

那么只需要提交成功之后，操作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 </span>= {<span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span>: False}  <span style="color: #008000;">#</span><span style="color: #008000;"> 初始状态</span>

    <span style="color: #0000ff;">if</span> comment.user_id:  <span style="color: #008000;">#</span><span style="color: #008000;"> 判断返回值</span>
        response = {<span style="color: #800000;">"</span><span style="color: #800000;">state</span><span style="color: #800000;">"</span><span style="color: #000000;">: True}
    
    </span><span style="color: #008000;">#</span><span style="color: #008000;">响应体增加3个变量</span>
    response[<span style="color: #800000;">"</span><span style="color: #800000;">timer</span><span style="color: #800000;">"</span>] = comment.create_time.strftime(<span style="color: #800000;">"</span><span style="color: #800000;">%Y-%m-%d %X</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    response[</span><span style="color: #800000;">"</span><span style="color: #800000;">content</span><span style="color: #800000;">"</span>] =<span style="color: #000000;"> comment.content
    response[</span><span style="color: #800000;">"</span><span style="color: #800000;">user</span><span style="color: #800000;">"</span>] =<span style="color: #000000;"> request.user.username
    
    </span><span style="color: #0000ff;">return</span> JsonResponse(response)  <span style="color: #008000;">#</span><span style="color: #008000;"> 返回json对象</span>

<span style="color: #0000ff;">else</span><span style="color: #000000;">:
    </span><span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">"</span><span style="color: #800000;">非法请求</span><span style="color: #800000;">"</span>)</pre>

View Code

修改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>
    &lt;div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">comment</span><span style="color: #800000;">"</span>&gt;
        &lt;p&gt;评论列表&lt;/p&gt;
        &lt;ul <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">comment_list list-group</span><span style="color: #800000;">"</span>&gt;<span style="color: #000000;">
            {</span>% <span style="color: #0000ff;">for</span> comment <span style="color: #0000ff;">in</span> comment_list %<span style="color: #000000;">}
                </span>&lt;li <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">list-group-item</span><span style="color: #800000;">"</span>&gt;
                    &lt;div&gt;
                        &lt;a href=<span style="color: #800000;">""</span>&gt;<span style="color: #008000;">#</span><span style="color: #008000;">{{ forloop.counter }}楼&lt;/a&gt;&amp;nbsp;&amp;nbsp;</span>
                        &lt;span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">small</span><span style="color: #800000;">"</span>&gt;{{ comment.create_time|date:<span style="color: #800000;">"</span><span style="color: #800000;">Y-m-d H:i</span><span style="color: #800000;">"</span> }}&lt;/span&gt;&amp;nbsp;&amp;<span style="color: #000000;">nbsp;
                        </span>&lt;a href=<span style="color: #800000;">""</span>&gt;{{ comment.user.username }}&lt;/a&gt;
                        &lt;a href=<span style="color: #800000;">""</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">pull-right</span><span style="color: #800000;">"</span>&gt;&lt;span&gt;回复&lt;/span&gt;&lt;/a&gt;

                    &lt;/div&gt;
                    &lt;div&gt;
                        &lt;p&gt;{{ comment.content }}&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/li&gt;<span style="color: #000000;">
            {</span>% endfor %<span style="color: #000000;">}

        </span>&lt;/ul&gt;
        &lt;p&gt;发表评论&lt;/p&gt;
        &lt;p&gt;昵称：&lt;input type=<span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">tbCommentAuthor</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">author</span><span style="color: #800000;">"</span> disabled=<span style="color: #800000;">"</span><span style="color: #800000;">disabled</span><span style="color: #800000;">"</span> size=<span style="color: #800000;">"</span><span style="color: #800000;">50</span><span style="color: #800000;">"</span><span style="color: #000000;">
                     value</span>=<span style="color: #800000;">"</span><span style="color: #800000;">{{ request.user.username }}</span><span style="color: #800000;">"</span>&gt;&lt;/p&gt;
        &lt;div&gt;
            &lt;textarea name=<span style="color: #800000;">""</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">comment_content</span><span style="color: #800000;">"</span> cols=<span style="color: #800000;">"</span><span style="color: #800000;">60</span><span style="color: #800000;">"</span> rows=<span style="color: #800000;">"</span><span style="color: #800000;">10</span><span style="color: #800000;">"</span>&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;input type=<span style="color: #800000;">"</span><span style="color: #800000;">button</span><span style="color: #800000;">"</span> value=<span style="color: #800000;">"</span><span style="color: #800000;">submit</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">btn btn-default comment_btn</span><span style="color: #800000;">"</span>&gt;
    &lt;/div&gt;

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

                }
            })
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            location.href </span>= <span style="color: #800000;">"</span><span style="color: #800000;">/login/</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        }

    })

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

    })
</span>&lt;/script&gt;<span style="color: #000000;">

{% endblock %}

View Code

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

评论可以实时展示了

刷新网页，效果如下：

显示出楼层

参考资料：

Django 基础教程

转载声明：
作者：肖祥
出处： https://www.cnblogs.com/xiao987334176/

查看全文

相关阅读:
Nim or not Nim? hdu3032 SG值打表找规律
 Maximum 贪心
 The Super Powers
LCM Cardinality 暴力
 Longge's problem poj2480 欧拉函数，gcd
GCD hdu2588
Perfect Pth Powers poj1730
6656 Watching the Kangaroo
yield 小用
 wpf DropDownButton 源码

原文地址：https://www.cnblogs.com/bqwzx/p/10198770.html