Java数据库获取动态主菜单和子菜单或上下级关联菜单+jquery页面展示

    最近工作上做了较多登陆模块的东西,一个较完善的登陆模块会涉及到不少知识点,如SSO、用户权限管理,Redis,今天给大家详细介绍用户权限管理这一功能模块中的动态菜单处理。

    先展示需求的效果图:



    一、实现过程简介:

    用户进行登陆操作,请求进入后台时,数据库根据用户的职能去查询该用户可操作的菜单项目,数据库中存放单条菜单项,通过parent_id是否为0和child_id来实现父子层级关系,如 parent_id = 1 的菜单项(人员管理、角色管理、菜单管理)均为 menu_id = 1菜单项(权限管理)的子菜单,顺序由他们的 child_id 大小排序。简单的菜单设计显示为如下效果:



  由于菜单存在级联关系,在返回值上我选用了HashMap。

    二、代码实现部分:

    Ajax请求菜单(个人认为前端解析难度大于后台获取)

    (1)index.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<h2>Hello World!</h2>
<hr>
<input type="button" value="点击获取菜单" id="getmenu">

<div id="menuDiv" style="height:500px;font-size: 10px;">

</div>
<script>
    $('#getmenu').click(function(){
        $.ajax({
            url:'Getmenu',
            type:'get',
            dataType:'text',
            success:function (data) {
                $('#menuDiv').empty();  //清空div内容
                var data=eval("("+data+")");
                var parent_arr =  Object.getOwnPropertyNames(data);  //获取data属性集合,即parent_menu
                for(var i = 0;i<parent_arr.length;i++){  //遍历parent_menu
                    var obj2=eval("("+parent_arr[i]+")");
                    $('#menuDiv').append("<hr><input type='checkbox' >"+obj2.menu_name+"<hr>");
                    for(var j = 0;j<data[parent_arr[i]].length;j++){            //获取parent_menu下的child_menu
                        $('#menuDiv').append("<input type='checkbox' style='margin-left:20px;'>"+data[parent_arr[i]][j].menu_name+"<br>");
                    }
                }
            }
        });
    });


</script>

</body>
</html>


    Java后台接收请求后查询并构造动态菜单

    (1)Getmenu.java(接收请求并构造动态菜单):

@WebServlet(urlPatterns="/Getmenu")
public class Getmenu extends HttpServlet {
    MenuDao menuDao = new MenuDao();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      //  response.setContentType("text/xml;charset=UTF-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/plain;charset=utf-8");
        PrintWriter out = response.getWriter();

        List<Menu> parentMenu =  menuDao.getParentMenu();  //获取数据库所有父菜单
        List<Menu> childMenu = menuDao.getChildMenu();    //获取数据库所有子菜单

        Map<Menu,List<Menu>> menuList = new HashMap<Menu,List<Menu>>();  //创建结果菜单menuList

        List<Menu> TempChildMenu = null;  //创建临时子菜单
        for(Menu parent_menu:parentMenu){  //装载并遍历父菜单
            TempChildMenu = new ArrayList<Menu>();
            for(Menu child_menu:childMenu){  //遍历父菜单,遍历过程通过判断,再遍历筛选子菜单
                    if(parent_menu.getMenu_id() == child_menu.getParent_id()){
                        TempChildMenu.add(child_menu);  //装载子菜单
                    }
            }
                menuList.put(parent_menu,TempChildMenu); //装载父菜单
        }
        Gson gson = new Gson();
        out.write(gson.toJson(menuList));
        out.close();
        System.out.println(menuList);
    }
}

    (2)MenuDao.java(数据库查询菜单实现类):

public class MenuDao extends BaseDao {

    public List<Menu> getParentMenu(){
        List<Menu> menus = new ArrayList<Menu>();
        Menu menu = null;
        try{
            String sql = "select * from menu_table where parent_id = 0";
            Object[] params = {};
            ResultSet rs = this.executeSQL(sql,params);
            while(rs.next()){
                menu = new Menu();
                menu.setMenu_id(rs.getInt(1));
                menu.setMenu_name(rs.getString(2));
                menu.setParent_id(rs.getInt(3));
                menu.setChild_id(rs.getInt(4));
                menus.add(menu);
            }
        }catch (SQLException e){
            e.printStackTrace();
        }
        return menus;
    }

