Cboard Framework Usage Summary Five--Extended menu configuration function

article content

1. Data Sheet definition
2. Back-end adjustment
3. Front-end adjustment
4. How to use the function
5. Implementing the Management Interface
6. Summary 1. Data Sheet definition

Since the Cboard native menu item is configured in Java code and initialized with the static code block, to implement the menu configuration function, it is necessary to establish the relevant database table to store the menu information; 1.1.dashboard_menu data table definition (MySQL)

Reference only

Field name	type	field meaning	Notes
menu_id	bigint	Menu ID
parent_id	bigint	Parent Menu ID
Menu_code	varchar	Menu Code
Menu_name_code	varchar	Menu Name Code	Corresponding language file code
Menu_description	varchar	Function description
Order_number	Int	Menu number	For menu sorting
Menu_icon	varchar	Menu icon	Store icon Styles
Menu_category	varchar	Menu grouping
Layout_json	Text	Menu style extension fields	Reserved fields

2. Import the original menu data into the database

Native menu data is saved in Menuservice (Org/cboard/services/menuservice.java):

Where the parameter means: Menu ID, parent menu ID, menu name Code, menu code

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, 1, "SIDEBAR.
        Share_resource "," Config.role ")); Menulist.add (New Dashboardmenu,-1, "SIDEBAR.
        EXTEND "," EXTEND ")); Menulist.add (New Dashboardmenu, "SIDEBAR.
Extend_function_1 "," extend.function_1 ")); 

2. Back-end Adjustment

To complete the background code adjustment to complete the corresponding menu configuration function, the following steps are required: use Mybatis-generator to automatically generate corresponding mapper, Dao, PO Code, the DAO layer definition Getall/update/delete and other possible interfaces , more DAO layer definition, implement service and controller in sequence, test the returned data; 2.1. Automatically generate MyBatis related code using Mybatis-generator

About the automatic generation of MyBatis related code, many online materials, you can refer to the following article, the author provides a download link to the tool:

SSM Framework-Automatically create code with MyBatis generator @shu_lin

Here is the configuration for my generatorconfig.xml:

<!--generate the model package name and location--<javamodelgenerator targetpackage= "Org.cboard.pojo" targetproject= "Cboard" > <pro Perty name= "Enablesubpackages" value= "true"/> <property name= "trimstrings" value= "true"/> </javaModelG Enerator> <!--generate the package name and location of the mapping file--<sqlmapgenerator targetpackage= "mapping" targetproject= "Cboard" > & Lt;property name= "Enablesubpackages" value= "true"/> </sqlMapGenerator> <!--generate DAO's package name and location--<javacl Ientgenerator type= "Xmlmapper" targetpackage= "Org.cboard.dao" targetproject= "Cboard" > <property name= "EnableS Ubpackages "value=" true "/> </javaClientGenerator> <!--the table to be generated tablename is the table name or view name in the database Domainobjectname is the entity class name---<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>

According to the package name set in the Generatorconfig.xml the corresponding files into the project, for the existing files, by appending the way, so as not to affect the normal function of the framework; 2.2. Add to the layer interface definition, realize the addition and deletion change

DAO layer Interface Definition:

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 mapping File Definition:

<select id= "Selectbyprimarykey" resultmap= "Resultmapwithblobs" parametertype= "Java.lang.Long" > select <inc Lude refid= "Base_column_list"/>, <include refid= "Blob_column_list"/> from dashboard_menu where menu_id = #{men Uid,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_nu Mber, 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. Add controller and service implementations

Mainly in Org.cboard.controller.AdminController and org.cboard.services.MenuService to increase the corresponding additions and deletions to change the operation;

Because the front end needs to display the menu hierarchically by structure here, the Resolvemenulevel method is added to the service, which outputs the menu array obtained by the database in a hierarchical structure;

  Recursive organization menu hierarchy only makes reference to
    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. Return to data test

The data that can be returned by the postman test is in the correct format:
3. Front-end Adjustment

The front-end adjustment is primarily a simple adjustment of the sidebar (SIDEBAR) Template:

Modifying the ANGULARJS controller: Primary modification of the URL address

File: Org/cboard/controller/cboard/cboardctrl.js (scoped to the controller of the Brother's page)

var getmenulist = function () {
    $http. Get ("/*url address */"). Success (function (response) {
        $scope. menulist = Response ;
    });
};

File: webapp/starter/main-sidebar.html, remove the original configuration in ". Sidebar-menu" (it is recommended to keep the menu item for the Panel list) and add the following code:

<!--custom menu-
<li class= "treeview" Ng-repeat= "M in Menulist" ui-sref-active= "active" >
<a>< C2/><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. How to use the function

To complete the above steps, the source of the menu data from the database, here we directly modify the database, directly add a "menu management" function; 4.1. Adding data items to the database

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 (' One ', '-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 (' One ', ' one ', ' extend.menu_manage ', ' SIDEBAR '). Extend_menu_manage ', NULL, ' 0 ', ' fa fa-fw fa-user ', ', ';

4.2. Adding a name string

Cboard Multi-language support is implemented by Angularjs-translate, and the corresponding string of menu name encoding is added;

Files: Webapp/i18n/cn/cboard.json, Webapp/i18n/en/cboard.json

"SIDEBAR": {
   "EXTEND": "Extended function",
   "Extend_menu_manage": "Menu Management",
 },

4.2. Create the corresponding view and controller files

View File: webapp/org/cboard/view/extend/menumanage.html

Controller file: Webapp/org/cboard/controller/extend/menumanagectrl.js

The specific content can refer to other documents in the same directory;

Introducing Controller:

Introduce the JS file where the controller is located in webapp/starter.html:

<script src= "Org/cboard/controller/extend/menumanagectrl.js" ></script>

Add a routing rule

Files: 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 '
  })

This completes the addition of the menu item, 5. Implementing the Menu Management interface

To complete the configuration of the menu, it is only necessary to implement the corresponding modification interface, the implementation of this is more flexible, as long as the front-end call back and delete the interface to change, complete the menu editing;

You can refer to the following table editing features implemented with Bootstrap-table and x-editable:

JS Component series--bootstraptable in-line editing solution: x-editable @ Lazy

Implementation results:
6. Summary

1. In the process of expansion, as far as possible to ensure that the original function is not affected;

2. To implement the menu configuration function as long as the addition of the DAO layer implementation, and simple adjustment of the interface;

3. After the adjustment, the later expansion of the development of relatively clear a lot:

Add new menu item –> Add language file –> add view and controller files –> add ANGULARJS routing rules –> implement business logic in view and controller