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":