多级评论(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"
*/