国内优秀设计网站站长,营销型网站建设 案例,wordpress 微信授权,网页游戏网站手机撰写本文档目的是让后续开发者在理解该系统架构的基础上遵循一定规范保持系统架构的合理性#xff1b;同时也能够达到允许没有开发经验仅有web基础的入门开发者能够通过复制粘贴的方式仿照demo示例进行开发的目的。目 录1 案例调研与选取... 21.1 案例调研... 21.…撰写本文档目的是让后续开发者在理解该系统架构的基础上遵循一定规范保持系统架构的合理性同时也能够达到允许没有开发经验仅有web基础的入门开发者能够通过复制粘贴的方式仿照demo示例进行开发的目的。目 录1 案例调研与选取... 21.1 案例调研... 21.2 UI选取... 32 系统实现... 32.1 实现效果... 32.2 开发规范... 63 详细设计... 73.1 框架介绍... 73.2 数据库设计... 83.3 菜单管理... 83.4 权限管理/角色管理... 113.5 权限管理/权限分配... 133.6 权限管理/用户管理... 144 延伸思考... 145 致谢! 146 文档说明... 157 参考文献... 15案例调研与选取案例调研1)easyUI(No1)图片2)easyUI(No2)图片3)Bootstrap图片4)vue/iview图片以上四套UI框架对比分析可以得出如下结论结论easyUI功能完善界面简洁友好非常方便后端开发人员开发是优秀的前端开源框架尤其适合后台管理但是非响应式页面不会随屏幕大小而变化美观方面(仁者见仁)bootstrap是响应式开源框架支持插件广泛界面相对酷炫美观方面(有目共睹)同样也非常适合管理平台的开发至于Vue和其它一些前端人员自己写的UI框架必须要承认Vue是不错的开源框架但是个人感觉对管理平台来说Vue增加了开发人员的学习成本、兼容性、美观等方面的调试成本开发周期偏长至于是否适合管理品台开发就……综上分析对于管理平台开发建议选用easyUI或基于bootstrap搭建好的管理平台本文选择基于bootstrap的管理平台进行说明。UI选取经过调研选取了一套业内好评率较高的UI(ace-master)Ace是一个基于Twitter bootstrap3开发的后台模板。GitHub Ace地址https://github.com/bopoda/aceAce演示http://ace.jeka.by/主体界面如下此框架功能多多详细功能请看演示。系统实现实现效果登录2)首页3)以下是权限管理的具体模块开发规范下图为框架的三个区域其中主面板区域采用为一个div(没有采用iframe设计)每个菜单的内容均会更新主面板区域故在主面板区域内容需要遵循一定的规范建议每个一级菜单在一个包中每个包中的二级菜单均为一个单独的控制器。建议页面也需按同样方式设计。每个页面中的字段必须全局唯一(very import)每个页面中的字段可采用驼峰式也可用下划线式但必须确保每个页面以及下面多级页面中的每个字段名必须不同(即使业务上为同一张表的同一个字段)不可在模态框与主面板区用同一个页面。(如此设计的原因是由于主页面采用div设计故为防止js检测异常)(important)由于主面板区域采用div设计父页面(main.jsp)中已经有了故子页面面不要引入这个js了(也无需引入)否则会引起密码修改的模态框无法弹出如果想要引入的话请修改密码修改的模态框弹出效果。命名规范示例每个页面中字段命名(包括方法名、表单字段、div等元素的id等) 模块名页面名数据库字段名示例userManageListAccountName或者 user_manage_list_account_name这样组成了全局唯一字段防止浏览器缓存导致的页面插件功能异常和表单提交异常等问题详细设计框架介绍1)页面布局页面布局见开发规范中截图三个主要区域。2)功能功能上主要为权限管理和其它的项目相关的开发人员自定义的菜单模块。前后端交互采用ajax技术页面核心的公共区域的交互在 该文件中封装了菜单url调用和菜单效果切花、主面板区域更新的ajax、菜单树的动态加载、解析、拼装等功能。3)权限权限管理中包括用户管理、菜单管理、角色管理、权限分配和密码修改。4)菜单加载用户状态为启用时可登录到系统进入到主板面后根据用户对应角色查找相应的菜单加载到菜单区域从而实现不同角色的用户能够看到不同的菜单权限。5)插件框架中整合的插件主要如下(部分)Bootstrap-table、bootstrap-datetimepicker、jquery.gritter(右上角弹框插件)、bootstrap-treeview、bootstrap-switch、jQuery.ui(确认框)。其中datetimepicker样式似乎并没有想象中的好需要进一步确认原因还是切换其它插件如果对样式要求不高可临时使用但考虑到后续扩展故而建议尽快确认(修复or更换)。数据库设计数据库中权限管理模块设计了用户表、角色表、菜单表、用户角色关联表、角色菜单关联表共计5张表sql代码详见数据库文件。用户表角色表菜单表用户角色关联表角色菜单关联表菜单管理菜单包括主页面菜单区域的菜单也包含“权限管理à菜单管理”中的菜单。1)主页菜单封装菜单表设计见数据库设计。菜单最大设计四级菜单拼装的json格式(下文为大致示例以实际为准)读取库中菜单信息拼接采用何种算法方案一循环遍历多重循环遍历方案二递归此处选择递归原因一是效率高(内存需要或许也高完全可容忍)二是不受限于菜单级别递归核心代码如下(详见源码)/*** 递归查找子菜单* param id* param rootMenu* return*/private List getChilds(Long id, List rootMenu){// 子菜单List childList new ArrayList();Iterator it rootMenu.iterator();while(it.hasNext()) {SysMenu menu it.next();// 遍历所有节点将父菜单id与传过来的id比较if (String.valueOf(menu.getLong(menu_pa_id)).equals(String.valueOf(id))){Map mapcc new HashMap();mapcc.put(id, menu.getLong(id));mapcc.put(menu_name, menu.getStr(menu_name));mapcc.put(menu_url, menu.getStr(menu_url));childList.add(mapcc);it.remove();}}// 把子菜单的子菜单再循环一遍for (Map map : childList) {//递归map.put(childMenus, getChilds(Long.parseLong(map.get(id).toString()), rootMenu));}//递归退出条件if (childList.size() 0) {return null;}return childList;}拼接得到json菜单格式为(如下为二级菜单示例其它详见源码、界面操作){status:200,data:[{id:1,childMenus:null,menu_url:/manage/systemInfo.do,menu_name:系统信息},{id:2,childMenus:[{id:5,childMenus:null,menu_url:/redis/main.do,menu_name:查询redis},{id:6,childMenus:null,menu_url:/redis/writeRdisPage.do,menu_name:写redis}],menu_url:null,menu_name:redis管理},{id:3,childMenus:[{id:7,childMenus:null,menu_url:null,menu_name:榴莲短视频},{id:8,childMenus:null,menu_url:/haohuolab/haohuoPage.do,menu_name:东龙实验室}],menu_url:null,menu_name:东龙实验室},{id:4,childMenus:[{id:9,childMenus:null,menu_url:/system/users/userPages.do,menu_name:用户管理},{id:10,childMenus:null,menu_url:null,menu_name:角色管理},{id:11,childMenus:null,menu_url:null,menu_name:权限分配},{id:12,childMenus:null,menu_url:null,menu_name:菜单管理},{id:13,childMenus:null,menu_url:/manage/updatePwdPages.do,menu_name:密码修改}],menu_url:null,menu_name:权限管理}],msg:success}2)菜单解析上面是拼接菜单代码下面是解析菜单代码解析菜单的时候踩了一个坑就是二级菜单在浏览器端始终无法打开反复调试到晚上十一二点始终不知道什么原因第二天来了之后继续调试最终发现是a标签上缺少了一个属性(classdropdown-toggle)有时可能就是很小的一个问题让你耽误很长很长的时间还弄的自己焦头烂额深感有时阻碍你前进的可能不是那万里征程(搭建整套完善框架)却可能是脚下的一粒沙子。废话少说直接上递归核心代码(实际略有改动详见源码)/*** 递归遍历子树* param list*/function mainPageRecurSubTree(ctx,list){if(nulllist || list || nulllist){return ;}var mainPageRecurSubTreeStr ;mainPageRecurSubTreeStr ;for(var m0;mvar menuSub list[m];mainPageRecurSubTreeStr menuSub.menu_name;if(null!menuSub.childMenus !menuSub.childMenus null!menuSub.childMenus){mainPageRecurSubTreeStr ;}mainPageRecurSubTreeStr mainPageRecurSubTree(ctx,menuSub.childMenus);}mainPageRecurSubTreeStr ;return mainPageRecurSubTreeStr;}3)权限管理/菜单管理菜单插件采用bootstrap-treeview插件开关按钮采用bootstrap-switch插件注意将所需的开关插件放入到main.jsp中开关样式方可正常引用否则如果放到每个功能模块的子页面中会导致插件无法完全加载而导致的样式显示的问题。菜单管理页面中添加根菜单也可添加子菜单选择/修改菜单的上级菜单修改菜单信息等功能。权限管理/角色管理权限管理à角色管理角色管理中的菜单权限修改(修改角色对应的菜单信息)也采用了bootstrap-TreeView插件但是此原生的树菜单没有级联选项故添加级联选择的js核心代码如下//级联选择选中$(#roleManageUpdateRoleMenuAllTreeMes).on(nodeChecked,function(event,node){roleManageUpdateRoleMenuNodeChecked(event, node);;});//级联选择取消选中$(#roleManageUpdateRoleMenuAllTreeMes).on(nodeUnchecked,function(event,node){roleManageUpdateRoleMenuNodeUnchecked(event, node);;});//如下是响应菜单选中和取消选中的操作var roleManageUpdateRoleMenuNodeCheckedSilent false;function roleManageUpdateRoleMenuNodeChecked(event, node){if(roleManageUpdateRoleMenuNodeCheckedSilent){return;}roleManageUpdateRoleMenuNodeCheckedSilent true;roleManageUpdateRoleMenuCheckAllParent(node);roleManageUdpateRoleMenuCheckAllSon(node);roleManageUpdateRoleMenuNodeCheckedSilent false;}var roleManageUpdateRoleMenuNodeUncheckedSilent false;function roleManageUpdateRoleMenuNodeUnchecked(event, node){if(roleManageUpdateRoleMenuNodeUncheckedSilent){return;}roleManageUpdateRoleMenuNodeUncheckedSilent true;roleManageUpdateRoleMenuUncheckAllParent(node);roleManageUpdateRoleMenuUncheckAllSon(node);roleManageUpdateRoleMenuNodeUncheckedSilent false;}//选中全部父节点function roleManageUpdateRoleMenuCheckAllParent(node){$(#roleManageUpdateRoleMenuAllTreeMes).treeview(checkNode,node.nodeId,{silent:true});var parentNode $(#roleManageUpdateRoleMenuAllTreeMes).treeview(getParent,node.nodeId);if(!(nodeId in parentNode)){return;}else{roleManageUpdateRoleMenuCheckAllParent(parentNode);}}//取消全部父节点function roleManageUpdateRoleMenuUncheckAllParent(node){$(#roleManageUpdateRoleMenuAllTreeMes).treeview(uncheckNode,node.nodeId,{silent:true});var siblings $(#roleManageUpdateRoleMenuAllTreeMes).treeview(getSiblings, node.nodeId);var parentNode $(#roleManageUpdateRoleMenuAllTreeMes).treeview(getParent,node.nodeId);if(!(nodeId in parentNode)) {return;}var isAllUnchecked true; //是否全部没选中for(var i in siblings){if(siblings[i].state.checked){isAllUncheckedfalse;break;}}if(isAllUnchecked){roleManageUpdateRoleMenuUncheckAllParent(parentNode);}}//级联选中所有子节点function roleManageUdpateRoleMenuCheckAllSon(node){$(#roleManageUpdateRoleMenuAllTreeMes).treeview(checkNode,node.nodeId,{silent:true});if(node.nodes!nullnode.nodes.length0){for(var i in node.nodes){roleManageUdpateRoleMenuCheckAllSon(node.nodes[i]);}}}//级联取消所有子节点function roleManageUpdateRoleMenuUncheckAllSon(node){$(#roleManageUpdateRoleMenuAllTreeMes).treeview(uncheckNode,node.nodeId,{silent:true});if(node.nodes!nullnode.nodes.length0){for(var i in node.nodes){roleManageUpdateRoleMenuUncheckAllSon(node.nodes[i]);}}}权限管理/权限分配权限管理à权限分配为不同用户分配不同角色。在权限分配è角色分配 页面中使用了一个多选框的插件(用于选择多个角色)如下图在使用中发现这个选择框第一次打开时正常之后再打开始终不正常调试发现是因为select中动态添加了一个div并且这个div的style“width0px”导致select的展示出现问题。试了各种方式网上搜了各种方案均失败。最终万般无奈之下猜想可能是引用的js文件中生成这个内部div时导致宽度获取的问题于是便修改引用的js源码修改如下至此问题解决。问如何知道要修改这个宽度(如何定位到是要修改这个宽度的)答在浏览器中调试时发现在select中生成的div的id是在select的id的基础之上添加了“_chosen”于是搜索“_chosen”发现整个js源码中只有一个“_chosen”于是在此附近寻找width相关的代码终于发现了并尝试修改成功。权限管理/用户管理权限管理à用户管理功能为对能够登录到系统的管理用户的增、查、修改、停用操作。此页面中的table采用bootstrap原生表格增改查的逻辑完全为自己实现。没有使用bootstrap-table插件。本系统设计者建议使用bootstrap-table插件(why? 我也不知道就是感觉成熟开源的业内小有名气的东东一定比自己写的好)插件demo见系统demo示例。此模块中的用户为系统的管理人员。延伸思考Iframe为子页面可不受父页面干扰但是究竟用还是不用好有待深思的问题bootstrap-switch boostrap的开关按钮插件并未能初始化开或者关状态此功能关乎开关的美观需探究如何修改或选用其它插件待进一步深思。3)系统待优化之处权限访问控制该如何优化(内存redis)Mybatis整合严格的mvc设计模式致谢!初级入门泽宇、老申、昊总问题修复金凤问题修复系统参与的全体java同仁开发者战神彭玉ylz东龙零碎不重要的整理工作(高大上的名字秘书)本人。向以上四位开发者致敬!文档说明本文档由四位开发者在开发过程中心得记录由秘书整理汇总而成。最终解释权归四位开发者所有。参考文献https://blog.csdn.net/weixin_41981080/article/details/81912941文末福利想要与大家一起交流可进企鹅群589847567群共享文件中有源码下载。说明该系统由以上四位开发者在工作之余抽时间分工开发完成因工作较忙时间有限等原因系统中难免有瑕疵不足之处需进一步完善望大家谅解在后续版本中我们会不断完善。同时诚邀大才雄心的有志之士加入我们共同开发。
