最簡潔的權限（菜單）控制

　　生活中常見的管理系統中，都會有權限的控制，讓不同類型的用戶看到不同的菜單。其實，類似於uasyui這樣的前端框架，是有提供成熟的解決方案的，但是不夠靈活。在某一次的開發過程中，樓主終於忍受不了了，決定自己寫。其邏輯並不復雜，直接上代碼。

1.先看一下效果圖，有父級菜單，有子級菜單。數據庫需要5個表。user表，role表，menu表，role_menu表，user_role表

下面貼出最簡單的表結構（依次）。

 

role_menu 表 和user_role表 是兩個關聯表。

2.下面貼出查詢語句

SELECT * FROM key_menu m WHERE m.id IN(
            SELECT rm.menuid  FROM key_role_menu  rm  WHERE rm.roleid = (
                  SELECT ur.roleid  FROM key_user_role ur WHERE ur.userid = 1 )) order BY id

注意：上述語句中的userid是寫死得，只是為了測試，實際開發中需要動態傳入。

3.前台操作

　　查出來的數據通過json發送給前端，前端拿到一個這樣的數據

很熟悉的json數據，所以前端需要通過循環遍歷，把內容放到頁面上，注意，這條數據中有父菜單，有子菜單，所以前端的工作還是得稍微費點功夫。下邊貼出我的代碼和邏輯。

$.ajax( {
        url : basepath+'/menu/selectMenu.do',
        type : 'post',
        dataType : 'json',
        success : function(data) {
            console.log(data.result);
            var result = data.result;
            var menu = ""; //定義變量存儲
            for(var i = 0;i<result.length;i++){
                menu += "<li class='layui-nav-item'>"
                if(result[i].parentid == 0){ //取出父元素的菜單，拼進頁面
                    menu +=        "<a href='#'>"+result[i].menuname+"</a>"
                    for(var j = 0;j<result.length;j++){ //繼續遍歷這幾條數據
                        if(result[j].id > result[i].id && result[j].id < (result[i].id)+10){ //取出這個父元素所對應的子元素
                            menu +=    "<dl class='layui-nav-child'>"
                            menu +=        "<dd>"
                            menu +=            "<a class='menuitem' mid='"+result[j].id+"' murl='"+result[j].url+"' href='#'>"+result[j].menuname+"</a>"
                            menu +=        "</dd>"
                            menu +=    "</dl>"
                        }
                    }
                }
                menu +=    "</li>";
            }
            $("#nav").html(menu);
            element.init();         
        }
    });

 

 完成這一步之后，基本上就完成了！