CBoard框架使用总结五--扩展菜单配置功能
2017-08-04 17:36
549 查看
文章内容
1.数据表定义2.后端调整
3.前端调整
4.功能使用方式
5.实现管理界面
6.总结
1.数据表定义
由于Cboard原生的菜单项配置在Java代码中,通过static代码块初始化,要实现菜单配置功能,需要建立相关的数据库表来存储菜单信息;1.1.dashboard_menu数据表定义(MySQL)
仅做参考字段名 | 类型 | 字段含义 | 备注 |
---|---|---|---|
menu_id | bigint | 菜单ID | |
parent_id | bigint | 父菜单ID | |
menu_code | varchar | 菜单代码 | |
menu_name_code | varchar | 菜单名称代码 | 对应语言文件代码 |
menu_description | varchar | 功能描述 | |
order_number | int | 菜单序号 | 用于菜单排序 |
menu_icon | varchar | 菜单图标 | 存储图标样式 |
menu_category | varchar | 菜单分组 | |
layout_json | text | 菜单样式扩展字段 | 预留字段 |
2.将原菜单数据导入到数据库中
原生的菜单数据保存在MenuService(org/cboard/services/MenuService.java)中:其中参数依次含义为:菜单ID,父菜单ID,菜单名称代码,菜单代码
menuList.add(new DashboardMenu(1, -1, "SIDEBAR.CONFIG", "config")); menuList.add(new DashboardMenu(2, 1, "SIDEBAR.DATA_SOURCE", "config.datasource")); menuList.add(new DashboardMenu(3, 1, "SIDEBAR.CUBE", "config.dataset")); menuList.add(new DashboardMenu(4, 1, "SIDEBAR.WIDGET", "config.widget")); menuList.add(new DashboardMenu(5, 1, "SIDEBAR.DASHBOARD", "config.board")); menuList.add(new DashboardMenu(6, 1, "SIDEBAR.DASHBOARD_CATEGORY", "config.category")); menuList.add(new DashboardMenu(7, -1, "SIDEBAR.ADMIN", "admin")); menuList.add(new DashboardMenu(8, 7, "SIDEBAR.USER_ADMIN", "admin.user")); menuList.add(new DashboardMenu(9, 1, "SIDEBAR.JOB", "config.job")); menuList.add(new DashboardMenu(10, 1, "SIDEBAR.SHARE_RESOURCE", "config.role")); menuList.add(new DashboardMenu(11, -1, "SIDEBAR.EXTEND", "extend")); menuList.add(new DashboardMenu(12, 11, "SIDEBAR.EXTEND_FUNCTION_1", "extend.function_1"));
2.后端调整
要完成后台代码的调整,以完成对应的菜单配置功能,需要以下几个步骤:使用mybatis-generator自动生成对应的mapper、Dao、po代码;
在Dao层定义getAll/update/delete等可能用到的接口;
更具Dao层的定义,依次实现Service和Controller;
测试返回的数据;
2.1.使用mybatis-generator自动生成Mybatis相关代码
关于自动生成Mybatis相关的代码,网上资料很多,可以参考以下这篇文章,作者提供了工具的下载链接:SSM框架——使用MyBatis Generator自动创建代码 @shu_lin
这里给出我的generatorConfig.xml的配置:
<!-- 生成模型的包名和位置--> <javaModelGenerator targetPackage="org.cboard.pojo" targetProject="CBoard"> <property name="enableSubPackages" value="true"/> <property name="trimStrings" value="true"/> </javaModelGenerator> <!-- 生成映射文件的包名和位置--> <sqlMapGenerator targetPackage="mapping" targetProject="CBoard"> <property name="enableSubPackages" value="true"/> </sqlMapGenerator> <!-- 生成DAO的包名和位置--> <javaClientGenerator type="XMLMAPPER" targetPackage="org.cboard.dao" targetProject="CBoard"> <property name="enableSubPackages" value="true"/> </javaClientGenerator> <!-- 要生成的表 tableName是数据库中的表名或视图名 domainObjectName是实体类名--> <table tableName="dashboard_menu" domainObjectName="DashboardMenu" enableCountByExample="false" enableUpdateByExample="false" enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false"></table> <table tableName="dashboard_lov" domainObjectName="DashboardLov" enableCountByExample="false" enableUpdateByExample="false" enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false"></table>
根据generatorConfig.xml中设置的包名将对应的文件考入到项目中,对于已存在的文件,通过追加的方式,以免影响框架正常功能;
2.2.增加到层接口定义,实现增删改查
Dao层接口定义:List<Long> getMenuIdByUserRole(String userId); List<Long> getMenuIdByRoleAdmin(String userId); List<DashboardMenu> getAllMenuList(); int deleteByPrimaryKey(Long menuId); int insert(DashboardMenu record); int insertSelective(DashboardMenu record); DashboardMenu selectByPrimaryKey(Long menuId);
mapper映射文件定义:
<select id="selectByPrimaryKey" resultMap="ResultMapWithBLOBs" parameterType="java.lang.Long" > select <include refid="Base_Column_List" /> , <include refid="Blob_Column_List" /> from dashboard_menu where menu_id = #{menuId,jdbcType=BIGINT} </select> <delete id="deleteByPrimaryKey" parameterType="java.lang.Long" > delete from dashboard_menu where menu_id = #{menuId,jdbcType=BIGINT} </delete> <insert id="insert" parameterType="org.cboard.pojo.DashboardMenu" > insert into dashboard_menu (menu_id, parent_id, menu_code, menu_name_code, order_number, menu_description, menu_icon, menu_category, layout_json ) values (#{menuId,jdbcType=BIGINT}, #{parentId,jdbcType=BIGINT}, #{menuCode,jdbcType=VARCHAR}, #{menuNameCode,jdbcType=VARCHAR}, #{orderNumber,jdbcType=INTEGER}, #{menuDescription,jdbcType=VARCHAR}, #{menuIcon,jdbcType=VARCHAR}, #{menuCategory,jdbcType=VARCHAR}, #{layoutJson,jdbcType=LONGVARCHAR} ) </insert> <select id="getAllMenuList" resultType="org.cboard.pojo.DashboardMenu"> SELECT menu_id AS menuId, parent_id AS parentId, menu_code AS menuCode, menu_name_code AS menuNameCode, menu_icon AS menuIcon FROM dashboard_menu ORDER BY order_number </select> </insert>
2.3.增加Controller和Service实现
主要是在org.cboard.controller.AdminController和org.cboard.services.MenuService中增加对应的增删改查操作;由于,前端需要按结构层次显示菜单这里,在Service中增加了resolveMenuLevel方法,用于将数据库获取的Menu数组按层次结构输出;
//递归组织菜单层次关系 仅做参考 private void resolveMenuLevel(JSONArray menus,List<DashboardMenu> menuList,long parentId){ for(int i=0; i<menuList.size(); i++){ DashboardMenu item = menuList.get(i); if(item.getParentId() == parentId ){ JSONObject obj = new JSONObject(); obj.put("menuId", item.getMenuId()); obj.put("parentId", item.getParentId()); obj.put("menuCode", item.getMenuCode()); obj.put("menuNameCode", item.getMenuNameCode()); obj.put("menuIcon", item.getMenuIcon()); JSONArray subMenus = new JSONArray(); resolveMenuLevel(subMenus,menuList,item.getMenuId()); obj.put("subMenus", subMenus); menus.add(obj); } } }
2.4.返回数据测试
可以通过Postman测试返回的数据格式是否正确:3.前端调整
前端的调整主要是对侧栏(SIDEBAR)模板进行简单调整:修改AngularJS控制器:主要修改URL地址
文件:org/cboard/controller/cboard/cBoardCtrl.js(作用域为曾哥页面的控制器)
var getMenuList = function () { $http.get("/*URL地址*/").success(function (response) { $scope.menuList = response; }); };
文件:webapp/starter/main-sidebar.html,在”.sidebar-menu”去掉原来的配置(建议保留面板列表的菜单项),并增加以下代码:
<!-- 自定义菜单 --> <li class="treeview" ng-repeat="m in menuList" ui-sref-active="active" > <a> <i ng-class="m.menuIcon"></i> <span>{{m.menuNameCode|translate}}</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> <ul class="treeview-menu"> <li ui-sref-active="active" ng-repeat="sub in m.subMenus"> <a ui-sref="{{sub.menuCode}}"><i ng-class="sub.menuIcon"></i>{{sub.menuNameCode|translate}}</a> </li> </ul> </a> </li>
4.功能使用方式
完成以上步骤,菜单数据的来源就来自于数据库,这里我们通过直接修改数据库的方式,直接增加一个“菜单管理”的功能;4.1.在数据库中增加数据项
INSERT INTO `cboard`.`dashboard_menu` (`menu_id`, `parent_id`, `menu_code`, `menu_name_code`, `menu_description`, `order_number`, `menu_icon`, `menu_category`, `layout_json`) VALUES ('11', '-1', 'extend', 'SIDEBAR.EXTEND', NULL, '0', 'fa fa-cog', '', ''); INSERT INTO `cboard`.`dashboard_menu` (`menu_id`, `parent_id`, `menu_code`, `menu_name_code`, `menu_description`, `order_number`, `menu_icon`, `menu_category`, `layout_json`) VALUES ('12', '11', 'extend.menu_manage', 'SIDEBAR.EXTEND_MENU_MANAGE', NULL, '0', 'fa fa-fw fa-user', '', '');
4.2.增加名称字符串
Cboard的多语言支持通过AngularJS-translate来实现,增加菜单名称编码对应的字符串;文件:webapp/i18n/cn/cboard.json、webapp/i18n/en/cboard.json
"SIDEBAR": { "EXTEND": "扩展功能", "EXTEND_MENU_MANAGE":"菜单管理", },
4.2.创建对应的View和Controller文件
view文件: webapp/org/cboard/view/extend/menuManage.htmlcontroller文件:webapp/org/cboard/controller/extend/menuManageCtrl.js
具体内容可参考同目录下其他文件;
引入Controller:
在webapp/starter.html中引入Controller所在的js文件:
<script src="org/cboard/controller/extend/menuManageCtrl.js"></script>
添加路由规则
文件:webapp/org/cboard/ng-config.js
.state('extend', { url: '/extend', abstract: true, template: '<div ui-view></div>' }) .state('extend.menu_manage', { url: '/menuManage', templateUrl: 'org/cboard/view/extend/menuManage.html', controller: 'menuManageCtrl' })
这样,就完成了“菜单管理”菜单项的添加;
5.实现菜单管理界面
要完成对菜单的配置功能,此时只需要实现相应的修改界面;这里实现起来就比较灵活,只要能够在前端调用后台增删改查的接口,完成菜单编辑;可以参考以下结合bootstrap-table与x-editable实现的表格编辑功能:
JS组件系列——BootstrapTable 行内编辑解决方案:x-editable @懒得安分
实现效果:
6.总结
1.在扩展的过程中,尽量保证不影响原有功能;2.要实现菜单配置功能只要是增加Dao层实现,并对界面进行简单调整;
3.进过调整后,后期的扩展开发相对也就清晰很多:
在菜单管理中增加新菜单项–>增加语言文件–>增加view和controller文件–>增加AngularJS路由规则–>在view和controller实现业务逻辑
相关文章推荐
- CBoard框架使用总结二--扩展新的功能模块
- 基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据
- ThinkPHP框架总结之配置及使用
- 使用StructureMap扩展ASP.NET MVC三层结构框架系列文章总结篇(附源码下载)
- (转)基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据
- 基于MVC+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据
- CBoard框架使用总结五--角色权限控制
- 使用 zTree 右键菜单功能的总结
- 在Yii框架中使用PHPExcel扩展从数据库导出excel文件功能的实现
- CBoard框架使用总结七--添加首页图表
- FCKeditor是使用非常广泛的HTML编辑器,本文从 ASP.NET 的使用场景对 FCKeditor 与 FCKeditor.NET 的配置、功能扩展(如自定义文件上传子目录、自定义文件名、上传图片的后期处理等)、以及安全性进行初步的阐述。
- yii框架中使用php(xampp)的mongodb扩展和应用总结
- CBoard框架使用总结一
- CBoard框架使用总结三--AdminLTE可扩展性分析
- 配置yii框架环境和bootstrap扩展,使用代码生成器。
- 扩展:Springboot+Thymeleaf+layui框架的配置与使用
- 基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据
- 集合框架_集合的特点和数据结构、如何选择使用哪种集合呢、各种集合常见功能和遍历方式总结
- mongodb 在yii2 框架中的使用(本人在框架中做了功能扩展,非非官方下载的yii2的操作)
- 使用StructureMap扩展ASP.NET MVC三层结构框架系列文章总结篇(附源码下载)