左側菜單欄的二級標簽設計

一 、后台管理系統中的左側菜單欄設計

　　設計理念：通過Django中的自定義標簽設計 ，可以實現一級菜單，例如home的主頁。可以實現二級菜單，例如客戶列表中包含：公有客戶信息菜單+私有客戶信息菜單

　　1.1 設計數據結構：

# 數據結構：init_perssion初始化文件，在登錄成功后在數據結構設計
        
# 菜單字典數據類型

# 存放菜單信息
　　menu_dict = {}

　　for item in permission_query:  # 這里permission_query是個字典數據類型

        if item["menu_id"]:
            if item["menu_id"] in menu_dict:
                menu_dict[item["menu_id"]]["children"].append({
                    "menu_id": item.get("menu_id", None),
                    "title": item.get("title"),  # 面包屑
                    "url": item.get("url"),
                    "pk": item["pk"]
                })
            else:
                menu_dict[item["menu_id"]] = {
                    "title": item["menu__title"],
                    "icon": item["menu__icon"],
                    "masterurl": item.get("menu__masterurl", None),
                    "children": [{
                        "menu_id": item.get("menu_id", None),
                        "title": item.get("title", None),
                        "url": item.get("url", None),
                        "pk": item["pk"]
                    }]

                }


# 把設計的數據結構存放在session的

# 將菜單信息寫入到session
request.session[settings.MENU_SESSION_KEY] = menu_dict

　　1.2 自定表標簽：inclusion_tag使用

　　注意：1.在項目中創建一個templatetags文件夾，在里面在創建一個py文件用於標簽的設計

# rbac.py文件

from django import template

# 創建一個注冊器
register = template.Library()

from django.conf import settings# 返回menu_list到rbac/menu.html進行渲染標簽
@register.inclusion_tag('rbac/menu.html')
def menu(request):
    # 獲取session中的字典數據
    menu_dict = request.session.get(settings.MENU_SESSION_KEY)
    for key, item in menu_dict.items():
        # 這里item這個每個字典中增加一個鍵值對，如果當前二級菜單有其他操作，不能關閉當前二級展開的標簽
        item["class"] = ""

        # url = item['url']
        # if re.match('^{}$'.format(url), request.path_info):
        # 二級標簽中列表中存放多個字典，每個字典則為一個二級標簽
        for child in item["children"]:
            # 每個二級標簽中其他操作附屬於當前二級標簽，則權限表中的當前字段的pid等於二級標簽操作的pk值
            if request.show_id == child["pk"]:
                # 點擊當前標簽或者二級標簽的操作時，菜單欄則不關閉，active：bootstrap自定義屬性
                item['class'] = 'active'
                child["class"] = "active"
                break
    # 返回到inclusion_tag指定的模板中渲染
    return {"menu_dict": menu_dict}

　　1.3 在inclusion_tag中指定模板渲染：

# menu.html文件

{% for menu in menu_dict.values %}

    {% if menu.masterurl %}
        <li>
            <a href="{{ menu.masterurl }}">
                <i class="fa {{ menu.icon }}"></i>
                <span>{{ menu.title }}</span>
            </a>
        </li>

    {% else %}
        <li class="treeview {{ menu.class }}">

        <a href="" class="">
            <i class="fa {{ menu.icon }}"></i>
            <span>{{ menu.title }}</span>
            <span class="pull-right-container">
                    <span class="fa fa-angle-left pull-right"></span>
                </span>
        </a>

    {% endif %}

{# 二級標簽 #}
<ul class="treeview-menu">
    {% for child_menu in menu.children %}
        {% if child_menu.menu_id != 1 %}
            <li class="">
                <a href="{{ child_menu.url }}">
                    <i class="fa fa-circle-o"></i> {{ child_menu.title }}
                </a>
            </li>
        {% endif %}
    {% endfor %}
</ul>

</li>

{% endfor %}

　　1.4 自定義標簽在模板文件中引用：

# base.html文件


{% load 'rbac' %}
{% menu request %}

　　1.5 數據庫的圖例

　　1.菜單Menu表圖例：

　　

　　2.權限Permission表圖例