之前做了一个前后端不分离的菜单可配置，现在老大又让我把另外一个项目的也给做成菜单可配置，这个项目是前后端分离的，而且前端是layui写的，所以用layui写的，现在记录一下
前端(原理也是迭代)：

 <!-- 侧边菜单 --><div class="layui-side layui-side-menu"><div class="layui-side-scroll"><script type="text/html" template lay-url="/system/api/menu"lay-done="layui.element.render('nav', 'layadmin-system-side-menu');" id="TPL_layout"><div class="layui-logo" lay-href=""><span><img src="https://labs.wd.dolphin-labs.com/common/static/images/logo00.png" width="30"/>&nbsp;{{ layui.setter.name }}</span></div><ul class="layui-nav layui-nav-tree layui-nav-normal" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">{{# var path =  layui.router().path,pathURL = layui.admin.correctRouter(path.join('/')),dataName = layui.setter.response.dataName;layui.each(d[dataName], function(index, item){ var hasChildren = typeof item.list === 'object' && item.list.length > 0,classSelected = function(){var match = path[0] == item.name || (index == 0 && !path[0]) || (item.jump && pathURL == layui.admin.correctRouter(item.jump)) || item.spread;if(match){return hasChildren ? 'layui-nav-itemed' : 'layui-this';}return '';},url = (item.jump && typeof item.jump === 'string') ? item.jump : item.name;}}<li data-name="{{ item.name || '' }}" data-jump="{{ item.jump || '' }}" class="layui-nav-item {{ classSelected() }}"><a href="javascript:;" {{ hasChildren ? '' : 'lay-href="'+ url +'"' }} lay-tips="{{ item.title }}" lay-direction="2"><i class="layui-icon {{ item.icon }}"></i><cite>{{ item.title }}</cite></a>{{# if(hasChildren){ }}<dl class="layui-nav-child">{{# layui.each(item.list, function(index2, item2){ var hasChildren2 = typeof item2.list == 'object' && item2.list.length > 0,classSelected2 = function(){var match = (path[0] == item.name && path[1] == item2.name) || (item2.jump && pathURL == layui.admin.correctRouter(item2.jump)) || item2.spread;if(match){return hasChildren2 ? 'layui-nav-itemed' : 'layui-this';}return '';},url2 = (item2.jump && typeof item2.jump === 'string') ? item2.jump : [item.name, item2.name, ''].join('/');}}<dd  data-name="{{ item2.name || '' }}"  data-jump="{{ item2.jump || '' }}" {{ classSelected2() ? ('class="'+ classSelected2() +'"') : '' }}><a href="javascript:;" {{ hasChildren2 ? '' : 'lay-href="'+ url2 +'"' }}>{{ item2.title }}</a>{{# if(hasChildren2){ }}<dl class="layui-nav-child">{{# layui.each(item2.list, function(index3, item3){ var match = (path[0] == item.name && path[1] == item2.name && path[2] == item3.name) || (item3.jump && pathURL == layui.admin.correctRouter(item3.jump)),url3 = (item3.jump && typeof item3.jump === 'string') ? item3.jump : [item.name, item2.name, item3.name].join('/')}}<dd data-name="{{ item3.name || '' }}"  data-jump="{{ item3.jump || '' }}" {{ match ? 'class="layui-this"' : '' }}><a href="javascript:;" lay-href="{{ url3 }}" {{ item3.iframe ? 'lay-iframe="true"' : '' }}>{{ item3.title }}</a></dd>{{# }); }}</dl>{{# } }}</dd>{{# }); }}</dl>{{# } }}</li>{{# }); }}</ul></script></div></div>

后端代码：

class UserMenuAPI(GenericAPIView):"""页面左侧菜单可配置"""permission_classes = (IsAdmin,)def get(self, request, *args, **kwargs):data = CONFIGURABLE_MENUreturn Response(data=data)

菜单配置(可以从数据库中查询，只要查询出来格式对就可以)：

# 页面左侧可配置菜单数据
CONFIGURABLE_MENU = {"code": 0,"msg": "","data": [{"name": "overview","title": "实时概览","icon": "layui-icon-app","list": [{"name": "resources_consumption","title": "资源消耗","jump": "overview/resources_consumption"},]},# {#     "name": "manage_center",#     "title": "账号设置",#     "icon": "layui-icon-app",#     "jump": "user/info"## },{"name": "cp","title": "计算资源管理","icon": "layui-icon-app","list": [{"name": "cp_info","title": "主机信息","jump": "server/server_info"},{"name": "add_host","title": "添加主机","jump": "server/user_add_host"},{"name": "data_storage","title": "用户存储","jump": "server/data_storage"},# {#     "name": "data_backups",#     "title": "数据备份",#     "jump": "server/user_data_backups"# }]},{"name": "users","title": "用户管理","icon": "layui-icon-app","list": [{"name": "student_list","title": "学生账号","jump": "user_manage/student_list"},{"name": "teacher_list","title": "老师账号","jump": "user_manage/teacher_list"}]},{"name": "content","title": "内容管理","icon": "layui-icon-app","list": [{"name": "course_list","title": "课程列表","jump": "course/list"},{"name": "lab_list","title": "实验列表","jump": "lab/list"},]},# {#     "name": "courses",#     "title": "课程管理",#     "icon": "layui-icon-app",#     "list": [#         {#             "name": "course_list",#             "title": "课程列表",#             "jump": "course/list"#         },#         {#             "name": "course_sync",#             "title": "课程同步",#             "jump": "course/sync",##         }##     ]# },# {#     "name": "labs",#     "title": "实验管理",#     "icon": "layui-icon-app",#     "list": [#         {#             "name": "lab_list",#             "title": "实验列表",#             "jump": "lab/list"#         },#         {#             "name": "lab_sync",#             "title": "实验同步",#             "jump": "lab/sync"#         }##     ]# },{"name": "data_record","title": "帮助中心","icon": "layui-icon-app","list": [{"name": "student","title": "帮助说明","jump": "data_package/help_center"}]},# {#     "name": "os_settings",#     "title": "系统配置",#     "icon": "layui-icon-app",#     "list": [#         {#             "name": "activate_status",#             "title": "激活服务",#             "jump": "system_set/activate_code"#         },#         {#             "name": "data_setting",#             "title": "参数配置",#             "jump": "system_set/system"#         },#         {#             "name": "basics_data",#             "title": "基础参数",#             "jump": "system_set/basics"#         }#     ]## },{"name": "os_settings","title": "系统告警","icon": "layui-icon-app","jump": "message/index"}]
}```python

url:```python
path('api/menu', UserMenuAPI.as_view(), name='user_auth_api'),