阿里Bui动态菜单以及权限表结构设计

[{"config":{"homePage":"zhu","id":"menu","menu":[{"items":[{"href":"main/zhu.html","id":"zhu","text":"首页"},{"href":"main/user-message1","id":"user-message1","text":"用户信息管理"},{"href":"main/cp-list1","id":"cp-list1","text":"产品类别管理"},{"href":"main/cp-list","id":"cp-list","text":"订单表明细"},{"href":"main/buyer-list","id":"buyer-list","text":"客户信息管理"},{"href":"main/cp-guan.html","id":"cp-guan","text":"商品信息管理"},{"href":"main/cp-list2","id":"cp-list2","text":"供应商信息管理"},{"href":"main/cp-list3","id":"cp-list3","text":"仓库信息管理"},{"href":"main/cp-list5","id":"cp-list5","text":"车辆信息管理"},{"href":"main/cp-list7","id":"cp-list7","text":"实体店信息管理"},{"href":"main/role","id":"role","text":"角色管理"}],"text":"基础信息"},{"items":[{"href":"main/gongshang","id":"gongshang","text":"供应商"},{"href":"main/saoma-search","id":"saoma-search","text":"供应商注册审核"},{"href":"main/zs-search","id":"zs-search","text":"供应商订单确认"}],"text":"供应商管理"},{"items":[{"href":"main/forms-orderList1","id":"forms-orderList1","text":"线下订单"},{"href":"main/forms-requestList1","id":"forms-requestList1","text":"需求信息一览"},{"href":"main/forms-purchaseList1","id":"forms-purchaseList1","text":"采购单"},{"href":"main/purchase-check","id":"forms-purchreview1","text":"采购单审核"},{"href":"main/html404","id":"html404","text":"二维码标签打印"},{"href":"main/shouhuo","id":"shouhuo","text":"收货管理"},{"href":"main/html505","id":"html505","text":"线上订单数据接口"},{"href":"main/quick","id":"quick","text":"页面操作快捷方式"}],"text":"采购管理"},{"items":[{"href":"main/oder-inspect","id":"oder-inspect","text":"采购商品检测"},{"href":"main/oder-sinspect","id":"oder-sinspect","text":"供应商检测报告"},{"href":"main/order-tinspect","id":"order-tinspect","text":"检测机构报告"}],"text":"检测管理"},{"items":[{"href":"main/cangku","id":"cangku","text":"仓库管理"},{"href":"main/ruku","id":"ruku","text":"入库单"},{"href":"main/chuku","id":"chuku","text":"出库单"},{"href":"main/fenbao","id":"fenbao","text":"分包管理"},{"href":"main/kucun","id":"kucun","text":"库存管理"}],"text":"出入库管理"},{"items":[{"href":"search/zhuisu-report","id":"zhuisu-report","text":"追溯状况信息"},{"href":"main/zs-search","id":"zs-search","text":"追溯查询"},{"href":"main/saoma-search","id":"saoma-search","text":"扫码查询"}],"text":"商品溯源"},{"items":[{"href":"main/delivery-list","id":"delivery-list","text":"配送单"},{"href":"main/zs-search","id":"zs-search","text":"配送单维护"},{"href":"main/saoma-search","id":"saoma-search","text":"送达确认"}],"text":"配送管理"},{"items":[{"href":"main/return-list","id":"return-list","text":"退货单"},{"href":"main/timeline","id":"timeline","text":"迁移图"}],"text":"退货管理"}]}},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{"config":{"homePage":"zhu","id":"search","menu":[{"items":[{"href":"main/jx-report","id":"jx-report","text":"根据分类内容查询报表"},{"href":"main/chuku-report","id":"chuku-report","text":"出库报表"},{"href":"main/ruku-report","id":"ruku-report","text":"入库报表"},{"href":"main/buylist-report","id":"buyList-report","text":"采购信息报表"},{"href":"main/jiance-report","id":"jiance-report","text":"检测信息报表"},{"href":"main/sunhao-report","id":"sunhao-report","text":"损耗率报表"},{"href":"main/kucun-report","id":"kucun-report","text":"库存盘点报表"},{"href":"main/sale-report","id":"sale-report","text":"销售状况报表"},{"href":"main/year-report","id":"year-report","text":"年度报表状态"},{"href":"main/quarter-report","id":"quarter-report","text":"季度报表状态"},{"href":"main/month-report","id":"month-report","text":"月报表状态"}],"text":"进销存报表"}]}},{},{},{},{},{},{},{},{},{},{},{},{},{},{"config":{"homePage":"zhu","id":"detail","menu":[{"items":[{"href":"main/ruku-detail","id":"ruku-detail","text":"入库单明细表"},{"href":"main/chuku-detail","id":"chuku-detail","text":"出库单明细表"},{"href":"main/pc-detail","id":"pc-detail","text":"采购单明细表"},{"href":"main/zs-detail","id":"zs-detail","text":"追溯明细表"},{"href":"main/return-detail","id":"return-detail","text":"退货单明细表"}],"text":"详情明细表页"}]}},{},{},{},{},{},{}]

