7.博客系统| 评论功能（文章评论，评论的评论）

根评论：对文章的评论；

子评论：对评论的评论；

区别：是否有父评论。

评论的流程：

　　1构建样式

　　2提交根评论

　　3显示根评论

　　　　--------render显示

　　　　--------Ajax显示

　　4提交子评论

　　5显示子评论

　　　　--------render显示

　　　　--------Ajax显示

　　6评论树的显示

　　　　楼层结构：

　　　　111

　　　　222

　　　　333

　　　　树形结构：（有父子关系，楼层的深度、层级）

　　　　　　　　111

　　　　　　　　222

　　　　　　　　　　444

　　　　　　　　　　　　555

　　　　　　　　333

1.评论样式

article_detail.html

　　<div class="clearfix">  //评论和点赞在一行，这是由于点赞和反对做了一个浮动，而评论又在正常文档中，导致它的浮动没有清除；清除浮动在bootstrap里边加个clearfix
　　　　<div id=“div_digg...”>
　　</div>
{#    评论样式#}
    <div class="comments">
        <p>发表评论</p>
        <p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="{{ request.user.username }}"></p>
        <p>评论内容:</p>
        <textarea name="" id="comment_content" cols="60" rows="10"></textarea>  //没有必要放到form表单中，因为要Ajax提交；textarea为内联标签，给下面button加了个p标签。
        <p>
            <button class="btn btn-default commment_btn">提交评论</button>  //
        </p>
    </div>

article_detail.css

input.author{
    background-image: url("/static/font/icon_form.gif"); //引入图标
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    padding: 4px 4px 4px 30px;
    width: 300px;
    font-size: 13px;
    background-position: 3px -3px;
}

 

 

2.提交（保存）根评论

客户端浏览器发 点赞或者评论按钮给服务端，触发一个事件（给它绑定一个click事件）发送请求，用户一点击就给服务器发请求了，有专门的视图函数接收这个请求，提交评论信息交给comment视图函数，视图函数构建一个评论对象保存到数据库里边，然后再把响应交给回调函数（ajax发完请求给它个回调） ，通过响应结果来判断如果对这个dom操作

views.py

#评论
def comment(request):
    print(request.POST)
    article_id = request.POST.get("article_id") #评论文章；user不用传，create_time不用传（评论的时间就是入库的时间），评论表的字段。
    pid = request.POST.get("pid") 
    content = request.POST.get("content") #评论内容
    user_id = request.user.pk #当前登录人的id
    comment_obj = models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content,parent_comment_id=pid) //pid是为空的，传给父评论

    return HttpResponse("comment")

 

article_detail.html

//评论请求
        $(".commment_btn").click(function () {
            var pid = ""
            var content = $("#comment_content").val(); //找到这个标签，val就是取里边的内容
            $.ajax({
                url:"/comment/",
                type:"post",
                data:{
                    "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(),
                    "article_id":"{{ article_obj.pk }}",
                    "content":content,                     "pid":pid //父评论的id，默认为空。根评论没有
                },
                success: function (data) { //success回调函数
                    console.log(data)
                    //清空评论框 
                    $("#comment_content").val("");

                }
            })
        })

 

3.render显示根评论（还有一种是Ajax）

views.py

def article_detail(request, username, article_id):
    '''
    文章详情页
    :param request:
    :param username:
    :param article_id:
    :return:
    '''
    user = models.UserInfo.objects.filter(username=username).first() #个人站点对象
    blog = user.blog
    article_obj = models.Article.objects.filter(pk=article_id).first() #拿到文章对象，要传到模板里边去
    # context = get_classification_data(username)
    comment_list = models.Comment.objects.filter(article_id=article_id) #拿出用户访问那篇文章的id     return render(request, "article_detail.html", locals())

 

 article_detail.html

<p>评论列表</p>
        <ul class="list-group comment_list"> {% for comment in comment_list %} //for循环这个comment_list <li class="list-group-item"> //每次循环生成一个 li标签
                <div>
                    <a href="">#{{ forloop.counter }}楼</a> &nbsp;&nbsp;
                    <span>{{ comment.create_time | date:"Y-m-d H:i" }}</span>
                    <a href=""><span>{{ comment.user.username }}</span></a>
                    <a href="" class="pull-right">回复</a>
                </div>
                <div class="comment_con">
                    <p>{{ comment.content }}</p>
                </div>
            </li>
            {% endfor %}
            
        </ul>

