〖Demo〗-- 多级评论

【多级评论】

一、

前戏：

1. 列表添加：

   v1 = [1,2,3,4]
   v1.append(123)
   print(v1)
   
   
   data = [
       [11,22,33],
       [44,55,66]
   ]
   
   data[0].append(data[1])
   print(data)
   # data = [
   #     [11,22,33, [44,55,66]],
   #     [44,55,66]
   # ]
   data[1].append(77)
   print(data)
   # data = [
   #     [11,22,33, [44,55,66,77]],
   #     [44,55,66,77]
   # ]
   print(data[0][3])
   #[44, 55, 66, 77]

2. 字典添加：

   v1 = {'k1':'v1'}
   v1['k2'] = 'v2'
   print(v1)
   
   
   data = [
       {'k1':'v1'},
       {'k2':'v2'}
   ]
   
   for item in data:
       item['kk'] = 'vv'
   
   print(data)

    

案例：

　　如果parent_id非0，并且parent_id等于id 就添加到id值相同得那行：

# 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},
         ]},
   ]
"""

案例代码:

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},
]
 
# v = [ row.setdefault('child',[]) for row in msg_list]
# 列表生成式
 
msg_list_dict = {
}
 
for item in msg_list:
    item['child']=[]
    msg_list_dict[item['id']] = item
 
result = []
for item in msg_list:
    pid = item['parent_id']
    if pid:
        msg_list_dict[pid]['child'].append(item)
    else:
        result.append(item)
 
for i in result:
    print(i)

解题思路：

1. 通过冒泡算法进行解答。【推荐】
2. 通过for嵌套for循环亦可以实现，但是效率较低。

二、

Django views中实现：

一层评论：

comment_str = """"""
v = """
<div class='comment'>
    <div class='content'>asdasd</div>
    <div class='content'>asdasd</div>
    <div class='content'>asdasd</div>
    <div class='content'>asdasd</div>
</div>
"""
 
comment_str += "<div class='comment'>"
for row in result:
    tpl = "<div class='content'>%s</div>" %(row["content"])
    comment_str += tpl
 
comment_str += "</div>"

 

两层评论：

comment_str = """"""
v = """
<div class='comment'>
    <div class='content'>asdasd</div>
    <div class='content'>asdasd</div>
    <div class='comment'>
        <div class='content'>asdasd</div>
        <div class='content'>asdasd</div>
        <div class='content'>asdasd</div>
    </div>
    <div class='content'>asdasd</div>