新开发的项目需要使用到bui框架，刚好轮到我写权限模块。所以研究一点，权限不复杂，主要就是对数据，封装成动态菜单的形式比较麻烦。

话不多说，先上支持动态菜单的数据

var config = [{
          id:'menu', 
          homePage : 'zhu',
          menu:[{
            text:'测试',
            items:[
                {id:'demo',text:'demo',href:'test/demo'},
                {id:'demo2',text:'demo2',href:'test/demo2'},
                {id:'demoselect',text:'demoselect',href:'test/demoselect'},
                {id:'treeselect',text:'treeselect',href:'test/treeselect'}
                ]
            },{
              text:'基础信息<i class="fa fa-chevron-right m-right"></i>',
              items:[
                {id:'zhu',text:'首页',href:'main/zhu.html',closeable : false},
                {id:'user-message1',text:'用户信息管理',href:'main/user-message1'},
                {id:'cp-list',text:'订单表明细',href:'main/cp-list'},
                {id:'buyer-list',text:'客户信息管理',href:'main/buyer-list'},
                {id:'cp-guan',text:'商品信息管理',href:'main/cp-guan.html'},
                {id:'cp-list2',text:'供应商信息管理',href:'main/cp-list2'},
                {id:'cp-list3',text:'仓库信息管理',href:'main/cp-list3'},
                {id:'cp-list5',text:'车辆信息管理',href:'main/cp-list5'},
                 {id:'all-news',text:'所有警示消息',href:'main/all-news'},
                {id:'cp-list7',text:'实体店信息管理',href:'main/cp-list7'}
              ]
            },{
              text:'供应商管理<i class="fa fa-chevron-right m-right"></i>',
              items:[
                  {id:'gongshang',text:'供应商',href:'main/gongshang'},
                  {id:'gongregister-check',text:'供应商注册审核',href:'main/gongregister-check'},
                  {id:'zs-search',text:'供应商订单确认',href:'main/zs-search'},
              ]
          },{
              text:'采购管理<i class="fa fa-chevron-right m-right"></i>',
              items:[
                  {id:'forms-orderList1',text:'线下订单',href:'main/forms-orderList1'},
                  {id:'forms-purchaseList1',text:'采购单',href:'main/forms-purchaseList1'},
                  {id:'purchase-check',text:'采购单审核',href:'main/purchase-check'},
                  {id:'html404',text:'二维码标签打印',href:'main/html404'},
                  {id:'shouhuo',text:'收货管理',href:'main/shouhuo'},
                  {id:'html505',text:'线上订单数据接口',href:'main/html505'}
                 
              ]
            },{
              text:'检测管理<i class="fa fa-chevron-right m-right"></i>',
              items:[
                  {id:'order-inspect',text:'采购商品检测',href:'main/order-inspect'},
                  {id:'order-inspectout',text:'出库商品检测',href:'main/order-inspectout'},
                  {id:'order-sinspect',text:'供应商检测报告',href:'main/order-sinspect'},
                  {id:'order-tinspect',text:'检测机构报告',href:'main/order-tinspect'},
              ]
            },{
              text:'出入库管理<i class="fa fa-chevron-right m-right"></i>',
              items:[
                {id:'cangku',text:'仓库管理',href:'main/cangku'},
                {id:'ruku',text:'入库单',href:'main/ruku'},
                  {id:'chuku',text:'出库单',href:'main/chuku'},
                  {id:'kucun',text:'库存管理',href:'main/kucun'},
                  {id:'churuku',text:'出入库详情',href:'main/churuku-detail'},
              ]
            },{
              text:'商品溯源<i class="fa fa-chevron-right m-right"></i>',
              items:[
                   {id:'zhuisu-report',text:'追溯状况信息',href:'main/zhuisu-report'},
                  {id:'zs-gongshang',text:'追溯商品供应商',href:'main/zs-gongshang'},
                  {id:'zs-search',text:'追溯查询',href:'main/zs-search'},
                  {id:'saoma-search',text:'扫码查询',href:'main/saoma-search'}
              ]
          },{
              text:'配送管理<i class="fa fa-chevron-right m-right"></i>',
              items:[
                    {id:'delivery-list',text:'配送单',href:'main/delivery-list'},
                  {id:'zs-search',text:'配送单维护',href:'main/zs-search'},
                  {id:'saoma-search',text:'送达确认',href:'main/saoma-search'}
              ]
          },
          {
              text:'退货管理<i class="fa fa-chevron-right m-right"></i>',
              items:[
                  {id:'return-list',text:'退货单',href:'main/return-list'},
                  {id:'timeline',text:'迁移图',href:'main/timeline'}
              ]
            },{
              text:'货损管理<i class="fa fa-chevron-right m-right"></i>',
              items:[
                  {id:'goods-broken',text:'报损单',href:'main/goods-broken'}
              ]
          }]
          },
          {
            id:'search',
            homePage : 'chuku-report',
              menu:[{
                text:'进销存报表<i class="fa fa-chevron-right m-right"></i>',
                items:[
                  {id:'jx-report',text:'根据分类内容查询报表',href:'main/jx-report'},
                  {id:'chuku-report',text:'出库报表',href:'main/chuku-report',closeable : false},
                  {id:'ruku-report',text:'入库报表',href:'main/ruku-report'},
                  {id:'buyList-report',text:'采购信息报表',href:'main/buylist-report'},
                  {id:'jiance-report',text:'检测信息报表',href:'main/jiance-report'},
                    {id:'sunhao-report',text:'损耗率报表',href:'main/sunhao-report'},
                    {id:'kucun-report',text:'库存盘点报表',href:'main/kucun-report'},
                    {id:'sale-report',text:'销售状况报表',href:'main/sale-report'},
                  {id:'year-report',text:'年度报表状态',href:'main/year-report'},
                  {id:'quarter-report',text:'季度报表状态',href:'main/quarter-report'},
                  {id:'month-report',text:'月报表状态',href:'main/month-report'}
                ]
              }]
              },
              {
            id:'detail',
            homePage : 'pc-detail',
            menu:[{
                text:'详情明细表页<i class="fa fa-chevron-right m-right"></i>',
                items:[
                  {id:'ruku-detail',text:'入库单明细表',href:'main/ruku-detail'},
                  {id:'chuku-detail',text:'出库单明细表',href:'main/chuku-detail'},
                  {id:'pc-detail',text:'采购单明细表',href:'main/pc-detail',closeable : false},
                  {id:'zs-detail',text:'追溯明细表',href:'main/zs-detail'},
                  {id:'return-detail',text:'退货单明细表',href:'main/return-detail'}
                ]
              }]
          }
          ]; 