Ajax显示评论

点提交按钮，发Ajax请求；

 Ajax请求在对应的视图函数生成一个comment对象，然后我们响应给它的是comment对象相关的三个键值字典，字典返回给这个回调函数，拿到object对象构建一个标签，把标签字符串样式放在了页面的某个url里边去了完成了dom操作。

success: function (data) {
                    console.log(data);
                    var create_time = data.create_time;  //取出这三组变量，把这三个变量插入到下面反引号里边，关于js必须用+不断的去拼接，现在用ES6反引号的语句就很简洁了
                    var username = data.username;
                    var content = data.content;

                    var s =`  //反斜杠 ；构建一个标签字符串像上边那样放到这个样式里边 ；通过dom操作放到这个url中                             <li class="list-group-item">
                            <div>
                                <span>${create_time}/span>  //用反引号把字符串包起来，再用${}语法把它插入进来，js里边的只能用+拼，ES6很像python的语法
                                <a href=""><span>${ username }</span></a>
                            </div>
                            <div class="comment_con">
                                <p>${content}</p>
                            </div>
                            </li> `;
                    $("ul.comment_list").append(s);

views.py

#评论
def comment(request):
    print(request.POST)
    article_id = request.POST.get("article_id")
    pid = request.POST.get("pid")
    content = request.POST.get("content")
    user_id = request.user.pk
    comment_obj = models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content,parent_comment_id=pid)
    response = {}  #这个就是返回给回调函数的那个data。 
    response["create_time"] = comment_obj.create_time.strftime("%Y-%m-%d %X")
    response["username"] = request.user.username #当前评论人
    response["content"] = content
    return JsonResponse(response) #返回一个字典，JsonResponse会帮我们做序列化操作；
    #return HttpResponse("comment")

先点提交按钮发ajax请求，在对应的视图函数中生成一个对象，响应给它的是comment相关信息-三个键值组成的字典，把字典返回给success回调函数，success拿到那个字典 拿到object对象，构建一个标签，把标签字符串放到页面的某个ul里边去了，完成一个dom操作。（在数据库里边生成一个comment记录，同时在页面上看到提交的这条评论信息了）

4. 回复按钮事件

一点击回复按钮，就@这条评论的评论人；  定光标、赋文本值。

<div>
                    <a href="">#{{ forloop.counter }}楼</a> &nbsp;&nbsp;
                    <span>{{ comment.create_time | date:"Y-m-d H:i" }}</span> &nbsp;&nbsp;
                    <a href=""><span>{{ comment.user.username }}</span></a>
                    <a class="pull-right reply_btn" username= "{{ comment.user.username }}">回复</a>
</div>

 

//回复按钮事件
        $(".reply_btn").click(function () {
            $('#comment_content').focus();  //聚焦
            var val="@"+$(this).attr("username")+"\n"; //赋值，父评论的名字
            $('#comment_content').val(val)
        })

5.提交子评论

<div>
    <a href="">#{{ forloop.counter }}楼</a> &nbsp;&nbsp;
    <span>{{ comment.create_time | date:"Y-m-d H:i" }} </span> &nbsp;&nbsp;
    <a href=""><span>{{ comment.user.username }}</span></a>
    <a class="pull-right reply_btn" username= "{{ comment.user.username }}" comment_pk="{{ comment.pk }}">回复</a> //给每个回复的按钮多加一个自定义的属性
</div>

 

