web页面 之 评论盖楼
一、前言
评论是人与人之间，在网络上交互的一个重中之重的窗口，这在前端当中也算是一个不可或缺的模块！
我们浏览各种能吐槽，能刷人气的网站，在各种头条的下面，都有评论这一项！我们围观水军吐槽的时候会发现，他们的评论楼有的是特别有层次感，一眼忘穿秋水知道怎么个评论大法，而有的设计的是一楼一楼的盖起来，要评论别人也是盖一层！简直是没有耐心去观战！估计是他们的前端想草草了事，整了个这么友好性近乎为零的评论楼，看的时候作为看官的我，想咂电脑的心都有。所以今天我们就简单的聊聊层次分明的盖楼方法！
二、原理
#我们前提规定评论的内容都存在数据库里，字段与下面字典中的key一致！当我们从数据库中取出数据，然后实现评论楼！
#从数据库中以字典类型读取到数据，这些数据存放在一个列表里，对这个列表进行循环，先为每个字典加入一对键值对"'child':[]",判断每个字典中的父ID是否有值，
#没值证明是鼻祖，有值就找到对应的父ID，把自己加入到其孩子键为"child"所对应的列表里，依次类推对所有的数据进行一次整理！
#数据库获取到的数据
msg_list = [
{'id':1,'content':'xxx','parent_id':None},
{'id':2,'content':'xxx','parent_id':None},
{'id':3,'content':'xxx','parent_id':None},
{'id':4,'content':'xxx','parent_id':1},
{'id':5,'content':'xxx','parent_id':4},
{'id':6,'content':'xxx','parent_id':2},
{'id':7,'content':'xxx','parent_id':5},
{'id':8,'content':'xxx','parent_id':3},
]
"""
数据重新整合之后，按照我们的逻辑得到的数据
msg_list = [
{
'id':1,'content':'xxx',parent_id:None,child:[
{'id':4,'content':'xxx',parent_id:1},
{'id':5,'content':'xxx',parent_id:1,child:[
{'id':7,'content':'xxx',parent_id:5},
]}]
},
{'id':2,'content':'xxx',parent_id:None,child:[
{'id':6,'content':'xxx',parent_id:2},
]},
{'id':3,'content':'xxx',parent_id:None,child:[
{'id':8,'content':'xxx',parent_id:3},
]},
]
"""
"""
最终效果展示：
评论1
评论4
评论6
评论5
评论2
评论3
"""
针对这种显示方式，我们有两种方法：
一种是在服务端这边，通过函数做好数据的整合然后处理成要显示的效果的HTML标签字符串，然后发送给客户端；
另一种是把整合好的数据发送给客户端，让客户端去实现最终显示的效果！
由于有子父ID判断的问题，需要用到递归函数，递归函数的弊端就是执行慢，严重占用机器的性能！如果是多人次的访问就会给服务器带来很大的压力；
而把数据传递到客户哪里，让客户的页面通过JS实现最终显示，虽然是把递归放到了客户端上，但是从全局上讲客户端仅仅是处理这个递归函数，而服务端仅是一个数据整合的功能，会大大提交服务器的效率！
#按照这个重新整合出来的已经分好等级的数据，通过父ID和child进行整理拼接，在页面上实现有层级的评论楼！
#python里面的apend之类的东西都是引用的原来数据的内从地址,对原数据进行操作的话
#我们引用的数据也会发生一样的变化(字典列表之类的)
#浙江吴彦祖的方法：
# for i in msg_list:
# i['child']=[]
# for i in range(len(msg_list)-1,-1,-1):
# if msg_list[i]['parent_id']:
# msg_list[msg_list[i]['parent_id'] - 1]['child'].append(msg_list[i])
# new_msg_list = [i for i in msg_list if i['parent_id'] is None]
# print(new_msg_list)
#老师讲的方法
# v=[row.setdefault('child',[]) for row in msg_list] #这和地下的第一个for循环的作用是一样的,给每一个元素加一个'child':[]
# print(msg_list)
#如果我们想加快索引(快点找到数据的话)就建一个字典的数据结构，这是因为字典中的key会以一种特殊方式存于内存之中，他这种结构就是为了方便查找对应的值！
msg_list_dict={} #加快索引,节省时间
for item in msg_list:
item['child']=[]
msg_list_dict[item['id']]=item #字典中key为item['id']，value为item
#把字典数据结构填上数据,能够加快索引,而且我们数据还是占得原来的内从空间
#我们只是引用了数据的内容空间,所以不存在新的数据结构浪费空间一说
result=[]
for item in msg_list:
pid=item['parent_id']
if pid: #如果parent_id不为空,说明它是子级,要把自己加入对应的父级
msg_list_dict[pid]['child'].append(item)
else: #如果为空,说明他是父级,鼻祖级别，要把它单独立出来用
result.append(item)
#result就是我们最终要的结果,因为这里面全是引用,所有数据的内存地址都没有变
#只不过被多个数据结构引用了而已
print(result)
三、精简版本
Django app中---->views.py函数：
def comments(request,nid):
"""
评论
:param request:
:param nid:
:return:
"""
ret = {"status":True,"data":None,"msg":None}#定义初始值
try:
msg_list = models.Comment.objects.values("nid","article_id","content","create_time","reply_id","user_id")
msg_list_dict = {} # 定义一个字典
for item in msg_list:
item["child"] = [] # 给列表中的每个字典添加一对键值对 "child"=[]
msg_list_dict[item["nid"]] = item # 把数据重组成一个新的字典，以id为key，原字典为values
result = [] # 定义一个新列表
for item in msg_list:
pid = item["reply_id"] # 父id
if pid: # 如果父id存在的话
msg_list_dict[pid]["child"].append(item) # 就从新字典中为id为父id的child添加值
else:
result.append(item) # 否则的话，就把对应的字典添加到新列表中(列表信息重组，把重复的值去掉)。
ret["data"] = result
except Exception as e:
ret["status"] = False
ret["msg"] = str(e)
return HttpResponse(json.dumps(ret))
Django 中模版 HTML代码：
//我就是尝试着加了个框，和能看到位置手写的值
<div class="comments">
<div></div>
<div class="coms_head">评论列表</div>
<div class="coms_body">
<div class="coms_items_title">#1楼</div>
<div></div>
<div class="coms_items_info">你猜我写的啥？</div>
<div id="commentArea"></div>
</div>
</div>
重点来啦！JS实现多级评论：
<script type="text/javascript" src="/static/js/jquery-3.2.1.js"></script>
<script>
$(function(){
$.ajax({
url:"/comments-{{ articles.nid }}.html",
type:"GET", //以GET方式获取数据
dataType:"JSON",
success:function(arg){
if(arg.status){
var comment = commentTree(arg.data);
$("#commentArea").append(comment);
} else{
alert(arg.msg);
}
}
})
});
//自定义字符串格式化的方法（有一张博客里写过！）
String.prototype.Format = function(arg){
var temp = this.replace(/\{(\w+)\}/g,function(k,kk){
return arg[kk];
});
return temp;
};
//简单实现评论楼的功能，通过递归判断信息中有没有child项，以实现主评论和子评论之间有层次关系
function commentTree(commentList){
var comment_str = "<div class='comment' >";
$.each(commentList,function(k,row){
var temps = "<div class='content'>{content}</div>".Format({"content":row.content});
comment_str += temps;
if (row.child.length>0){
comment_str +=commentTree(row.child);
}
});
comment_str += "</div>";
return comment_str;
}
</script>
必不可少的路由：
url(r'^comments-(\w+).html$',views.comments),