当时也是懵逼了 ，仔细一看是个 ，三级数据，封装成了数组。最后设计的表如下 

 

 于是乎，子字段，父字段，爷字段。 这样聚合在一张表上，诚然，这是权限模块比较少的，多的希望大家多分几个表。

这个就是权限角色关系表，和用户信息表。 

接下来是控制器

@RequestMapping("getUserResource")
        public String getUserResource(HttpServletResponse response,HttpServletRequest request){
            
            List<TUsResource> TUsResourceListFrists= tusResourceService.selectResource(this.getUserInfo(request).getFkPerid());
            List<Config> jsonPublicList= new ArrayList<Config>();
            try {
                for(TUsResource tpeResource : TUsResourceListFrists){
                    Map<String,Object> map1=new HashMap<String,Object>();
                     map1.put("pedid", this.getUserInfo(request).getFkPerid());
                     map1.put("id", tpeResource.getId());
                    List<TUsResource> TUsResourceListFrist= tusResourceService.selectFrist(map1);
                    Config jsonPublicLists=new Config();
                    if(tpeResource != null){
                        for(TUsResource TUsResourceFrist : TUsResourceListFrist){
                            Config jsonPublic=new Config();
                            Map<String,Object> map2=new HashMap<String,Object>();
                             map2.put("id", TUsResourceFrist.getId());
                             map2.put("pedid", this.getUserInfo(request).getFkPerid());
                             
                            List<TUsResource> TUsResourceListSecound= tusResourceService.selectFristSecound(map2);
                            jsonPublic.setId(TUsResourceFrist.getName());
                            jsonPublic.setHomePage("zhu");
                            List<TUsResource> TUsResourceLists =new ArrayList<TUsResource>();
                            if(TUsResourceFrist != null){
                                for(TUsResource TUsResourceSecound : TUsResourceListSecound){
                                     Map<String,Object> map=new HashMap<String,Object>();
                                     map.put("pid", TUsResourceSecound.getId());
                                     map.put("sonid", TUsResourceSecound.getPid());
                                     map.put("pedid", this.getUserInfo(request).getFkPerid());
                                     TUsResource TUsResources= new TUsResource();
                                     TUsResources.setText(TUsResourceSecound.getName());
                                     List<configs> TUsResourceList = new ArrayList<configs>();
                                    List<TUsResource> TUsResourceListThrid= tusResourceService.selectFristThrid(map);
                                    if(TUsResourceSecound != null){
                                        for(TUsResource TUsResourceThrid :  TUsResourceListThrid){
                                            configs configs = new configs();
                                            configs.setHref(TUsResourceThrid.getUrl());
                                            configs.setText(TUsResourceThrid.getName());
                                            configs.setId(TUsResourceThrid.getIds());
                                            TUsResourceList.add(configs);
                                        }
                                        TUsResources.setItems(TUsResourceList);
                                        TUsResourceLists.add(TUsResources);
                                    }
                                }
                                jsonPublic.setMenu(TUsResourceLists);
                                jsonPublicLists.setConfig(jsonPublic);
                            }
                            
                        }
                        jsonPublicList.add(jsonPublicLists);
                        
                    }
                }

                outPutTool.successOutJson(response, jsonPublicList);
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            return null;
            
        }

这是数据拼接，查询爷字段，根据爷字段，查询父字段，再查询子字段。其中config那两个类文件，是我按照，json的格式定义的，下面就给大家放出sql 查询

  <select id="selectResource"  resultMap="BaseResultMap" parameterType="java.lang.Integer">
  
          SELECT * FROM TUs_Resource  tus
        LEFT JOIN TRe_Resource tpe ON tus.id = tpe.reid 
        WHERE tpe.pedid = #{id,jdbcType=INTEGER} 
  
  </select>
  
    <select id="selectFrist" resultMap="BaseResultMap" parameterType="Map">
  
          SELECT tur.* FROM TUs_Resource  AS tur 
          LEFT JOIN TRe_Resource tpe ON tur.id = tpe.reid
           where tur.id = #{id,jdbcType=INTEGER} and tpe.pedid = #{pedid} 
AND  tur.pid is null AND tur.sonid is null AND tur.url is null AND tur.ids is NULL 
  
  </select>
  
    <select id="selectFristSecound" resultMap="BaseResultMap" parameterType="Map">
  
          SELECT tur.* FROM TUs_Resource  AS tur 
          LEFT JOIN TRe_Resource tpe ON tur.id = tpe.reid
           where tur.pid = #{id,jdbcType=INTEGER} and tpe.pedid = #{pedid}
AND  tur.pid is not null AND tur.sonid is null AND tur.url is null AND tur.ids is NULL 
  
  </select>
  
    <select id="selectFristThrid" resultMap="BaseResultMap" parameterType="Map">
          SELECT tur.* FROM TUs_Resource  AS tur 
          LEFT JOIN TRe_Resource tpe ON tur.id = tpe.reid
           where tur.pid = #{pid}  AND tur.sonid = #{sonid} and tpe.pedid = #{pedid} 
 AND  tur.pid is not null AND tur.sonid is not null AND tur.url is not null AND tur.ids is not NULL
  </select>

其中第一个是，查询想对应的关系表id，接下来就是爷，父，子，依次查询。最后给就是返回的json数据

其实空的对象，是应为查询的时候为空，前端可以判断。 最后前端 数据访问代码

   $.ajax({
            url : "getUserResource",
            type : "post",
            success: function(data){
                data = eval("(" + data + ")");
                var config = [];
                for(var i in data){
                    if(data[i]['config'] != undefined){
                        config.push(data[i]['config']);
                    }
                }
                new PageUtil.MainPage({
                            modulesConfig : config
                  });
            }
        });

最后效果可以出来，但是写到读取权限，也懵逼了 还好最后 想清楚了 ，不应该以json为重点，重心应该放到权限上。加油！2017