博客核心内容：

  • 深入理解Python中的引用

    • 相关实例程序
  • 多级评论的相关实例
    • 多级评论的前端页面展示
    • 利用递归的方法形成多级评论核心
      • 动态展示效果图以及相应代码
    • 管理菜单
      • 简单的动态管理菜单静态图
      • 简单的动态管理菜单动态图
      • 简单的动态管理菜单动态图引发出的多级评论利用模板改造而来没有标签
      • 动态菜单示例模板含有相应的rul
        • 操作步骤总结
      • 递归算法使用总结
  • 多级评论的展示

深入理解Python中的引用

相关实例程序

对于字典查找和列表查找，当涉及的频繁操作的时候，我们就应该用字典查找代替列表查找。

示例程序1：

#!/usr/bin/python
# -*- coding:utf-8 -*-users_info = [{'id':1,'name':'alex','pwd':'123'},{'id':2,'name':'egon','pwd':'456'},{'id':3,'name':'eric','pwd':'789'},
]users_dict = {}
for item in users_info:users_dict[item['id']] = item"""
运行的相关结果:
(1, {'id':1,'name':'alex','pwd':'123'})
(2, {'id':2,'name':'egon','pwd':'456'})
(3, {'id':3,'name':'eric','pwd':'789'})
"""

示例程序2：在上面的程序中，value值实际上只占用了一块内存空间

#!/usr/bin/python
# -*- coding:utf-8 -*-users_info = [{'id':1,'name':'alex','pwd':'123'},{'id':2,'name':'egon','pwd':'456'},{'id':3,'name':'eric','pwd':'789'},
]users_dict = {}
for item in users_info:users_dict[item['id']] = item"""
运行的相关结果:
(1, {'id':1,'name':'alex','pwd':'123'})
(2, {'id':2,'name':'egon','pwd':'456'})
(3, {'id':3,'name':'eric','pwd':'789'})
"""# 我们通过字典去改变列表中的数值
users_dict[1]['pwd']=345# 查看因字典改变而受到影响的列表
for item in users_info:print(item)"""
{'id': 1, 'pwd': 345, 'name': 'alex'}
{'id': 2, 'pwd': '456', 'name': 'egon'}
{'id': 3, 'pwd': '789', 'name': 'eric'}
"""

示例3：嵌套的递归应用

