① 数据库设计:

数据库映射的POJO类

@JsonIgnoreProperties(ignoreUnknown = true)
@Table(name="MENU")
public class Menu {
    @Id
    private String menuNumber;    //菜单编号         
    private String menuName;       //菜单名称
    private String menuUrl;            //菜单URL
    private String parentMenu;       //父级菜单
    private Integer menuPermissions; //菜单访问权限
    //Setter和Getter及toString()省略
    }

②通过mybaites访问数据的Mapper类

public interface MenuMapper {
     //通过菜单的父级菜单和菜单的权限获取菜单(初始化时要获取所有的一级菜单)
    @Select("select * from MENU where LENGTHB(Parent_Menu) = #{menulevel} and Menu_Permissions=#{permissions}")
    List<Menu> selectMenuByLevelAndPer(@Param("menulevel")int menulevel,@Param("permissions")int permissions);
}

③服务层Service
``
@Service
public class MenuServiceImp implements MenuService{
    @Autowired
    private MenuMapper  menuMapper;
    @Override
    public List<Menu> getMenuByParent(String parentMenu,Integer menuPermissions) {
        // TODO Auto-generated method stub
        Menu menu = new Menu();
        menu.setParentMenu(parentMenu);
        menu.setMenuPermissions(menuPermissions);
        List<Menu> menuList = menuMapper.select(menu);  //“menuMapper.select(menu)” 函数通过JPA实现
        return menuList;
    }

    @Override
    public List<Menu> getMenuByLevel(Integer menulevel,Integer menuPermissions) {
        // TODO Auto-generated method stub
        if(menulevel<=0) return null;
        //通过父级菜单查询
        System.out.println(menulevel+" ==== " + menuPermissions);
        if(menuPermissions==null)
            return menuMapper.selectMenuByLevel(menulevel);
        else
            return menuMapper.selectMenuByLevelAndPer(menulevel, menuPermissions);
    }
}

④控制器Controller

 @RequestMapping("/getMenuInit")
    public @ResponseBody List<Menu> getMenuInit(Integer perminsion){
        System.out.println("getMenuInit" +"=="+ perminsion);
        //System.out.println(menuService.getAllMenu().toString());
        return menuService.getMenuByLevel(1, perminsion);
    }

    @RequestMapping("/getMenu")
    public @ResponseBody List<Menu> getMenu(String parentMenu,Integer perminsion){
        System.out.println(" getMenu:" + parentMenu+" == "+ perminsion);
        //System.out.println(menuService.getAllMenu().toString());
        return menuService.getMenuByParent(parentMenu, perminsion);
    }

⑤前端页面设计
初始化调 jQuery函数:访问所有的一级菜单

 ` var flag=0;
   $("#showDiv").html("")
   $.ajax(
           {
           url:"/menu/getMenuInit",
           data:{"perminsion":"2"},
           type:"post",
           dataType:"json",
           success:function(data)
           {
               for(var i=0;i<data.length;i++){
                   var menu = data[i]; 
                   $("#showDiv").append("<li class='nav-item'>"
                      +"<a href='javascript:;'"
                      +"onclick='getMenu("
                      +menu.menuNumber+","
                      +menu.menuPermissions+","
                      +i+")'><i class='my-icon nav-icon icon_"+((i+1)%3+1)+"'></i><span>"+
                      menu.menuName+
                      "</span><i class='my-icon nav-more'></i></a></li>")                
               }
            }
         })
     单击时调用函数
     ```
function getMenu(parentMenu,perminsion,divid){  
   var div = document.getElementById("showDiv").getElementsByTagName("li")[divid]
   if(parentMenu.length%2!=0)
       parentMenu="0"+parentMenu;

   if(div.getElementsByTagName("li").length>1){
       for(var i=0;i<div.getElementsByTagName("li").length;i++)
             div.getElementsByTagName("li")[i].innerHTML=""
       return false
   }
   $.ajax(
           {
           url:"/menu/getMenu",
           data:{"parentMenu":parentMenu,"perminsion":perminsion},
           type:"post",
           dataType:"json",
           success:function(data)
           {
               var HTML=div.innerHTML
               for(var i=0;i<data.length;i++){
                   var menu = data[i];
                   menuNumber=menu.menuNumber.substring(1,menu.menuNumber.length);     
                   HTML=HTML+"<li><a><span>"+menu.menuName+"</span></a></li>" 
               }
               div.innerHTML = HTML;
           }
     });

}

     ```