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":"测试功能一"},