CBoard框架使用总结二--扩展新的功能模块

文章内容

1.添加新的菜单项

2.完成后台处理逻辑

3.整体流程

1.添加新的菜单项

1.1.提供菜单数据

基础的CBoard框架菜单项需要在代码里面(Service层)配置，由于是以list形式存储，有必要的时候也能够通过数据库实现；

/*org.cboard.services.MenuService */
public class MenuService {
private static List<DashboardMenu> menuList = new ArrayList<>();

static {
menuList.add(new DashboardMenu(1, -1, "SIDEBAR.CONFIG", "config"));
menuList.add(new DashboardMenu(11, -1, "SIDEBAR.EXTEND", "extend"));
menuList.add(new DashboardMenu(12, 11, "SIDEBAR.EXTEND_FUNCTION_1", "extend.function_1"));
}

public List<DashboardMenu> getMenuList() {
return menuList;
}

}

配置参数：

menuList.add(new DashboardMenu(long menuId, long parentId, String menuName, String menuCode))；

参数	含义	备注
menuId	菜单ID
parentId	父菜单项ID
menuName	菜单名称	对应语言配置文件的标识串
menuCode	菜单编码	唯一标识串

1.2.返回菜单数据

通过公用的Controller返回数据，有前端代码调用获取数据；

@RequestMapping(value = "/getMenuList")
public List<DashboardMenu> getMenuList() {
return menuService.getMenuList();
}

1.3.前端处理数据，并展示在界面上

在AngularJS的Controller层，我们发现cBoardCtrl控制器，用于获取菜单列表；

var getMenuList = function () {
$http.get("commons/getMenuList.do").success(function (response) {
$scope.menuList = response;
});
};

特别的，CBoard并不是直接将菜单项显示在界面上，而是在模板中配置所有菜单项，通过isShowMenu(menuCode)判断是否显示此菜单项；

/*isShowMenu方法*/
$scope.isShowMenu = function (code) {
return !_.isUndefined(_.find($scope.menuList, function (menu) {
return menu.menuCode == code
}));
};

<!--src/main/webapp/starter/main-sidebar.html-->

<!-- Extends -->
<li class="treeview" ui-sref-active="active" ng-if="isShowMenu('extend')">
<a>
<i class="fa fa-cog"></i>
<span>{{'SIDEBAR.EXTEND'|translate}}</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li ui-sref-active="active" ng-if="isShowMenu('extend.function_1')">
<a ui-sref="extend.function_1"><i class="fa fa-fw fa-user"></i>{{'SIDEBAR.EXTEND_FUNCTION_1'|translate}}</a>
</li>
</ul>
</li>

1.4.配置菜单项功能

菜单的功能配置在AngularJS的config中完成，涉及到具体的请求地址,模板路径，Controller（前端），被当作常量存储在config中；

<!--src/main/webapp/org/cboard/ng-config.js-->

angular.module('cBoard').config(['$stateProvider', function ($stateProvider) {
$stateProvider
//......
.state('extend', {
url: '/extend',
abstract: true,
template: '<div ui-view></div>'
})
.state('extend.function_1', {
url: '/extend',
templateUrl: 'org/cboard/view/extend/function_1.html',
controller: 'extendFunction'
});

}]);

当点击具体的菜单项时会请求响应的Controller并加载对应的模板，最后完成界面的渲染；

1.5.配置语言字符串

CBoard的语言配置通过AngularJS的国际化服务来完成（Angular-translate），如图为菜单项的语言字符串：

/*src/main/webapp/i18n/cn/cboard.json*/

"SIDEBAR": {
"C_DASHBOARD": "看板",
"MY_DASHBOARD": "我的看板",
"CONFIG": "配置",
"DATA_SOURCE": "数据源管理",
"CUBE": "数据集管理",
"WIDGET": "图表设计",
"DASHBOARD": "看板设计",
"DASHBOARD_CATEGORY": "看板分类",
"ADMIN": "管理",
"USER_ADMIN": "用户管理",
"RES_ADMIN": "资源管理",
"JOB": "定时任务",
"SHARE_RESOURCE": "资源分享",
"EXTEND": "扩展功能",
"EXTEND_FUNCTION_1":"测试功能一"
},