#!/usr/bin/python
# -*- coding:utf-8 -*-"""
目的:根据comment_list生成我们最终想要的结果
"""comment_list = [{'id':1,'news_id':1,'user_id':10,'content':'写的什么玩意啊','parent_id':None},{'id':2,'news_id':1,'user_id':11,'content':'还真不是什么玩意','parent_id':1},{'id':3,'news_id':1,'user_id':12,'content':'写的真好','parent_id':1},{'id':4,'news_id':1,'user_id':11,'content':'我总算看明白了,原来是因为我智商低','parent_id':3},{'id':5,'news_id':1,'user_id':19,'content':'还可以吧','parent_id':None},]#步骤1:将列表格式转化为字典格式进行存储,同时增加child相关信息
comment_dict = {}
for row in comment_list:row['child'] = []comment_dict[row['id']] = rowfor k,v in comment_dict.items():print(k,v)"""
第一步骤得到我们想要的结果:
1  {'news_id': 1, 'content': '写的什么玩意啊', 'id': 1, 'child': [], 'parent_id': None, 'user_id': 10}
2  {'news_id': 1, 'content': '还真不是什么玩意', 'id': 2, 'child': [], 'parent_id': 1, 'user_id': 11}
3  {'news_id': 1, 'content': '写的真好', 'id': 3, 'child': [], 'parent_id': 1, 'user_id': 12}
4  {'news_id': 1, 'content': '我总算看明白了,原来是因为我智商低', 'id': 4, 'child': [], 'parent_id': 3, 'user_id': 11}
5  {'news_id': 1, 'content': '还可以吧', 'id': 5, 'child': [], 'parent_id': None, 'user_id': 19}
"""#步骤二:如果某个评论拥有父亲评论,则我们将其添加到父列表当中,下面一步也是最终要的一步
print('*'*100)
for row in comment_list:if row['parent_id']:parent_id = row['parent_id']comment_dict[parent_id]['child'].append(row)else:passfor key,value in comment_dict.items():print(key,value)"""
1  {'news_id': 1, 'content': '写的什么玩意啊', 'parent_id': None, 'user_id': 10, 'id': 1, 'child': [{'news_id': 1, 'content': '还真不是什么玩意', 'parent_id': 1, 'user_id': 11, 'id': 2, 'child': []}, {'news_id': 1, 'content': '写的真好', 'parent_id': 1, 'user_id': 12, 'id': 3, 'child': [{'news_id': 1, 'content': '我总算看明白了,原来是因为我智商低', 'parent_id': 3, 'user_id': 11, 'id': 4, 'child': []}]}]}
2  {'news_id': 1, 'content': '还真不是什么玩意', 'parent_id': 1, 'user_id': 11, 'id': 2, 'child': []}
3  {'news_id': 1, 'content': '写的真好', 'parent_id': 1, 'user_id': 12, 'id': 3, 'child': [{'news_id': 1, 'content': '我总算看明白了,原来是因为我智商低', 'parent_id': 3, 'user_id': 11, 'id': 4, 'child': []}]}
4  {'news_id': 1, 'content': '我总算看明白了,原来是因为我智商低', 'parent_id': 3, 'user_id': 11, 'id': 4, 'child': []}
5  {'news_id': 1, 'content': '还可以吧', 'parent_id': None, 'user_id': 19, 'id': 5, 'child': []}
"""# 步骤3:清洗数据,获得我们期望的最终结果
print('*'*100)
comment_result = {}
for k,v in comment_dict.items():if v['parent_id'] == None:comment_result[k] = vprint(comment_result.__len__())
for k,v in comment_result.items():print(k,v)"""
1 {'user_id': 10, 'child': [{'user_id': 11, 'child': [], 'content': '还真不是什么玩意', 'news_id': 1, 'parent_id': 1, 'id': 2}, {'user_id': 12, 'child': [{'user_id': 11, 'child': [], 'content': '我总算看明白了,原来是因为我智商低', 'news_id': 1, 'parent_id': 3, 'id': 4}], 'content': '写的真好', 'news_id': 1, 'parent_id': 1, 'id': 3}], 'content': '写的什么玩意啊', 'news_id': 1, 'parent_id': None, 'id': 1}
5 {'user_id': 19, 'child': [], 'content': '还可以吧', 'news_id': 1, 'parent_id': None, 'id': 5}
"""

多级评论的相关实例

多级评论的前端页面展示

我们通过利用css样式设计的技巧，达到多级评论的效果.

实例程序1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.comment > .content {margin-left: 30px;color: red;font-weight: 700;}</style>
</head>
<body>
<h3>今天上海渡劫的视频真给力啊?</h3>
<div class="comment"><div class="content"><div class="item">我擦,是真的吗?</div><div class="comment"><div class="content"><div class="item">你个傻x,这你也信!</div></div></div><div class="item">不应该吧!</div><div class="comment"><div class="content"><div class="item">肯定是假的啊!</div><div class="item">应该是假的!</div></div></div><div class="item">肯定是假的!</div></div>
</div>
</body>
</html>

效果展示：

实例程序2：将后台的html页面传入到前台页面进行显示
后台代码：

def comment(request):comment_content = """<div class="comment"><div class="content"><div class="item">我擦,是真的吗?</div><div class="comment"><div class="content"><div class="item">你个傻x,这你也信!</div></div></div><div class="item">不应该吧!</div><div class="comment"><div class="content"><div class="item">肯定是假的啊!</div><div class="item">应该是假的!</div></div></div><div class="item">肯定是假的!</div></div>
</div>"""return render(request,'comment.html',{'comment_content':comment_content})

前端显示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.comment > .content {margin-left: 30px;color: red;font-weight: 700;}</style>
</head>
<body>
<h3>今天上海渡劫的视频真给力啊?</h3>
{{ comment_content|safe }}
</body>
</html>

渲染出的效果和上面是一样的.

利用递归的方法形成多级评论（核心）

根据前端页面的展示情况在后台进行相应的操作
数据库当中的内容：

后台代码：

def create_child_node(child_list):pre_str = """<div class="comment"><div class="content">"""for item in child_list:tpl = '<div class="item">%s: %s</div>'content = tpl % (item['user__username'], item['content'])pre_str = pre_str + contentif item['child']:# 在这里面用到了递归child_str = create_child_node(item['child'])pre_str = pre_str + child_strend_str = """</div></div>"""return pre_str+end_strdef create_html(comment_result):pre_str = """<div class="comment"><div class="content">"""for key,value in comment_result.items():tpl = '<div class="item">%s: %s</div>'content = tpl%(value['user__username'],value['content'])pre_str = pre_str + content# 如果该评论含有相应的子评论if value['child']:child_str = create_child_node(value['child'])pre_str = pre_str + child_strend_str = """</div></div>"""print(pre_str+end_str)return pre_str+end_strdef comment(request):# 到底获取什么内容,是由我们用户进行自定义的comment_list = models.Comment.objects.filter(news_id=1).values('id','news_id','user_id','content','parent_id','user__username')"""{'user_id': 10, 'id': 1, 'news_id': 1, 'content': '写的什么玩意啊?', 'parent_id': None, 'user__username': 'Klay'}{'user_id': 11, 'id': 2, 'news_id': 1, 'content': '还auth_group不是什么玩意?', 'parent_id': 1, 'user__username': 'Jenson'}{'user_id': 12, 'id': 3, 'news_id': 1, 'content': '写的真好！', 'parent_id': 1, 'user__username': 'Darcie'}{'user_id': 11, 'id': 4, 'news_id': 1, 'content': '我总算看明白了,原来是因为我智商低.', 'parent_id': 3, 'user__username': 'Jenson'}{'user_id': 19, 'id': 5, 'news_id': 1, 'content': '还可以吧!', 'parent_id': None, 'user__username': 'ashley'}{'user_id': 20, 'id': 6, 'news_id': 1, 'content': '有点意思！', 'parent_id': 3, 'user__username': 'baby'}"""# 步骤1:comment_dict = {}for row in comment_list:# 先给每一条评论增加上一个字段childrow['child'] = []comment_dict[row['id']] = row# 步骤二：最重要的一步for row in comment_list:if row['parent_id']:# 如果该评论拥有父评论,则添加到父亲的child列表当中parent_id = row['parent_id']# 因为append,所以是同一块内存空间comment_dict[parent_id]['child'].append(row)else:pass# 步骤三：清洗数据,获取最终的结果comment_result = {}for k, v in comment_dict.items():if v['parent_id'] == None:comment_result[k] = vprint(comment_result.__len__())"""(1, {'parent_id': None, 'child': [{'parent_id': 1, 'child': [], 'content': '还不是什么玩意?', 'news_id': 1, 'user_id': 11, 'id': 2}, {'parent_id': 1, 'child': [{'parent_id': 3, 'child': [], 'content': '我总算看明白了,原来是因为我智商低.', 'news_id': 1, 'user_id': 11, 'id': 4}, {'parent_id': 3, 'child': [], 'content': '有点意思！', 'news_id': 1, 'user_id': 20, 'id': 6}], 'content': '写的真好！', 'news_id': 1, 'user_id': 12, 'id': 3}], 'content': '写的什么玩意啊?', 'news_id': 1, 'user_id': 10, 'id': 1})(5, {'parent_id': None, 'child': [], 'content': '还可以吧!', 'news_id': 1, 'user_id': 19, 'id': 5})"""# 到现在为止我们已经获取了我们的结构化数据comment_result = {},接下来进行处理,返回到前端页面comment_str = create_html(comment_result)return render(request,'comment.html',{'comment_str':comment_str})

前端页面代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.comment > .content {margin-left: 30px;color: red;font-weight: 700;}</style>
</head>
<body>
<h3>今天上海渡劫的视频真给力啊?</h3>
{{ comment_str|safe }}
</body>
</html>

运行效果：

生成的相应的html代码：

<div class="comment"><div class="content"><div class="item">Klay: 写的什么玩意啊?</div><div class="comment"><div class="content"><div class="item">Jenson: 还不是什么玩意?</div><div class="item">Darcie: 写的真好！</div><div class="comment"><div class="content"><div class="item">Jenson: 我总算看明白了,原来是因为我智商低.</div><div class="comment"><div class="content"><div class="item">George: 好羡慕你们这些没有脸的人啊</div></div></div><div class="item">baby: 有点意思！</div></div></div></div></div><div class="item">ashley: 还可以吧!</div></div>
</div>

动态展示效果图以及相应代码

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.comment > .content {margin-left: 30px;font-family: 楷体;font-weight: 700;}.hide {display: none;}</style>
</head>
<body>
<p>
<div style="font-weight: 700;font-family: 楷体;color: red">今天上海渡劫的视频真给力啊?</div>
</p>
{{ comment_str|safe }}<script src="{% static  "js/jquery-1.11.3.min.js" %}"></script>
<script>$(function () {{# 给title标题添加相应的事件 #}$('.item').click(function () {if ($(this).next().hasClass('comment')) {if ($(this).next().hasClass('hide')) {$(this).next().removeClass('hide')} else {$(this).next().addClass('hide')}}})})
</script>
</body>
</html>

效果展示：

管理菜单

简单的动态管理菜单静态图

准则：一个静态标题对应一个item系列.

下面我们实现一个简单的动态管理菜单
[参考链接]http://blog.csdn.net/a2011480169/article/details/78145160)
当然我们希望是下面这样的（下面的这个还没有实现动态的效果）

<div class="comment"><div class="content"><div class="item">我的流程中心</div><div class="comment"><div class="content"><div class="item">待我处理</div><div class="item">我的申请</div><div class="item">我处理过的</div></div></div><div class="item">上线数据流程</div><div class="comment"><div class="content"><div class="item">数据库上线流程</div><div class="item">授权申请流程</div><div class="item">数据结转申请流程</div></div></div><div class="item">服务器操作流程</div></div>
</div>

效果：

但是到现在为止，我们还没有实现动态折叠的效果呢！

简单的动态管理菜单动态图

代码示例：
前端代码：

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.body a {display: block;}.item .body {margin-left: 30px;}.item .hide {display: none;}</style>
</head>
<body>
{#接下来我们要实现菜单的功能#}
<div class="item"><div class="title">用户管理</div><div class="body hide"><a href="#">创建用户</a><div class="item"><div class="title">用户管理</div><div class="body hide"><a href="#">创建用户</a><a href="#">用户列表</a></div></div><a href="#">用户列表</a></div>
</div>
<div class="item"><div class="title">订单管理</div><div class="body hide"><a href="#">创建订单</a><a href="#">取消订单</a></div>
</div>
<script src="{% static  "js/jquery-1.11.3.min.js" %}"></script>
<script>{# 一旦加载页面,就执行里面的函数 #}$(function () {{# 给title标题添加相应的事件 #}$('.title').click(function () {if ($(this).next().hasClass('hide')) {$(this).next().removeClass('hide')} else {$(this).next().addClass('hide')}})})
</script>
</body>
</html>

效果展示：

代码块总结：



如果没有url我们就可以用下面的模板：

<div class="item"><div class="header">用户管理</div><div class="body"><div class="item"><div class="header">用户管理</div><div class="body"><div class="item"><div class="header">用户管理</div></div></div></div></div>
</div>
<div class="item"><div class="header">用户管理</div>
</div>

简单的动态管理菜单动态图引发出的多级评论（利用模板改造而来）没有标签

下满我们就用上面这种方法去写动态的多级评论，并且这次涉及到的递归算法和上面是类似的。
示例程序：

def create_child_node(child_list):pre_str = """<div class="child"><div class="item">"""for item in child_list:tpl = '<div class="header">%s: %s</div>'content = tpl % (item['user__username'], item['content'])pre_str = pre_str + content# 在这一层用到了递归if item['child']:# 在这里面用到了递归child_str = create_child_node(item['child'])pre_str = pre_str + child_strend_str = """</div></div>"""return pre_str+end_strdef build_comment_tree(comment_result):"""function:通过递归形成相应的html(1, {'parent_id': None, 'child': [{'parent_id': 1, 'child': [], 'content': '还不是什么玩意?', 'news_id': 1, 'user_id': 11, 'id': 2}, {'parent_id': 1, 'child': [{'parent_id': 3, 'child': [], 'content': '我总算看明白了,原来是因为我智商低.', 'news_id': 1, 'user_id': 11, 'id': 4}, {'parent_id': 3, 'child': [], 'content': '有点意思！', 'news_id': 1, 'user_id': 20, 'id': 6}], 'content': '写的真好！', 'news_id': 1, 'user_id': 12, 'id': 3}], 'content': '写的什么玩意啊?', 'news_id': 1, 'user_id': 10, 'id': 1})(5, {'parent_id': None, 'child': [], 'content': '还可以吧!', 'news_id': 1, 'user_id': 19, 'id': 5})有url生成a标签,没有的话则生成div标签"""# 步骤1:我们先形成最外面的评论pre_str = """<div class="item">     """end_str = """</div>"""comment_str = ""for key,value in comment_result.items():tpl = '<div class="header">%s: %s</div>'content = tpl%(value['user__username'],value['content'])if value['child']:child_str = create_child_node(value['child'])comment_str +=  pre_str+content+child_str+end_strelse:comment_str += pre_str + content + end_strreturn comment_strdef comment(request):# 到底获取什么内容,是由我们用户进行自定义的comment_list = models.Comment.objects.filter(news_id=1).values('id','news_id','user_id','content','parent_id','user__username')"""{'user_id': 10, 'id': 1, 'news_id': 1, 'content': '写的什么玩意啊?', 'parent_id': None, 'user__username': 'Klay'}{'user_id': 11, 'id': 2, 'news_id': 1, 'content': '还auth_group不是什么玩意?', 'parent_id': 1, 'user__username': 'Jenson'}{'user_id': 12, 'id': 3, 'news_id': 1, 'content': '写的真好！', 'parent_id': 1, 'user__username': 'Darcie'}{'user_id': 11, 'id': 4, 'news_id': 1, 'content': '我总算看明白了,原来是因为我智商低.', 'parent_id': 3, 'user__username': 'Jenson'}{'user_id': 19, 'id': 5, 'news_id': 1, 'content': '还可以吧!', 'parent_id': None, 'user__username': 'ashley'}{'user_id': 20, 'id': 6, 'news_id': 1, 'content': '有点意思！', 'parent_id': 3, 'user__username': 'baby'}"""# 步骤1:comment_dict = {}for row in comment_list:# 先给每一条评论增加上一个字段childrow['child'] = []comment_dict[row['id']] = row# 步骤二：最重要的一步for row in comment_list:if row['parent_id']:# 如果该评论拥有父评论,则添加到父亲的child列表当中parent_id = row['parent_id']# 因为append,所以是同一块内存空间comment_dict[parent_id]['child'].append(row)else:pass# 步骤三：清洗数据,获取最终的结果comment_result = {}for k, v in comment_dict.items():if v['parent_id'] == None:comment_result[k] = vprint(comment_result.__len__())"""(1, {'parent_id': None, 'child': [{'parent_id': 1, 'child': [], 'content': '还不是什么玩意?', 'news_id': 1, 'user_id': 11, 'id': 2}, {'parent_id': 1, 'child': [{'parent_id': 3, 'child': [], 'content': '我总算看明白了,原来是因为我智商低.', 'news_id': 1, 'user_id': 11, 'id': 4}, {'parent_id': 3, 'child': [], 'content': '有点意思！', 'news_id': 1, 'user_id': 20, 'id': 6}], 'content': '写的真好！', 'news_id': 1, 'user_id': 12, 'id': 3}], 'content': '写的什么玩意啊?', 'news_id': 1, 'user_id': 10, 'id': 1})(5, {'parent_id': None, 'child': [], 'content': '还可以吧!', 'news_id': 1, 'user_id': 19, 'id': 5})"""# 到现在为止我们已经获取了我们的结构化数据comment_result = {},接下来进行处理,返回到前端页面# 通过build_comment_tree将我们的结构化数据形成相应的htmlcomment_str = build_comment_tree(comment_result)return render(request,'comment.html',{'comment_str':comment_str})

前端代码：

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.item {font-family: 楷体;font-weight: 700;}.child {margin-left: 30px;font-family: 楷体;font-weight: 700;}.hide {display: none;}</style>
</head>
<body>
<p>
<div style="font-weight: 700;font-family: 楷体;color: red">今天上海渡劫的视频真给力啊?</div>
</p>
{#接下来我们用另外一种方式实现菜单的动态效果图#}
{{ comment_str|safe }}
<script src="{% static  "js/jquery-1.11.3.min.js" %}"></script>
<script>$(function () {{# 给title标题添加相应的事件 #}$('.header').click(function () {if ($(this).next().hasClass('child')) {if ($(this).next().hasClass('hide')) {$(this).next().removeClass('hide')} else {$(this).next().addClass('hide')}}})})
</script>
</body>
</html>

效果图：

动态菜单示例（模板，含有相应的rul）

<div class="item"><div class="title">用户管理</div><div class="child"><a href="#">用户列表</a><a href="#">添加用户</a></div>
</div>
<div class="item"><div class="title">订单管理</div><div class="child"><a href="#">订单列表</a><a href="#">取消订单</a><div class="item"><div class="title">退换管理</div><div class="child"><a href="#">退货</a><a href="#">换货</a></div></div></div>
</div>

代码示例：
后台代码：

from django.shortcuts import render, HttpResponse
from app01 import models# Create your views here.
def create_child_node(child_list):""":param child_list: [{'url': '/users.html', 'child': [], 'id': 3, 'parent_id': 1, 'caption': '用户列表'}, {'url': '/add_user.html', 'child': [], 'id': 4, 'parent_id': 1, 'caption': '添加用户'}]{'url': 'None', 'child': [], 'id': 4, 'parent_id': 1, 'caption': '添加用户'}]无论怎么样,一样要将递归停留在这个函数内部,这样就方便多了."""pre_str = """<div class="child">"""end_str = """</div>"""for item in child_list:if item['url']:tpl = '<a href="%s">%s</a>'content = tpl%(item['url'],item['caption'])pre_str = pre_str + contentelse:head_str = '<div class="item">'tail_str = '</div>'tpl = '<div class="title">%s</div>'content = tpl % (item['caption'])if item['child']:child_str = create_child_node(item['child'])pre_str = pre_str = pre_str +  head_str + content + child_str + tail_strelse:pre_str = pre_str = pre_str + head_str + content + tail_strreturn pre_str + end_strdef build_menu_tree(menu_result):""":param menu_result: 1 {'url': None, 'child': [{'url': '/users.html', 'child': [], 'id': 3, 'parent_id': 1, 'caption': '用户列表'}, {'url': '/add_user.html', 'child': [], 'id': 4, 'parent_id': 1, 'caption': '添加用户'}], 'id': 1, 'parent_id': None, 'caption': '用户管理'}2 {'url': None, 'child': [{'url': '/orders.html', 'child': [], 'id': 5, 'parent_id': 2, 'caption': '订单列表'}, {'url': '/xxxxx.html', 'child': [], 'id': 6, 'parent_id': 2, 'caption': '取消订单'}, {'url': None, 'child': [{'url': '/aaa.html', 'child': [], 'id': 8, 'parent_id': 7, 'caption': '退货'}, {'url': '/bbb.html', 'child': [], 'id': 9, 'parent_id': 7, 'caption': '换货'}], 'id': 7, 'parent_id': 2, 'caption': '退换管理'}], 'id': 2, 'parent_id': None, 'caption': '订单管理'}"""pre_str = """<div class="item">"""end_str = """</div>"""menu_str = ""for key,value in menu_result.items():tpl = '<div class="title">%s</div>'content = tpl%(value['caption'])if value['child']:child_str = create_child_node(value['child'])menu_str += pre_str + content + child_str + end_strelse:menu_str += pre_str + content + end_strprint(menu_str)return menu_strdef index(request):menu_list = models.Menu.objects.values('id', 'caption', 'url', 'parent_id')"""{'url': None, 'caption': '用户管理', 'id': 1, 'parent_id': None}{'url': None, 'caption': '订单管理', 'id': 2, 'parent_id': None}{'url': '/users.html', 'caption': '用户列表', 'id': 3, 'parent_id': 1}{'url': '/add_user.html', 'caption': '添加用户', 'id': 4, 'parent_id': 1}{'url': '/orders.html', 'caption': '订单列表', 'id': 5, 'parent_id': 2}{'url': '/xxxxx.html', 'caption': '取消订单', 'id': 6, 'parent_id': 2}{'url': None, 'caption': '退换管理', 'id': 7, 'parent_id': 2}{'url': '/aaa.html', 'caption': '退货', 'id': 8, 'parent_id': 7}{'url': '/bbb.html', 'caption': '换货', 'id': 9, 'parent_id': 7}凡是None点击之后都会出现折叠菜单."""# 步骤1:将列表结构转化为字典结构,并给每一个添加上一个child字段menu_dict = {}for row in menu_list:# 先加上child字段row['child'] = []menu_dict[row['id']] = row"""1  {'caption': '用户管理', 'parent_id': None, 'id': 1, 'url': None, 'child': []}2  {'caption': '订单管理', 'parent_id': None, 'id': 2, 'url': None, 'child': []}3  {'caption': '用户列表', 'parent_id': 1, 'id': 3, 'url': '/users.html', 'child': []}4  {'caption': '添加用户', 'parent_id': 1, 'id': 4, 'url': '/add_user.html', 'child': []}5  {'caption': '订单列表', 'parent_id': 2, 'id': 5, 'url': '/orders.html', 'child': []}6  {'caption': '取消订单', 'parent_id': 2, 'id': 6, 'url': '/xxxxx.html', 'child': []}7  {'caption': '退换管理', 'parent_id': 2, 'id': 7, 'url': None, 'child': []}8  {'caption': '退货', 'parent_id': 7, 'id': 8, 'url': '/aaa.html', 'child': []}9  {'caption': '换货', 'parent_id': 7, 'id': 9, 'url': '/bbb.html', 'child': []}"""# 步骤二:最重要的一步,将子菜单添加到父child当中for row in menu_list:if row['parent_id']:# 如果该菜单拥有父菜单,则添加到父亲的child列表当中parent_id = row['parent_id']menu_dict[parent_id]['child'].append(row)else:pass"""1 {'parent_id': None, 'child': [{'parent_id': 1, 'child': [], 'caption': '用户列表', 'id': 3, 'url': '/users.html'}, {'parent_id': 1, 'child': [], 'caption': '添加用户', 'id': 4, 'url': '/add_user.html'}], 'caption': '用户管理', 'id': 1, 'url': None}2 {'parent_id': None, 'child': [{'parent_id': 2, 'child': [], 'caption': '订单列表', 'id': 5, 'url': '/orders.html'}, {'parent_id': 2, 'child': [], 'caption': '取消订单', 'id': 6, 'url': '/xxxxx.html'}, {'parent_id': 2, 'child': [{'parent_id': 7, 'child': [], 'caption': '退货', 'id': 8, 'url': '/aaa.html'}, {'parent_id': 7, 'child': [], 'caption': '换货', 'id': 9, 'url': '/bbb.html'}], 'caption': '退换管理', 'id': 7, 'url' : None}], 'caption': '订单管理', 'id': 2, 'url': None}3 {'parent_id': 1, 'child': [], 'caption': '用户列表', 'id': 3, 'url': '/users.html'}4 {'parent_id': 1, 'child': [], 'caption': '添加用户', 'id': 4, 'url': '/add_user.html'}5 {'parent_id': 2, 'child': [], 'caption': '订单列表', 'id': 5, 'url': '/orders.html'}6 {'parent_id': 2, 'child': [], 'caption': '取消订单', 'id': 6, 'url': '/xxxxx.html'}7 {'parent_id': 2, 'child': [{'parent_id': 7, 'child': [], 'caption': '退货', 'id': 8, 'url': '/aaa.html'}, {'parent_id': 7, 'child': [], 'caption': '换货', 'id': 9, 'url': '/bbb.html'}], 'caption': '退换管理', 'id': 7, 'url': None}8 {'parent_id': 7, 'child': [], 'caption': '退货', 'id': 8, 'url': '/aaa.html'}9 {'parent_id': 7, 'child': [], 'caption': '换货', 'id': 9, 'url': '/bbb.html'}"""# 步骤三:清洗数据,获取最终的结果,menu_resultmenu_result = {}for k, v in menu_dict.items():if v['parent_id'] == None:menu_result[k] = v"""1 {'url': None, 'child': [{'url': '/users.html', 'child': [], 'id': 3, 'parent_id': 1, 'caption': '用户列表'}, {'url': '/add_user.html', 'child': [], 'id': 4, 'parent_id': 1, 'caption': '添加用户'}], 'id': 1, 'parent_id': None, 'caption': '用户管理'}2 {'url': None, 'child': [{'url': '/orders.html', 'child': [], 'id': 5, 'parent_id': 2, 'caption': '订单列表'}, {'url': '/xxxxx.html', 'child': [], 'id': 6, 'parent_id': 2, 'caption': '取消订单'}, {'url': None, 'child': [{'url': '/aaa.html', 'child': [], 'id': 8, 'parent_id': 7, 'caption': '退货'}, {'url': '/bbb.html', 'child': [], 'id': 9, 'parent_id': 7, 'caption': '换货'}], 'id': 7, 'parent_id': 2, 'caption': '退换管理'}], 'id': 2, 'parent_id': None, 'caption': '订单管理'}"""# 步骤五:通过build_comment_tree函数在后台形成递归的html页面menu_str = build_menu_tree(menu_result)return render(request, 'index.html', {'menu_str': menu_str})

前端代码：

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.child > a {display: block;}.item .child {margin-left: 30px;}.hide {display: none;}.item{font-family: 楷体;font-weight: 700;font-size: large;}</style>
</head>
<body>
{{ menu_str|safe }}
<script src="{% static  "js/jquery-1.11.3.min.js" %}"></script>
<script>{# 一旦加载页面,就执行里面的函数 #}$(function () {{# 给title标题添加相应的事件 #}$('.title').click(function () {if ($(this).next().hasClass('hide')) {$(this).next().removeClass('hide')} else {$(this).next().addClass('hide')}})})
</script>
</body>
</html>

效果展示：

操作步骤总结：

步骤一：将列表结构转化为字典结构,并给每一个添加上一个child字段
步骤二：最重要的一步,将子菜单添加到父child当中
步骤三：清洗数据,获取最终的结果,menu_result
步骤四：模拟前端菜单,接下来我们要实现菜单的功能
步骤五：通过build_comment_tree函数在后台形成递归的html页面
步骤六：递归终止

递归算法使用总结

1、先假设第二层不存在，只完成第一层的功能；
2、在假设第二层不存在，只完成第三层的功能；
3、依次递归，知道找到递归规律.

多级评论的展示

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.body a{display: block;}.body{margin-left: 30px;}.hide{display: none;}</style>
</head>
<body><h1>分类列表</h1><ul>{% if current_new_type_id %}<li><a href="/">全部</a></li>{% else %}<li><a style="color:green" href="/">全部</a></li>{% endif %}{% for row in new_type_list %}{% if row.id == current_new_type_id %}<li><a style="color:green" href="/all/{{ row.id }}/">{{ row.caption }}</a></li>{% else %}<li><a href="/all/{{ row.id }}/">{{ row.caption }}</a></li>{% endif %}{% endfor %}</ul><h2>新闻列表</h2><div>{% for row in new_list %}<div><div>{{ row.title }}</div><div>{{ row.user.username }}<div class="new-comment" style="display: inline-block;"  new-id="{{ row.id }}">评论：{{ row.comment_count }}</div><div style="display: inline-block;position: relative;">赞：<a class="new-like" new-id="{{ row.id }}">{{ row.like_count }}</a></div></div><div class="comment-area"></div></div><div><div>{{ row.title }}</div><div>{{ row.user.username }}  评论：{{ row.comment_count }}  赞：<a class="new-like" new-id="{{ row.id }}">{{ row.like_count }}</a></div></div><div><div>{{ row.title }}</div><div>{{ row.user.username }}  评论：{{ row.comment_count }}  赞：<a class="new-like" new-id="{{ row.id }}">{{ row.like_count }}</a></div></div>{% endfor %}</div><script src="/static/jquery-3.2.1.js"></script><script>$(function () {bindLikeEvent();bindCommentEvent();});function bindCommentEvent() {$('.new-comment').click(function () {var newId = $(this).attr('new-id');var $this = $(this);$.ajax({url: '/fetch_comment.html',type: "GET",data: {'newId': newId},success:function (arg) {console.log(arg);$this.parent().next().html(arg);}})})}function bindLikeEvent() {$('.new-like').click(function () {// 获取当前新闻IDvar newId = $(this).attr('new-id');var $this = $(this);$.ajax({url: '/do_like.html',type: "POST",data: {'newId': newId},dataType: 'JSON',success:function (arg) {if(arg.status){var origin = $this.text();var count = parseInt(origin);if(arg.code == 666){$this.text(count - 1 );showLikeCount($this,'-1');}else if(arg.code == 999){$this.text(count + 1 );showLikeCount($this,'+1');}}else{alert(arg.msg);}}})})}function showLikeCount($this,text) {var fontSize = 5;var top = 0;var right = 0;var opacity = 1;var tag = document.createElement('span');// var tag = document.getElementById()tag.innerText = text;tag.style.position = "absolute";// 默认大小tag.style.fontSize = fontSize + "px";tag.style.top = top + 'px';tag.style.right = right + 'px';tag.style.opacity = opacity;$this.after(tag);// 定时器，没0.5s执行一次var obj = setInterval(function () {fontSize += 5;top -= 5;right -= 5;opacity -= 0.1;tag.style.fontSize = fontSize + "px";tag.style.top = top + 'px';tag.style.right = right + 'px';tag.style.opacity = opacity;if(opacity <= 0){clearInterval(obj);tag.remove();}},100);}</script>
</body>
</html>

Python引用2（Django系列3）相关推荐

  1. python 创建一个空向量_Python之Django系列-创建第一个应用-5

    上一篇:Python之Django系列-创建第一个应用-4 这一章我们会讲到视图层怎么与数据库操作并返回数据到模板层进行渲染最终显示在页面上 投票应用基本上会有这么几个视图 问题列表页 问题详情页 问 ...

  2. django 默认查询条件_Python之Django系列-创建第一个应用-4

    上一篇:Python之Django系列-创建第一个应用-3 上一篇文章我们介绍了创建项目,打开浏览器访问http://127.0.0.1:8000/polls/,能看见"投票主页视图&quo ...

  3. pythondd_windows7下安装python环境和django

    1.安装python 1.1.首先访问http://www.python.org/download/去下载最新的python版本. 根据计算机位数选择对应的版本 比如我的机器是64位的,我就下载这个安 ...

  4. 【转】python开发大全、系列文章、精品教程

    版权声明:本文为博主原创文章,转载请注明来源.开发合作联系luanpenguestc@sina.com https://blog.csdn.net/luanpeng825485697/article/ ...

  5. python后台架构Django教程——路由映射urls

    全栈工程师开发手册 (作者:栾鹏) 本文衔接至python后台架构Django开发全解. 有其他问题请先阅读:http://blog.csdn.net/luanpeng825485697/articl ...

  6. python后台架构Django教程——templates模板

    全栈工程师开发手册 (作者:栾鹏) 本文衔接至python后台架构Django开发全解. 有其他问题请先阅读:http://blog.csdn.net/luanpeng825485697/articl ...

  7. python后台架构Django教程——数据模型Model

    全栈工程师开发手册 (作者:栾鹏) python教程全解 本文衔接至python后台架构Django开发全解. 有其他问题请先阅读:http://blog.csdn.net/luanpeng82548 ...

  8. python后台架构Django教程——项目配置setting

    全栈工程师开发手册 (作者:栾鹏) 本文衔接至python后台架构Django开发全解. 有其他问题请先阅读:http://blog.csdn.net/luanpeng825485697/articl ...

  9. Django 系列博客（二）

    Django 系列博客(二) 前言 今天博客的内容为使用 Django 完成第一个 Django 页面,并进行一些简单页面的搭建和转跳. 命令行搭建 Django 项目 创建纯净虚拟环境 在上一篇博客 ...

  10. python视频网站项目_价值2400元的python全栈开发系列Flask Python Web 网站编程视频

    2 e/ b4 F1 c' H$ D! X 价值2400元的python全栈开发系列Flask Python Web 网站编程视频-优品课堂' z3 _1 Y7 ]6 j4 z # p# r# g* ...

最新文章

  1. 不会编程也能做这么酷炫的视频风格迁移？这个工具冲上Reddit热榜，还能在线试玩...
  2. SpringBoot中在普通类里面加载Spring容器中的类
  3. 解决Fckeditor删除所有上传页面如何上传
  4. 0025-中点位移的速度
  5. 007_logback配置
  6. 算法----计算机程序设计之魂
  7. linux 的功能,Linux的主要功能
  8. Linux经常使用的命令(十) - nl
  9. 【OpenCV】8邻域种子填充法剔除短连通域的高效算法
  10. 【NLP】 聊聊NLP中的attention机制
  11. mysql frm恢复数据_MYSQL使用.frm恢复数据表结构的实现方法
  12. 半导体公司IC设计环境概况
  13. python实现计算字符串或列表中每个字符出现的次数，并打印出现次数最多的字符
  14. iref streams_如何利用Neo4j Streams并建立即时数据仓库
  15. 002.操作系统的选择
  16. matlab拟合例子,MATLAB数据拟合例子
  17. 高校GIS房地产管理系统
  18. js JavaScript实战练习——小球碰撞反弹(详细)
  19. 深入浅出Spring Boot 2.x——第一章Spring Boot来临
  20. AOE网络-关键路径

热门文章

  1. mysql 日期比较_详解Mysql中日期比较大小的方法
  2. Fliqlo——翻页时钟屏保（最新版本，附有链接）
  3. MacOS QT qmake 与 CMake 设置ICON
  4. 马斯克成全球首富！万字最新访谈披露，信息量极大，远见令人震撼
  5. mysql 远程访问不行解决方法 Host is not allowed to connect to this MySQL server
  6. python 获取文件大小
  7. 不花钱，降低数据中心PUE的八个办法
  8. 不用找，你想要的行业icon图标素材都在这里
  9. 一份特殊的申请书--------纪念我可能会失去的书生意气
  10. 京东css3动画全屏海报_京东全屏CSS3动态海报抖动效果代码生成,海报上透明图片自动上下抖动带动感...