//评论请求
        var pid = "";
        $(".commment_btn").click(function () {
            var content = $("#comment_content").val();  //把评论内容取出来

            if(pid){                     //判断pid是否为空。
                var index=content.indexOf("\n")
                content = content.slice(index+1)
            }

 

//清空评论框
 pid = "",  //加上它可以清除小bug（你不刷新时，不点击回复按钮之间输入pid则为子评论）
 $("#comment_content").val("");

 

 //回复按钮事件
        $(".reply_btn").click(function () {
            $('#comment_content').focus();
            var val="@"+$(this).attr("username")+"\n";
            $('#comment_content').val(val);

            pid = $(this).attr("comment_pk")
        })

 

 

 

6.Ajax显示子评论

应该重新构建标签字符串，从视图中拿到父评论的相关信息，加到s字符串里边

 

7.评论树的显示

权限展示成树形结构，用递归

评论树的请求数据

 

<div class="comments list-group">
        <p class="tree_btn">评论树</p>
        <div class="comment_tree">
{#        <div class="comment_item" comment_id = "1">#}
{#            <span>111</span>#}
{#            <div class="comment_item" comment_id = "4">#}
{#                <span>444</span>#}
{#                <div class="comment_item" comment_id = "5">#}
{#                    <span>555</span>#}
{#            </div>#}
{#            </div>#}
{#        </div>#}
{#        <div class="comment_item" comment_id = "2">#}
{#            <span>222</span>#}
{#        </div>#}
{#        <div class="comment_item" comment_id = "3">#}
{#            <span>333</span>#}
{#        </div>#}
        </div>
    <script>
        $(".tree_btn").click(function () {
            $.ajax({
                url:"/get_comment_tree/",
                type:"get",
                data:{                                   data是views里return传来的ret值
                    article_id : "{{ article_obj.pk }}"
                },
                success:function(data){ console.log(data); $.each(data, function (index, comment_object) { var pk = comment_object.pk;
                        var content = comment_object.content;
                        var parent_comment_id = comment_object.parent_comment_id;
                        var s = `<div class="comment_item" comment_id=` + pk + `><span>` + content + `</span></div>` if(!parent_comment_id){
                            $(".comment_tree").append(s);
                        }else{
                            $("[comment_id = "+parent_comment_id+"]").append(s); } })
                }
            })
        })
    </script>

views.py

def get_comment_tree(request):
    article_id = request.GET.get("article_id")
    ret = list(models.Comment.objects.filter(article_id=article_id).values("pk", "content", "parent_comment_id"))


    return JsonResponse(ret, safe=False)

 

根评论的序号一定大于子评论的序号

ret = list(models.Comment.objects.filter(article_id=article_id).order_by("pk").values("pk", "content", "parent_comment_id"))
    return JsonResponse(ret, safe=False)

 

<script>
        $.ajax({
                url:"/get_comment_tree/",
                type:"get",
                data:{
                    article_id : "{{ article_obj.pk }}"
                },
                success:function(comment_list){
                    console.log(comment_list);
                    $.each(comment_list, function (index, comment_object) {
                        var pk = comment_object.pk;
                        var content = comment_object.content;
                        var parent_comment_id = comment_object.parent_comment_id;
                        var s = `<div class="comment_item" comment_id=` + pk + `><span>` + content + `</span></div>`

                        if(!parent_comment_id){
                            $(".comment_tree").append(s);
                        }else{
                            $("[comment_id = "+parent_comment_id+"]").append(s);
                        }
                    })
                }
            });
{#        $(".tree_btn").click(function () {#}
{#            $.ajax({#}  把ajax放在外边，就不用点击了才能看到评论数了。
{#                url:"/get_comment_tree/",#}
{#                type:"get",#}
{#                data:{#}
{#                    article_id : "{{ article_obj.pk }}"#}
{#                },#}
{#                success:function(comment_list){#}
{#                    console.log(comment_list);#}
{#                    $.each(comment_list, function (index, comment_object) {#}
{#                        var pk = comment_object.pk;#}
{#                        var content = comment_object.content;#}
{#                        var parent_comment_id = comment_object.parent_comment_id;#}
{#                        var s = `<div class="comment_item" comment_id=` + pk + `><span>` + content + `</span></div>`#}
{##}
{#                        if(!parent_comment_id){#}
{#                            $(".comment_tree").append(s);#}
{#                        }else{#}
{#                            $("[comment_id = "+parent_comment_id+"]").append(s);#}
{#                        }#}
{#                    })#}
{#                }#}
{#            })#}
{#        })#}
    </script>

评论事务操作

from django.db import transaction
#事务操作
    with transaction.atomic():
        comment_obj = models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content,parent_comment_id=pid) 
        models.Article.objects.filter(pk=article_id).update(comment_count=F("comment_count")+1)

 

评论的邮件发送

EMAIL_HOST = 'smtp.exmail.qq.com' #如果是163改成 smtp.163.com

EMAIL_POST = 465

EMAIL_HOST_USER = ' '               #账号

EMAIL_HOST_PASSWORD = ' '    #密码

#DEFAULT_FROM_EMAIL = EMAIL_HOST_USER

EMAIL_USE_SSL = True