评论操作展示
评论操作展示
评论操作有两种实现方式：
- 通过前端使用javaScript实现
- 通过后端代码实现；自定义模板语言
- 注：因为涉及到递归，所以能在前端生成效果就在前端生成
通过JavaScript前端实现层级评论效果展示
涉及到的主要知识有Jquery的使用，ajax的使用，递归方法的运用和html属性的添加
<!--前端代码块-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--jquery的调用-->
<script src="/static/js/jquery-2.1.4.min.js"></script>
<style type="text/css">
.comment_msg{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="comment">
<a comment_id="2" class="com">评论模板层级样式</a>
<div class="comment_list">
<div class="comment_msg">
<span>一级评论</span>
<div class="comment_msg">
<span>二级评论</span>
<div class="comment_msg">
<span>三级评论</span>
</div>
</div>
</div>
<div class="comment_msg">
<span>一级评论</span>
<div class="comment_msg">
<span>二级评论</span>
</div>
</div>
<div class="comment_msg">
<span>一级评论</span>
</div>
</div>
<div class="comment_list">
<a comment_id="1" class="com">评论</a>
</div>
</div>
</body>
</html>
//javaScript代码块
<script>
$(function () {
commentTab();
});
function commentTab(){
$('.com').click(function(){
var comment_id = $(this).attr("comment_id");
var that = $(this);
$.ajax({
url:"/comment/",
type:"post",
data:{comment_id:comment_id},
dataType:'json',
success:function (ret) {
addDivs(ret,that);
}
})
})
};
function addDivs(data,that){
var html = '<div class="comment_list">';
$.each(data,function(k,v){
var arg = '<div class="comment_msg"><span>';
arg += v.content +'</span>';
arg += diGui(v.son);
arg += '</div>';
html += arg;
});
html += "</div>";
that.after(html);
}
function diGui(sons){
var html = '';
$.each(sons,function(k,v){
var args = '<div class="comment_msg"><span>';
args += v.content +'</span>';
args += diGui(v.son);
args += '</div>';
html += args;
});
return html;
}
</script>
#后端代码块
def comment(request):
if request.method == "GET":
return render(request,"comment.html")
elif request.method == "POST":
id = request.POST.get('comment_id')
comment_list = [
{'id': 1, 'content': 'Python', 'user': '阿松大', 'parent_id': None},
{'id': 2, 'content': 'Java', 'user': '阿松大', 'parent_id': None},
{'id': 3, 'content': 'PHP', 'user': '阿松大', 'parent_id': None},
{'id': 4, 'content': '你hh', 'user': '按文', 'parent_id': 1},
{'id': 5, 'content': '阿萨德', 'user': '豆腐干', 'parent_id': 1},
{'id': 6, 'content': '风格和', 'user': '豆腐干', 'parent_id': 4},
{'id': 7, 'content': '繁华的', 'user': '微软', 'parent_id': 2},
{'id': 8, 'content': '刀锋', 'user': '微软', 'parent_id': 3},
{'id': 9, 'content': '我想静静', 'user': '阿松大', 'parent_id': 8},
{'id': 10, 'content': '我想静静', 'user': '全文', 'parent_id': None},
{'id': 11, 'content': '我是符符', 'user': 'xiaopang', 'parent_id': 6},
]
ret = []
comment_dict = {}
for line in comment_list:
line.update({'son': []}) # 给数据加键值
comment_dict[line['id']] = line # 添加到字典中
for r in comment_list:
comment_line = r
comment_line_parent_id = comment_line['parent_id']
if not comment_line_parent_id:
ret.append(r)
else:
comment_dict[comment_line_parent_id]['son'].append(r)
return HttpResponse(json.dumps(ret))
通过后端代码实现
涉及Jquery，ajax，自定义模板语言（template）
<!-- 前端代码块 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-2.1.4.min.js"></script>
<style type="text/css">
.comment_msg{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="comment">
<a comment_id="2" class="com">评论模板层级样式</a>
<div class="comment_list">
<div class="comment_msg">
<span>一级评论</span>
<div class="comment_msg">
<span>二级评论</span>
<div class="comment_msg">
<span>三级评论</span>
</div>
</div>
</div>
<div class="comment_msg">
<span>一级评论</span>
<div class="comment_msg">
<span>二级评论</span>
</div>
</div>
<div class="comment_msg">
<span>一级评论</span>
</div>
</div>
</div>
<div class="comment_list">
<a comment_id="1" class="com">评论</a>
</div>
</body>
</html>
//javascript代码块
$(function () {
commentTab();
});
function commentTab(){
$('.com').click(function(){
var comment_id = $(this).attr("comment_id");
var that = $(this);
$.ajax({
url:"/comment/",
type:"post",
data:{comment_id:comment_id},
dataType:"html",
success:function (ret) {
console.log(ret);
//addDivs(ret,that);
that.after(ret);
}
})
})
};
#后端代码块
def comment(request):
if request.method == "GET":
return render(request,"comment.html")
elif request.method == "POST":
id = request.POST.get('comment_id')
comment_list = [
{'id': 1, 'content': 'Python', 'user': '阿松大', 'parent_id': None},
{'id': 2, 'content': 'Java', 'user': '阿松大', 'parent_id': None},
{'id': 3, 'content': 'PHP', 'user': '阿松大', 'parent_id': None},
{'id': 4, 'content': '你hh', 'user': '按文', 'parent_id': 1},
{'id': 5, 'content': '阿萨德', 'user': '豆腐干', 'parent_id': 1},
{'id': 6, 'content': '风格和', 'user': '豆腐干', 'parent_id': 4},
{'id': 7, 'content': '繁华的', 'user': '微软', 'parent_id': 2},
{'id': 8, 'content': '刀锋', 'user': '微软', 'parent_id': 3},
{'id': 9, 'content': '我想静静', 'user': '阿松大', 'parent_id': 8},
{'id': 10, 'content': '我想静静', 'user': '全文', 'parent_id': None},
{'id': 11, 'content': '我是符符', 'user': 'xiaopang', 'parent_id': 6},
]
ret = []
comment_dict = {}
for line in comment_list:
line.update({'son': []}) # 给数据加键值
comment_dict[line['id']] = line # 添加到字典中
for r in comment_list:
comment_line = r
comment_line_parent_id = comment_line['parent_id']
if not comment_line_parent_id:
ret.append(r)
else:
comment_dict[comment_line_parent_id]['son'].append(r)
#return HttpResponse(json.dumps(ret))
return render(request, 'comments.html', {'comment_tree': ret})
<!--自定义模板语言：前端代码-->
{% load comafter %}
{% addDivs comment_tree %} #导入参数，此参数是后端返回的数组ret
#author：wylkjj
#date：2020/1/2
#-*- coding:utf-8 -*-
#后端自定义模板语言
from django import template
from django.utils.safestring import mark_safe
register = template.Library()
#递归方法
def diGui(son):
html = ""
for cv in son:
b = '<div class="comment_msg"><span>'
b += cv['content'] + "</span>"
b += diGui(cv['son'])
b += "</div>"
html += b
return html
@register.simple_tag
def addDivs(comment_list):
html = '<div class="comment_list">'
for v in comment_list:
a = '<div class="comment_msg"><span>'
a += v['content'] + "</span>"
a += diGui(v['son'])
a += "</div>"
html += a
return mark_safe(html)