</div>
"""
 
comment_str += "<div class='comment'>"
for row in result:
    tpl = "<div class='content'>%s</div>" %(row["content"])
    comment_str += tpl
    if row['child']:
        comment_str += "<div class='comment'>"
        for jow in row['child']:
            tpl = "<div class='content'>%s</div>" %(jow['content'])
            comment_str += tpl
        comment_str += "</div>"
comment_str += "</div>"

通过递归实现多级评论：

#views.py
#####################评论####################
msg_list = [
    {'id': 1, 'content': '写得太好了', 'parent_id': None},
    {'id': 2, 'content': '你说得对', 'parent_id': None},
    {'id': 3, 'content': '顶楼上', 'parent_id': None},
    {'id': 4, 'content': '你眼瞎吗', 'parent_id': 1},
    {'id': 5, 'content': '我看是', 'parent_id': 4},
    {'id': 6, 'content': '鸡毛', 'parent_id': 2},
    {'id': 7, 'content': '你是没啊', 'parent_id': 5},
    {'id': 8, 'content': '休息休息吧', 'parent_id': 3},
]
 
msg_list_dict = {
}
 
for item in msg_list:
    item['child'] = []
    msg_list_dict[item['id']] = item
 
############msg_list_dict用于查找，msg_list
result = []
for item in msg_list:
    pid = item['parent_id']
    if pid:
        msg_list_dict[pid]['child'].append(item)
    else:
        result.append(item)
 
##############打印#############
from utils.comment import comment_tree
comment_str = comment_tree(result)
     
     
#utils\comment.py
def comment_tree(comment_list):
    """
    :param comment_list: [ {id,:child:[xxx]},{} ]
    :return:
    """
    comment_str = "<div class='comment'>"
    for row in comment_list:
        tpl = "<div class='content'>%s</div>" %(row['content'])
        comment_str += tpl
        if row['child']:
            child_str = comment_tree(row['child'])
            comment_str += child_str
    comment_str += "</div>"
 
    return comment_str
 
 
#endpage.html
<h3>评论</h3>
{{ comment_str|safe }}

 

 三、

前端实现多级评论：

#URL路由
    url(r'^comments-(\d+).html',views.comments),
    #多级评论

#视图函数
#views.py
def comments(request,nid):
    print(nid)
    response = {'status':True,'data':None,'msg':None}
    try:
        msg_list = [
            {'id': 1, 'content': '写得太好了', 'parent_id': None},
            {'id': 2, 'content': '你说得对', 'parent_id': None},
            {'id': 3, 'content': '顶楼上', 'parent_id': None},
            {'id': 4, 'content': '你眼瞎吗', 'parent_id': 1},
            {'id': 5, 'content': '我看是', 'parent_id': 4},
            {'id': 6, 'content': '鸡毛', 'parent_id': 2},
            {'id': 7, 'content': '你是没啊', 'parent_id': 5},
            {'id': 8, 'content': '休息休息吧', 'parent_id': 3},
        ]

        # v = [ row.setdefault('child',[]) for row in msg_list]
        # 列表生成式

        msg_list_dict = {
        }

        for item in msg_list:
            item['child'] = []
            msg_list_dict[item['id']] = item

        result = []
        for item in msg_list:
            pid = item['parent_id']
            if pid:
                msg_list_dict[pid]['child'].append(item)
            else:
                result.append(item)
        response['data'] = result

    except Exception as e:
        response['status'] = False
        response['msg'] = str(e)

    return HttpResponse(json.dumps(response))


#模板语言
<h3>评论</h3>
<div id="commentArea"></div>
                
                
<script src="/static/js/jquery-3.2.1.js"></script>
<script>    
    /*
    1. 调用对象方法时，通过调用类的prototype中的方法，可以扩展
    2. 正则表达式 /\w+/g
    3. 字符串replace
            ''.replace('alex','sb'); 指定参数替换
            ''.replace(/\w+/,'sb');  只替换第一个值
            ''.replace(/\w+/g,'sb'); 替换全局值
            ''.replace(/(\w+)/g,function(k,kk){return 11;}); 加分组替换全局值
    */
    String.prototype.Format = function (arg) {
        /*
        this,当前字符串  "i am {name1}, age is {age9}"
         arg,Format方法传入的参数 {name:'alex',age:18}
         return，格式化之后获取的新内容 i am alex, age is 18
        */
        var temp = this.replace(/\{(\w+)\}/g,function (k,kk) {
            return arg[kk];
        });
        return temp;
    };
    $(function () {
        // 发送Ajax请求，获取所有评论信息
        // 列表
        // js生成结构
        $.ajax({
            url: '/comments-{{ obj.nid }}.html',
            type: 'GET',
            dataType: 'JSON',
            success: function (arg) {
                if (arg.status) {
                    var comment = commentTree(arg.data);
                    $('#commentArea').append(comment)
                } else {
                    alert(arg.msg)
                }
            }
        })
    });
    function commentTree(commentList) {
        var comment_str = "<div class='comment'>";
        $.each(commentList, function (k, row) {
            //var temp = "<div class='content'>" + row.content + "</div>";
            var temp = "<div class='content'>{content}</div>".Format({content:row.content});
            comment_str += temp
            if(row.child.length>0){
                comment_str += commentTree(row.child);
            }
        });
        comment_str += '</div>';
        return comment_str
    }
</script>

 

自定义前端字符串格式化方法：

说明：
python中可以通过format来实现字符串格式化。
Python中是从str中找，前端是从String中找。
前端默认是没有字符串格式化得，但是通过String.prototype可以为前端字符串扩展一个方法。
格式化就是替换。

目的是实现这样得效果：
v1 = "i am {name},age is {age}"
v1.Format({name:'alex',age:18})

例如：
#时间：
dt = new Date()
dt.setDate()
内部就是依赖它来实现得：Date.prototype.getDate = function() {};

#字符串：
var v = 'sdf'
v.charAT()
内部是依赖它来实现得：String.prototype.charAt = function(pos) {};

例子：
String.prototype.Format = function (arg) {
    /*
    this,当前字符串
    arg,Format方法传入的参数
    return,格式化之后获取的参数
     */
    console.log(this,arg);
    return '666'
};

结果：

#加匿名函数例子：
v2 = v1.replace(/\{\w+\}/g,function(k){console.log(k)})

结果：
{name}
{age}
"i am undefined,age is undefined"


#加分组例子：
v2 = v1.replace(/\{(\w+)\}/g,function(k,kk){console.log(k,kk)}) #函数可以有返回值

结果：
{name} name
{age} age
"i am undefined,age is undefined"