多级评论(day86)

多级评论脚本实现

# 评论列表
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},
			]},
	]
"""



}

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)

print(result)


# 打印多级评论
def show(arg,count):
    for item in arg:
        print(item["id"], "  " * count + item["content"])
        if item["child"]:
            show(item["child"], count+1)
show(l, 1)

django实现1

def comment_tree(comment_list):
    comment_str = "<div class='comment'>"
    for item in comment_list:
        tpl = "<div class='content'>%s</div>" %(item["content"])
        comment_str += tpl
        if item["child"]:
            child_str = comment_tree(item["child"])
            comment_str += child_str
    comment_str += "</div>"
    return comment_str

javascript实现

<script>
    $(function () {
        $.ajax({
            url: "/comment/",
            type: "post",
            data: {"csrfmiddlewaretoken": "{{ csrf_token }}", "nid": "{{ article_obj.nid }}"},
            dataType: "JSON",
            success: function (args) {
                console.log(args);
                var comment = comment_tree(args);
                $("#box").append(comment)
            }
        })
    });

    function comment_tree(args) {
        var ele = $("<ul></ul>");
        ele.attr("class", "comment-list");
        $.each(args, function (i, item) {

            var ele2 = $("<li></li>"); // li标签
            var ele4 = $("<img>");  // 头像
            var ele5 = $("<a>" + item.user__nickname + "</a>");  //  用户名
            var ele6 = $("<span></span>");
            var ele_hr = $("<hr>");
            ele6.text(item.content);
            // 创建头像标签
            ele4.prop("src", item.user__avatar);
            // 创建用户名标签
            {#                ele5.text(item.user__nickname);#}

            ele2.append(ele4);//添加头像
            ele2.append(ele5); // 添加昵称
            // 添加评论
            ele2.append(ele6);
            ele2.append(ele_hr);
            // 把评论的ul标签添加到ul
            ele.append(ele2);
            if (item.child) {
                var ele3 = comment_tree(item.child);
            }
            // 把生成的ul标签添加
            ele.append(ele3);
        });

        return ele;
    }
</script>

django中的事物transaction

try:
    from django.db import transaction
    with transaction.atomic():
                models.UpDown.objects.create(user_id=user_id,article_id=article_id,up=False)
        models.Article.objects.filter(nid=article_id).update(down_count=F('down_count')+1)

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

js自定义String.Format方法

前面我们用python的字符串拼接实现了多级评论。在JavaScript中没有字符串格式化方法，我们需要在String.prototype中定义自己的方法。

<script>
/*
1.this代表当前传入的字符串。
2.arg代表调用Format时传入的参数。
3.return 是格式化后的字符串。
4.a1和a2分别代表{name}和name。
*/
    //  自定义stringFormat函数
    String.prototype.Format = function(arg){
        temp = this.replace(/{(w+)}/g,function (a1, a2) {
            return arg[a2];
        });
        return temp;
    }
</script>

/*
浏览器console调用函数
1.a1 = "i am {name}, age is {age}";
2.a2 = a1.Format({name:"zii", age:"23"});
3."i am zii, age is 23"
*/