旨在分享，整理的相对比较简单
基于AdminLTE的企业应用开发平台，封装和集成多种组件，提供前端、后端整体解决方案，使得运维WEB开发更简单
背景需求：
当前做的系统是运维自动化平台，要做到多租户的权限隔离，直白的说如果张三具有A,B,C三个功能，李四具备B,C,D功能权限，当用户张三登录时看不到D的功能菜单，当用户李四登录时，看不多A功能菜单，当前思路是用户到组，组到权限
前端页面:直接将AdminLte下的starter.html进行修改即可，下面标注几个更改的地方
-
aside 标签
<aside>
<!-- sidebar: style can be found insidebar.less -->
<section>
<ul> 功能菜单列表
</ul>
</section>
</aside>
-
JS代码，从db中获取数据，对sidebar做数据追加操作
<script>
$.ajax({
type:'POST',
async:false,
url:'testing',
success:function(data){
var $li,$menu_f_ul;
data=$.parseJSON(data);
$.each(data,function(index,item){
if(item.levelCode.length==6){
$li=$('<liclass="treeview"></li>');
var $menu_f=$('<ahref="#">\n'+
'<iclass="'+item.icon+'"></i><span>'+item.name+'</span>\n'+
' <spanclass="pull-right-container">\n'+
'<i class="fafa-angle-left pull-right"></i>\n'+
'</span></a>');
$li.append($menu_f);
$menu_f_ul=$('<ulclass="treeview-menu"></ul>');
$li.append($menu_f_ul);
$("ul.sidebar-menu").append($li);
}
else if(item.levelCode.length==12){
$menu_s=$('<li><ahref="#" data-url="'+item.url+'"><iclass="'+item.icon+'"></i>'+item.name+'</a></li>');
$menu_f_ul.append($menu_s);
}
});
}
});
$(function(){
//首页默认加载,通过增加active类，对每个父附录进行展开
$("a[data-url]").click(function(evt){
loadPage($(this).data("url"));
$("ul.treeview-menu li").removeClass("active");
$(this).parent().addClass("active");
});
});
</script>
数据格式为：
[{"levelCode":"000001", "url": "", "id":"4028818a567745ec0156786cd39e000b", "name": "我的待办","icon": "fa fa-calendar-check-o"}, {"levelCode":"000001000001", "url": "TEST", "id":"402881f25681c52a015681d472ba0000", "name":"TEST", "icon": "fa fa-bicycle"},{"levelCode": "000002", "url": "","id": "402880eb56875b7f0156876338100000", "name":"CURD DEMO", "icon": "fa fa-table"},{"levelCode": "000002000001", "url":"/user/list", "id":"402880eb56875b7f01568763ac630001", "name": "用户列表-Dailog","icon": "fa fa-user"}, {"levelCode":"000002000002", "url": "/user/tab/list","id": "40288182579e398f0157a25ca29a0002", "name":"用户列表-Tab", "icon": "fa fa-male"},{"levelCode": "000002000003", "url":"/user/page/list", "id":"8a8a801b58ce0f500158ce14d2c20000", "name": "用户列表-Page","icon": "fa fa-user"}, {"levelCode":"000004", "url": "", "id":"ff80808159ea142c0159ea670fae0000", "name": "组件使用说明","icon": "fa fa-server"}, {"levelCode":"000004000001", "url": "/markdown/preview/modal","id": "ff80808159ea142c0159ea68d1e30001", "name":"窗体-modals", "icon": "fa fa-windows"},{"levelCode": "000004000002", "url":"/markdown/preview/form", "id":"402880e95a72d8a4015a738980e30000", "name": "表单-form","icon": "fa fa-edit"}, {"levelCode":"000004000003", "url": "/markdown/preview/file","id": "402880ea5aae3edf015ab1b0ec9d0017", "name":"附件上传-file", "icon": "fa fa-file-o"},{"levelCode": "000028", "url": "","id": "402880eb58d9a6d40158d9a7b21f0000", "name":"系统工具", "icon": "fa fa-wrench"},{"levelCode": "000028000001", "url":"/markdown/list", "id":"402880e958eb83230158eb85a30f0000", "name": "我的文章","icon": "fa fa-edit"}, {"levelCode":"000028000002", "url": "/markdown/edit","id": "402880eb58d9a6d40158d9a995130001", "name":"Markdown编辑器", "icon": "fa fa-pencil"},{"levelCode": "000028000003", "url":"/generator/setting", "id":"8a8a81425a1b36e9015a1b42074b0000", "name": "代码生成器","icon": "fa fa-list"}, {"levelCode":"000028000004", "url": "/generator/list","id": "8a8a81d65a3598d9015a360092e60000", "name":"代码生成器测试", "icon": "fa fa-edit"},{"levelCode": "000028000005", "url":"/job/list", "id":"402880e95a72d8a4015a738bb1990001", "name": "任务管理器","icon": "fa fa-calendar-check-o"}, {"levelCode":"000028000006", "url": "/message/list","id": "8a8a83295a83a81a015a843e397b0000", "name":"消息管理器", "icon": "fa fa-list"},{"levelCode": "000030", "url": "","id": "4028818a56d407950156d41352630000", "name":"系统管理", "icon": "fa fa-tv"},{"levelCode": "000030000001", "url":"/user/page/list", "id":"4028818a56d407950156d41435830001", "name": "用户管理","icon": "fa fa-user"}, {"levelCode":"000030000002", "url": "/dict/tree","id": "4028818a56d407950156d4160e390002", "name":"字典管理", "icon": "fa fa-book"}, {"levelCode":"000030000003", "url": "/function/tree","id": "4028818a56d407950156d41d32ab0003", "name":"功能管理", "icon": "fa fa-cog"},{"levelCode": "000030000004", "url":"/role/list", "id":"4028818a56d407950156d4ecfafa0004", "name": "角色管理","icon": "fa fa-street-view"}, {"levelCode":"000030000005", "url": "/rolefunc/list","id": "8a8a807a59634b2801596364e33d0001", "name":"角色授权", "icon": "fa fa-key"}]
前端页面效果图：
|
1
|
|
首页的代码下载、view.py及DB sql请查看github:
https://github.com/caibird1990/platform
沟通方式：caibird2014@gmail.com
数据参考：http://www.admineap.com/
本文转自天真花语 51CTO博客，原文链接：http://blog.51cto.com/caibird/1956741，如需转载请自行联系原作者
