美文网首页
动态生成一级菜单

动态生成一级菜单

作者: 鬼泣_89b6 | 来源:发表于2019-03-21 08:38 被阅读0次

在 rbac 的基础上继续

权限-路由
我们可以人为的认为 /customer/list 可以作为一个菜单,但是机器不知道,所以我们要告诉机器,这个路由可以做菜单

流程

  1. 告诉机器那些路由可以作为菜单
    1. 修改表结构
  2. 将这些可以作为菜单的路由,单独储存起来
    1. 将菜单信息储存到 session 中
  3. 获取菜单信息并展示

实践

修改表结构

在 rbac 的表结构上给 权限表添加两个字段


添加的两个字段

重点: 储存给 session 的结构

用户登录时要做两件事:

  1. 储存 权限列表
  2. 储存 菜单列表
获取权限/菜单信息
ret = obj.roles.filter(permissions__url__isnull=False).values( xxx ).distinct()

# 权限列表
permission_list = []
# 菜单列表
menu_list = []
for i in ret:
    # 仅记录 权限路由,标题....就不记录了
    permission_list.append({'url':i['permission__url']})
    if i['is_menu']:
        menu_list.append(
            {
                'url':i['permission__url'],
                'title':i['permission__title'],
                'icon':i['permission__icon'],
            }
        )

request.session['储存在settings中的常量'] = permission_list
request.session['储存在settings中的常量'] = menu_list

还是利用 inclusion_tag 返回自定义HTML片段

补充:

选中菜单的状态


加 active 类 就可以选中

这有两种方法:

  1. 前端做

用 JS 代码 location.href 可以获取当前路由,
随后进行循环匹配,匹配成功后加类 active
缺点: 有延迟,循环也需要时间

  1. 后端做
    因为我们是用 inclusion_tag 返回的自定义HTML代码片段,
    所以我们可以在返回代码之前进行匹配
    方法
    返回的HTML代码片段

相关文章

  • 动态生成一级菜单

    在 rbac 的基础上继续 流程 告诉机器那些路由可以作为菜单修改表结构 将这些可以作为菜单的路由,单独储存起来将...

  • 如何在DOM元素加载完毕后执行js代码以及DOM加载过程

    最近在写一个动态菜单。即,根据用户角色权限生成菜单选项。动态菜单采用js进行html代码拼接,再append到相应...

  • el-table 多级表头,动态生成

    一、一级表头,根据数据动态生成,二级固定 1、结构 2、数据 一、一级表头和二级表头,根据数据动态生成 1、结构 ...

  • WPF常用小技巧

    菜单项部分绑定 有时需要动态生成菜单,但是同一个菜单中不仅仅包含动态项,而且包含固定项。这个时候就不能对菜单的It...

  • Vue 后台管理项目8-侧边菜单的实现

    侧边菜单的实现 1.饿了吗NavMenu 导航菜单: 2.根据接口动态生成权限菜单 Ⅰ.关于权限: 后台会告诉你帐...

  • C/C++ 动态库的生成

    1. Windows下生成及使用动态库 1.1 使用__declspec生成dll 在菜单栏上,选择“文件”>“新...

  • django项目--菜单管理

    后台菜单管理功能 一、业务功能分析 1. 业务需求分析 后台首页菜单根据用户权限动态生成,不同菜单对应不同的功能视...

  • VC动态生成菜单菜单响应及加速键的使用

    VC动态生成菜单菜单响应及加速键的使用 一、使用环境 本文讲解的使用环境为MFC 的Visual Studio...

  • PHP - TP5常用自定义函数

    替换手机号码中间四位数字 子孙树 用于菜单整理 (一级) 子孙树 用于菜单整理(多级) 整理菜单树方法 生成订单编...

  • 2018-04-19

    利用js将ajax获取到的后台数据动态加载至网页中 动态生成二级菜单树: jQuery(function($) {...

网友评论

      本文标题:动态生成一级菜单

      本文链接:https://www.haomeiwen.com/subject/eghxvqtx.html