关于文章的评论和评论的评论

关于有以下几种方法：

a 文章的评论  楼层排列

b 文章的评论 楼层排列用编辑器

c 文章的评论  评论树用编辑器

方法a  文章的评论  楼层排列

html代码

{% extends "basehomesite.html" %}


{% block content %}
    <div class="article_region">
        <div class="row"></div>
        <h3 class="text-center">{{ article_obj.first.title }}</h3>

        <hr>
        <div class="article_con">{{ article_obj.first.articledetail.content|safe }}</div>

    </div>

    <div class="updown row">
        <div class="buryit pull-right">
            <span class="burynum" id="bury_count">{{ article_obj.first.down_count }}</span>
        </div>

        <div class="diggit pull-right">
            <span class="diggnum" id="digg_count">{{ article_obj.first.up_count }}</span>
        </div>

    </div>
    <span class="diggit_error pull-right"></span>
    <div class="had_comment_region">


        <p>已发表评论(堆砌)</p>
        <div class="comment_list">
            {% for comment in comment_obj %}
                <hr>
                <div class="comment_item">
                    <div class="row">
                        <div class="col-md-6">
                            <img src="/media/{{ comment.user.avatar }}" alt="" height="30px" width="30px">
                            {{ forloop.counter }}楼&nbsp;&nbsp;<a id="{{ comment.nid }}"
                                                                 href="/blog/{{ comment.user.username }}">{{ comment.user.username }}</a>&nbsp;&nbsp;&nbsp;&nbsp;发表于{{ comment.create_time|date:"Y-m-d H:i" }}&nbsp;
                        </div>
                        <div class="pull-right ">
                            <a href="#comment_con" onclick="replay({{ comment.nid }})" class="reply_comment_btn"
                               comment_id="{{ comment.nid }}"
                               conmment_username="{{ comment.user }}">回复</a>
                            <span id="response_comment"><a href="">支持</a></span>
                        </div>
                    </div>
                    <div style="background-color:grey">
                        {% if comment.parent_comment_id %}
                            @<a href="">{{ comment.parent_comment.user.username }}</a>: &nbsp;&nbsp;
                            {{ comment.parent_comment.content|safe }}
                        {% endif %}
                    </div>
                    <div>{{ comment.content|safe }}</div>
                </div>
            {% endfor %}
        </div>
    </div>


    <div class="comment_count">
        <div>发表评论</div>
        <div>昵称：<input type="text" value="{{ user.username }}" disabled></div>
        <div class="comment_list1">评论内容： <p><img src=""></p>
        </div>
        <!--普通方法-->
        <form action="">
            {% csrf_token %}
            <div class="commentbox_main">
                <textarea name="ssss" id="comment_comment" cols="60" rows="10"></textarea>
                <p><input type="button" value="评论提交" id="sub_comment"></p>
            </div>
        </form>

    </div>
    <div class="info" username="{{ request.user.username }}"></div>

    <script>
        function replay(id) {


            //普通方法
                        $("#comment_comment").focus()
                        $("#comment_comment").val("@" + $("#" + id).html() + "
");
            //获取父评论的comment_id
            parent_comment_id = id
        }



        //评论内容
                $("#sub_comment").click(function () {
                    var content;
                    if ($("#comment_comment").val().charAt(0) != '@') {
                        parent_comment_id = null
                    }
                    if (parent_comment_id) {
                        var index = $("#comment_comment").val().indexOf("
");//判断是否是子评论
                        content = $("#comment_comment").val().slice(index + 1)
                    }

                    else {
                        content = $("#comment_comment").val()
                        console.log(content)
                    }
                    if ($(".info").attr("username")) {
                        $.ajax({
                            url: "/blog/comment/",
                            type: "post",
                            headers: {"X-CSRFToken": $.cookie('csrftoken')},
                            data: {
                                "article_id": "{{ article_obj.first.nid }}",
                                "comment_comment": content,
                                "parent_comment_id": parent_comment_id

                            },
                            success: function (data) {
                                var data = data
                                console.log(data.create_time.slice(0, 19))
                                console.log(data)
                                if (parent_comment_id) {
                                    s = '<div class="comment_item" sytle="border-bottom: 1px solid grey"><div class="row"> <div class="col-md-6"><img src="/media/{{ request.user.avatar }}" alt="" height="30px" width="30px">&nbsp;&nbsp;<a id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a>&nbsp;&nbsp;&nbsp;&nbsp;发表于' + data.create_time.slice(0, 19) + '&nbsp; </div> <div class="pull-right "><a href="#comment_con" onclick="replay(' + data.comment_id + ')"  class="reply_comment_btn" comment_id=' + data.comment_id + ' conmment_username="{{ request.user.username }}"  >回复</a>&nbsp;&nbsp;<span id="response_comment"><a href="">支持</a></span></div></div>' + ' <div style="background-color: grey">@<a href="">' + data.parent_comment_username + '</a> :&nbsp;&nbsp;&nbsp;' + data.parent_comment_content + '</div>' + '<div style="margin-top: 5px">' + content + '</div><hr></div>'
                                }
                                else {
                                    s = '<div class="comment_item" sytle="border-bottom: 1px solid grey"><div class="row"> <div class="col-md-6"><img src="/media/{{ request.user.avatar }}" alt="" height="30px" width="30px">&nbsp;&nbsp;<a  id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a>&nbsp;&nbsp;&nbsp;&nbsp;发表于' + data.create_time.slice(0, 19) + '&nbsp; </div> <div class="pull-right "><a href="#comment_con" onclick="replay(' + data.comment_id + ')"  class="reply_comment_btn" comment_id=' + data.comment_id + ' conmment_username="{{ request.user.username }}"  >回复</a>&nbsp;&nbsp;<span id="response_comment"><a href="">支持</a></span></div></div><div style="margin-top: 5px">' + $("#comment_comment").val() + '</div><hr></div>'
                                }
                                $(".comment_list").append(s)
                                $("#comment_comment").val(" ")
                            }
                        })
                    }
                    else {
                        location.href = "/login/?next=" + location.pathname//从哪里来跳转到哪里
                    }
                })









    </script>

{% endblock %}

views代码

from django.db import transaction
def article_comment(request):
    print("走这里",request)
    username=request.user.username#评论人是谁
    article_id=request.POST.get("article_id")
    print(article_id,"评论文章")
    comment_content=request.POST.get("comment_comment")
    print(comment_content,'评论的内容')
    user_id=request.user.nid
    commentResponse={}
    if request.POST.get("parent_comment_id"):#处理子评论
        with transaction.atomic():
            pid=request.POST.get("parent_comment_id")
            comment_obj=models.Comment.objects.create(article_id=article_id,user_id=user_id,content=comment_content,parent_comment_id=pid)
            commentResponse["parent_comment_username"]=comment_obj.parent_comment.user.username
            commentResponse["parent_comment_content"]=comment_obj.parent_comment.content
    else:
        with transaction.atomic():
            user_obj=models.UserInfo.objects.filter(username=username).first()
            comment_obj=models.Comment.objects.create(user=user_obj,content=comment_content,article_id=article_id)


    commentResponse["create_time"]=str(comment_obj.create_time)#后端需要就在前端添加
    commentResponse["comment_id"]=comment_obj.nid


    from django.http import  JsonResponse#返回也可以用这种方法

    return  JsonResponse(commentResponse)

方法b 文章的评论  楼层排列用编辑器

html代码

{% extends "basehomesite.html" %}


{% block content %}
    <div class="article_region">
        <div class="row"></div>
        <h3 class="text-center">{{ article_obj.first.title }}</h3>

        <hr>
        <div class="article_con">{{ article_obj.first.articledetail.content|safe }}</div>

    </div>

    <div class="updown row">
        <div class="buryit pull-right">
            <span class="burynum" id="bury_count">{{ article_obj.first.down_count }}</span>
        </div>

        <div class="diggit pull-right">
            <span class="diggnum" id="digg_count">{{ article_obj.first.up_count }}</span>
        </div>

    </div>
    <span class="diggit_error pull-right"></span>
    <div class="had_comment_region">
        <p>已发表评论(堆砌)</p>
        <div class="comment_list">
            {% for comment in comment_obj %}
                <hr>
                <div class="comment_item">
                    <div class="row">
                        <div class="col-md-6">
                            <img src="/media/{{ comment.user.avatar }}" alt="" height="30px" width="30px">
                            {{ forloop.counter }}楼&nbsp;&nbsp;<a id="{{ comment.nid }}"
                                                                 href="/blog/{{ comment.user.username }}">{{ comment.user.username }}</a>&nbsp;&nbsp;&nbsp;&nbsp;发表于{{ comment.create_time|date:"Y-m-d H:i" }}&nbsp;
                        </div>
                        <div class="pull-right ">
                            <a href="#comment_con" onclick="replay({{ comment.nid }})" class="reply_comment_btn"
                               comment_id="{{ comment.nid }}"
                               conmment_username="{{ comment.user }}">回复</a>
                            <span id="response_comment"><a href="">支持</a></span>
                        </div>
                    </div>
                    <div style="background-color:grey">
                        {% if comment.parent_comment_id %}
                            @<a href="">{{ comment.parent_comment.user.username }}</a>: &nbsp;&nbsp;
                            {{ comment.parent_comment.content|safe }}
                        {% endif %}
                    </div>
                    <div>{{ comment.content|safe }}</div>
                </div>
            {% endfor %}
        </div>
    </div>


    <div class="comment_count">
        <div>发表评论</div>
        <div>昵称：<input type="text" value="{{ user.username }}" disabled></div>
        <div class="comment_list1">评论内容： <p><img src=""></p>
        </div>
        <!--普通方法-->
        <form action="">
            {% csrf_token %}
            <div class="commentbox_main">
                <textarea name="ssss" id="comment_comment" cols="60" rows="10"></textarea>
                <p><input type="button" value="评论提交" id="sub_comment"></p>
            </div>
        </form>

    </div>
    <div class="info" username="{{ request.user.username }}"></div>

    <script>
        function replay(id) {
            //editor方法
            editor.focus()
            editor.appendHtml("@" + $("#" + id).html() + "<br>")
            parent_comment_id = id
        }


        //高大上的方法
                   $("#sub_comment").click(function () {
                    editor.sync();
                    var content;
                    if ($("#comment_comment").val().charAt(0)!= '@') {
                        parent_comment_id = null
                    }
                    if (parent_comment_id) {
                        var index = $("#comment_comment").val().indexOf("
");//判断是否是子评论
                        content = $("#comment_comment").val().slice(index + 1)
                    }

                    else {
                        content = $("#comment_comment").val()
                        console.log(content)
                    }
                    if ($(".info").attr("username")) {
                        $.ajax({
                            url: "/blog/comment/",
                            type: "post",
                            headers: {"X-CSRFToken": $.cookie('csrftoken')},
                            data: {
                                "article_id": "{{ article_obj.first.nid }}",
                                "comment_comment": content,
                                "parent_comment_id": parent_comment_id

                            },
                            success: function (data) {
                                var data = data
                                console.log(data.create_time.slice(0, 19))
                                console.log(data)
                                if (parent_comment_id) {
                                    s = '<div class="comment_item" sytle="border-bottom: 1px solid grey"><div class="row"> <div class="col-md-6"><img src="/media/{{ request.user.avatar }}" alt="" height="30px" width="30px">&nbsp;&nbsp;<a id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a>&nbsp;&nbsp;&nbsp;&nbsp;发表于' + data.create_time.slice(0, 19) + '&nbsp; </div> <div class="pull-right "><a href="#comment_con" onclick="replay(' + data.comment_id + ')"  class="reply_comment_btn" comment_id=' + data.comment_id + ' conmment_username="{{ request.user.username }}"  >回复</a>&nbsp;&nbsp;<span id="response_comment"><a href="">支持</a></span></div></div>' + ' <div style="background-color: grey">@<a href="">' + data.parent_comment_username + '</a> :&nbsp;&nbsp;&nbsp;' + data.parent_comment_content + '</div>' + '<div style="margin-top: 5px">' + content + '</div><hr></div>'
                                }
                                else {
                                    s = '<div class="comment_item" sytle="border-bottom: 1px solid grey"><div class="row"> <div class="col-md-6"><img src="/media/{{ request.user.avatar }}" alt="" height="30px" width="30px">&nbsp;&nbsp;<a  id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a>&nbsp;&nbsp;&nbsp;&nbsp;发表于' + data.create_time.slice(0, 19) + '&nbsp; </div> <div class="pull-right "><a href="#comment_con" onclick="replay(' + data.comment_id + ')"  class="reply_comment_btn" comment_id=' + data.comment_id + ' conmment_username="{{ request.user.username }}"  >回复</a>&nbsp;&nbsp;<span id="response_comment"><a href="">支持</a></span></div></div><div style="margin-top: 5px">' + $("#comment_comment").val() + '</div><hr></div>'
                                }
                                $(".comment_list").append(s)
                                editor.html("")
                            }
                        })
                    }
                    else {
                        location.href = "/login/?next=" + location.pathname
                    }
                })

    



    </script>

{% endblock %}

views代码

from django.db import transaction
def article_comment(request):
    print("走这里",request)
    username=request.user.username#评论人是谁
    article_id=request.POST.get("article_id")
    print(article_id,"评论文章")
    comment_content=request.POST.get("comment_comment")
    print(comment_content,'评论的内容')
    user_id=request.user.nid
    commentResponse={}
    if request.POST.get("parent_comment_id"):#处理子评论
        with transaction.atomic():
            pid=request.POST.get("parent_comment_id")
            comment_obj=models.Comment.objects.create(article_id=article_id,user_id=user_id,content=comment_content,parent_comment_id=pid)
            commentResponse["parent_comment_username"]=comment_obj.parent_comment.user.username
            commentResponse["parent_comment_content"]=comment_obj.parent_comment.content
    else:
        with transaction.atomic():
            user_obj=models.UserInfo.objects.filter(username=username).first()
            comment_obj=models.Comment.objects.create(user=user_obj,content=comment_content,article_id=article_id)


    commentResponse["create_time"]=str(comment_obj.create_time)#后端需要就在前端添加
    commentResponse["comment_id"]=comment_obj.nid


    from django.http import  JsonResponse#返回也可以用这种方法

    return  JsonResponse(commentResponse)

方法c 评论树用编辑器

Html代码  这种方法需要自己刷新  哈有编辑器需要导入

{% extends "basehomesite.html" %}<!--用的是继承-->


{% block content %}
    <div class="article_region">
        <div class="row"></div>
        <h3 class="text-center">{{ article_obj.first.title }}</h3>

        <hr>
        <div class="article_con">{{ article_obj.first.articledetail.content|safe }}</div>

    </div>

    <div class="updown row">
        <div class="buryit pull-right">
            <span class="burynum" id="bury_count">{{ article_obj.first.down_count }}</span>
        </div>

        <div class="diggit pull-right">
            <span class="diggnum" id="digg_count">{{ article_obj.first.up_count }}</span>
        </div>

    </div>
    <span class="diggit_error pull-right"></span>
    <div class="had_comment_region">
        <!--评论树-->
                <h5>已发表评论（评论树）</h5>
                <div class="comment_tree_list">
                </div>
    </div>


    <div class="comment_count">
        <div>发表评论</div>
        <div>昵称：<input type="text" value="{{ user.username }}" disabled></div>
        <div class="comment_list1">评论内容： <p><img src=""></p>
        </div>
        <!--普通方法-->
        <form action="">
            {% csrf_token %}
            <div class="commentbox_main">
                <textarea name="ssss" id="comment_comment" cols="60" rows="10"></textarea>
                <p><input type="button" value="评论提交" id="sub_comment"></p>
            </div>
        </form>

    </div>
    <div class="info" username="{{ request.user.username }}"></div>

    <script>
        function replay(id) {
            //editor方法
            editor.focus()
            editor.appendHtml("@" + $("#" + id).html() + "<br>")

            parent_comment_id = id
        }


        //高大上的方法
                   $("#sub_comment").click(function () {
                    editor.sync();
                    var content;
                    if ($("#comment_comment").val().charAt(0)!= '@') {
                        parent_comment_id = null
                    }
                    if (parent_comment_id) {
                        var index = $("#comment_comment").val().indexOf("
");//判断是否是子评论
                        content = $("#comment_comment").val().slice(index + 1)
                    }
                    else {
                        content = $("#comment_comment").val()
                        console.log(content)
                    }
                    if ($(".info").attr("username")) {
                        $.ajax({
                            url: "/blog/comment/",
                            type: "post",
                            headers: {"X-CSRFToken": $.cookie('csrftoken')},
                            data: {
                                "article_id": "{{ article_obj.first.nid }}",
                                "comment_comment": content,
                                "parent_comment_id": parent_comment_id
                            },
                            success: function (data) {
                                var data = data
                                console.log(data.create_time.slice(0, 19))
                                console.log(data)
                                if (parent_comment_id) {
                                    s = '<div class="comment_item" sytle="border-bottom: 1px solid grey"><div class="row"> <div class="col-md-6"><img src="/media/{{ request.user.avatar }}" alt="" height="30px" width="30px">&nbsp;&nbsp;<a id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a>&nbsp;&nbsp;&nbsp;&nbsp;发表于' + data.create_time.slice(0, 19) + '&nbsp; </div> <div class="pull-right "><a href="#comment_con" onclick="replay(' + data.comment_id + ')"  class="reply_comment_btn" comment_id=' + data.comment_id + ' conmment_username="{{ request.user.username }}"  >回复</a>&nbsp;&nbsp;<span id="response_comment"><a href="">支持</a></span></div></div>' + ' <div style="background-color: grey">@<a href="">' + data.parent_comment_username + '</a> :&nbsp;&nbsp;&nbsp;' + data.parent_comment_content + '</div>' + '<div style="margin-top: 5px">' + content + '</div><hr></div>'
                                }
                                else {
                                    s = '<div class="comment_item" sytle="border-bottom: 1px solid grey"><div class="row"> <div class="col-md-6"><img src="/media/{{ request.user.avatar }}" alt="" height="30px" width="30px">&nbsp;&nbsp;<a  id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a>&nbsp;&nbsp;&nbsp;&nbsp;发表于' + data.create_time.slice(0, 19) + '&nbsp; </div> <div class="pull-right "><a href="#comment_con" onclick="replay(' + data.comment_id + ')"  class="reply_comment_btn" comment_id=' + data.comment_id + ' conmment_username="{{ request.user.username }}"  >回复</a>&nbsp;&nbsp;<span id="response_comment"><a href="">支持</a></span></div></div><div style="margin-top: 5px">' + $("#comment_comment").val() + '</div><hr></div>'
                                }
                                $(".comment_list").append(s)
                                editor.html("")
                            }
                        })
                    }
                    else {
                        location.href = "/login/?next=" + location.pathname
                    }
                })

        //获取评论树
        KindEditor.ready(function (K) {
            window.editor = K.create("#comment_comment", {
                 "600px",
                height: "500px",
                resizeType: 0,
                uploadJson: "/uploadFile/",
                extraFileUploadParams: {
                    "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
                }
            });

        });
        $.ajax({
            url: "/blog/commentTree/{{ article_obj.first.nid }}",
            success: function (data) {
                console.log(JSON.parse(data));
                var data = JSON.parse(data);
                var s = showCommentTree(data);
                $(".comment_tree_list").append(s);
            }
        });
        //展开评论树
        function showCommentTree(comment_list) {
            var html = "";
            $.each(comment_list, function (i, comment_dict) {
                var val = comment_dict["content"];
                  var comment_str = '<div class="comment"><div class="content">  <div class="row">  <div class="col-md-6"><img src="/media/{{ request.user.avatar }}" alt="" height="40px" width="40px">&nbsp;&nbsp;<a id="' + comment_dict.nid + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a>&nbsp;&nbsp;&nbsp;&nbsp;发表于&nbsp;&nbsp;&nbsp;&nbsp;' + comment_dict.create_time.slice(0,19) + '&nbsp; </div>                            <div class="pull-right "><a href="#comment_con" onclick="replay(' + comment_dict.nid + ')"  class="reply_comment_btn" comment_id=' + comment_dict.nid + ' conmment_username="{{ request.user.username }}"  >回复</a>&nbsp;&nbsp;<span id="response_comment"><a href="">支持</a></span></div></div><span>' + val + '</span></div><hr>';
                if (comment_dict["children_commentList"]) {
                    var s = showCommentTree(comment_dict["children_commentList"]);
                    comment_str += s
                }
                comment_str += "</div>";
                html += comment_str;

            });
            return html
        }

    </script>

{% endblock %}

views代码

def commentTree(request, article_id):  # 展开评论树
    comment_list = models.Comment.objects.filter(article_id=article_id).values("nid", "content", "parent_comment_id")
    print(comment_list)
    comment_dict = {}
    for comment in comment_list:
        comment["children_commentList"] = []
        comment_obj = models.Comment.objects.filter(nid=comment["nid"]).first()
        comment["create_time"] = str(comment_obj.create_time)  # 注意时间在这里加
        comment_dict[comment["nid"]] = comment
        ##########找父评论########
    commentTree = []
    for comment in comment_list:
        pid = comment.get("parent_comment_id")
        if pid:
            print(comment)
            comment_dict[pid]["children_commentList"].append(comment)
        else:
            commentTree.append(comment)
    import json
    return HttpResponse(json.dumps(commentTree))
from django.db import transaction
def article_comment(request):
    print("走这里",request)
    username=request.user.username#评论人是谁
    article_id=request.POST.get("article_id")
    print(article_id,"评论文章")
    comment_content=request.POST.get("comment_comment")
    print(comment_content,'评论的内容')
    user_id=request.user.nid
    commentResponse={}
    if request.POST.get("parent_comment_id"):#处理子评论
        with transaction.atomic():
            pid=request.POST.get("parent_comment_id")
            comment_obj=models.Comment.objects.create(article_id=article_id,user_id=user_id,content=comment_content,parent_comment_id=pid)
            commentResponse["parent_comment_username"]=comment_obj.parent_comment.user.username
            commentResponse["parent_comment_content"]=comment_obj.parent_comment.content
    else:
        with transaction.atomic():
            user_obj=models.UserInfo.objects.filter(username=username).first()
            comment_obj=models.Comment.objects.create(user=user_obj,content=comment_content,article_id=article_id)


    commentResponse["create_time"]=str(comment_obj.create_time)#后端需要就在前端添加
    commentResponse["comment_id"]=comment_obj.nid


    from django.http import  JsonResponse#返回也可以用这种方法

    return  JsonResponse(commentResponse)