    public List<Menu> getChildMenu(){
        List<Menu> menus = new ArrayList<Menu>();
        Menu menu = null;
        try{
            String sql = "select * from menu_table where parent_id > 0";
            Object[] params = {};
            ResultSet rs = this.executeSQL(sql,params);
            while(rs.next()){
                menu = new Menu();
                menu.setMenu_id(rs.getInt(1));
                menu.setMenu_name(rs.getString(2));
                menu.setParent_id(rs.getInt(3));
                menu.setChild_id(rs.getInt(4));
                menus.add(menu);
            }
        }catch (SQLException e){
            e.printStackTrace();
        }
        return menus;
    }
}

    (3)BaseDao.java(数据库链接基Dao):

public class BaseDao {

    protected Connection conn;

    protected PreparedStatement ps;

    protected Statement stmt;

    protected ResultSet rs;

    //获取数据库连接
    public boolean getConnection(){
        //读取配置信息
        PropertiesUtils.loadFile("config.properties");

        String url = PropertiesUtils.getPropertyValue("url");
        String username = PropertiesUtils.getPropertyValue("username");
        String password = PropertiesUtils.getPropertyValue("password");
        String driver = PropertiesUtils.getPropertyValue("driver");

        //加载jdbc驱动
        try{
            Class.forName(driver);
            //与数据库建立连接
            conn = DriverManager.getConnection(url,username,password);
        }catch(ClassNotFoundException e){
            e.printStackTrace();
            return false;
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return false;
        }
        return true;
    }
    //增删改
    public int executeUpdate(String sql,Object[] params){
        int updateRows = 0;
        getConnection();
        try{
            ps = conn.prepareStatement(sql);
            for(int i= 0;i<params.length;i++){
                ps.setObject(i+1, params[i]);
            }
            updateRows = ps.executeUpdate();
        }catch(SQLException e){
            e.printStackTrace();
        }
        return updateRows;
    }

    //查询
    public ResultSet executeSQL(String sql,Object[] params){
        getConnection();
        try{
            ps = conn.prepareStatement(sql);
            for(int i=0;i<params.length;i++){
                ps.setObject(i+1, params[i]);
            }
            rs = ps.executeQuery();
        }catch(SQLException e){
            e.printStackTrace();
        }
        return rs;
    }
    //关闭资源
    public boolean close(){
        if(rs!=null){
            try{
                rs.close();
            }catch(SQLException E){
                E.printStackTrace();
                return false;
            }
        }
        if(ps !=null){
            try{
                ps.close();
            }catch(SQLException E){
                E.printStackTrace();
                return false;
            }
        }
        if(stmt!=null){
            try{
                stmt.close();
            }catch(SQLException E){
                E.printStackTrace();
                return false;
            }
        }
        if(conn!=null){
            try{
                conn.close();
            }catch(SQLException E){
                E.printStackTrace();
                return false;
            }
        }
        return true;
    }

}

    (4)config.properties(数据库连接配置文件):

##jdbc config

driver = com.mysql.jdbc.Driver
url = jdbc:mysql://localhost:3306/mydb?useUnicode=true&characterEncoding=utf8
username = root
password = 123456

    (5)PropertiesUtils.java(数据库连接通过配置文件实现的工具类):

public class PropertiesUtils {

    static Properties prop = new Properties();
    /**
     * @param fileName 需要加载的properties文件,文件需要放在src根目录下
     * 是否加载成功
     */
    public static boolean loadFile(String fileName){
        try {
            prop.load(PropertiesUtils.class.getClassLoader().getResourceAsStream(fileName));
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }
    /**
     * 根据KEY取回相应的value

     */
    public static String getPropertyValue(String key){
        return prop.getProperty(key);
    }
}

    (6)pom.xml

   <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.32</version>
    </dependency>
    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.3.1</version>
    </dependency>

    三、效果演示



    四、注意

    在加载动态菜单时值得注意的是,ajax的解析类型与后台java的响应类型,个人在success回调函数解析返回data的时候花了较多时间调试,如json对象与object对象取值问题。若需更多的扩展功能,通常的做法建议是前端创建menu.js作为解析生成菜单的专有方法,实现可动画菜单的菜单与操作事件。该类方法在前端框架中并不少见,在此就不一一列举了。

    


  • 3
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

千杯不醉476

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值