关于有以下几种方法：
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 }}楼 <a id="{{ comment.nid }}" href="/blog/{{ comment.user.username }}">{{ comment.user.username }}</a> 发表于{{ comment.create_time|date:"Y-m-d H:i" }} </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>: {{ 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"> <a id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a> 发表于' + data.create_time.slice(0, 19) + ' </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> <span id="response_comment"><a href="">支持</a></span></div></div>' + ' <div style="background-color: grey">@<a href="">' + data.parent_comment_username + '</a> : ' + 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"> <a id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a> 发表于' + data.create_time.slice(0, 19) + ' </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> <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 }}楼 <a id="{{ comment.nid }}" href="/blog/{{ comment.user.username }}">{{ comment.user.username }}</a> 发表于{{ comment.create_time|date:"Y-m-d H:i" }} </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>: {{ 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"> <a id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a> 发表于' + data.create_time.slice(0, 19) + ' </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> <span id="response_comment"><a href="">支持</a></span></div></div>' + ' <div style="background-color: grey">@<a href="">' + data.parent_comment_username + '</a> : ' + 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"> <a id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a> 发表于' + data.create_time.slice(0, 19) + ' </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> <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"> <a id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a> 发表于' + data.create_time.slice(0, 19) + ' </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> <span id="response_comment"><a href="">支持</a></span></div></div>' + ' <div style="background-color: grey">@<a href="">' + data.parent_comment_username + '</a> : ' + 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"> <a id="' + data.comment_id + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a> 发表于' + data.create_time.slice(0, 19) + ' </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> <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"> <a id="' + comment_dict.nid + '"href="/blog/{{ request.user.username }}">{{ request.user.username }}</a> 发表于 ' + comment_dict.create_time.slice(0,19) + ' </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> <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)