使用EasyUI开发银行业绩统计系统[18]-加载角色对应的菜单-原创手记-慕课网

最近有几个项目比较忙，现在猫哥Come Back。

一，简介

之前已经实现了银行业绩统计系统的数据库表、登录和管理后台的布局。本篇主要实现登录后根据角色加载角色对应的菜单。之前在JSP+Servlet培训班作业管理系统中讲过通过Servlet加载菜单，本篇主要是讲通过前端直接请求加载菜单的方式。要实现该功能，主要涉及3个方面：

需要在数据库中的用户表，角色表、菜单表、角色菜单表新增一些测试数据。
需要修改登录功能，也就是说在用户登陆时需要记下用户的角色，以便加载菜单时知道登录用户的角色。
在管理后台页面加载菜单时，需要从后台请求菜单信息，将后端返回的菜单列表显示到管理后台左侧的菜单栏。

二，数据库测试数据添加

注意，按以下sql代码添加之后，用户“猫哥”登录后，应该看到两个菜单名为“测试菜单1”和"测试菜单2"，两个菜单对应页面分别为test1.jsp和test2.jsp。

/*添加两个菜单*/
INSERT INTO `menu` VALUES ('1', '测试菜单1', 'test1.jsp');
INSERT INTO `menu` VALUES ('2', '测试菜单2', 'test2.jsp');
/*添加一个角色*/
INSERT INTO `role` VALUES ('1', '超级管理员');
/*添加角色-菜单对应关系*/
INSERT INTO `role_menu` VALUES ('1', '1', '1');
INSERT INTO `role_menu` VALUES ('2', '1', '2');
/*添加一个角色为超级管理员的用户*/
INSERT INTO `user` VALUES ('1', '猫哥', '1234', '1', null, null);

三，登录时记下登录用户信息（包括角色）
因为session存储用户对话的特点，此处将成功登录用户的信息保存在session中，修改LoginServlet如下：

public class LoginServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String method=request.getParameter("method");
        String userId=request.getParameter("userId");
        String userPassword=request.getParameter("userPassword");
        UserService service=new UserService(User.class);
        User user=service.checkLogin(userId, userPassword);
        if(user==null)
            out.print("{\"success\":false}");
        else//登录成功的话
        {
            //记录登录用户信息
            request.getSession().setAttribute("login_user", user);
            out.print("{\"success\":true}");
        }
        out.flush();
        out.close();
    }
}

四，登录成功后加载角色对应的菜单

我们希望在后台管理页面main.jsp初始化完成后加载菜单，所以只需将main.jsp中的js下面代码中写死的菜单1部分修改为从后端获取即可。

$(function(){
            InitMenu();
        });
        function InitMenu(){
            var url="role_manage.jsp";

            var innerHtml="<div><ul>";
            innerHtml+="<li><a href='#' way='"+url+"'>菜单1</a></li>";
            innerHtml+="</ul></div>";
            $("#menu").append(innerHtml);

            $("#menu li a").click(function(){
                var title = $(this).text();
                var url = $(this).attr("way");
                ShowPage(title,url);
            });
        }

相应的业务逻辑猫哥准备写在RoleMenuServlet里面，所以上述代码修改为：

function InitMenu(){//初始化菜单     
            var innerHtml="<div><ul>";//菜单栏内容
            //使用$.post()从后端获取
            $.post('/BankStatistics/RoleMenuServlet?method=getRoleMenu&ran='+Math.random(),function(result){    
                $.each(result,function(i,element){//针对返回json数据中的每一个元素
                    innerHtml+="<li><a href='#' way='"+element.menu_id.menu_url+"'>"+element.menu_id.menu_name+"</a></li>";//添加菜单
                });//$.each()结束
                innerHtml+="</ul></div>";
                $("#menu").append(innerHtml);
                $("#menu li a").click(function(){
                    var title = $(this).text();
                    var url = $(this).attr("way");
                    ShowPage(title,url);
                });
            },'json');//$.post()结束，注意返回数据格式为json
        }

RoleMenuServlet通过调用RoleMenuService实现数据相关操作，这两个后端类代码如下：

@WebServlet(urlPatterns="/RoleMenuServlet")
public class RoleMenuServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String method=request.getParameter("method");
        RoleMenuService service=new RoleMenuService(Role_menu.class);
        if(method.equals("getRoleMenu")){//获取角色对应菜单
            User user=(User)request.getSession().getAttribute("login_user");//获取登录用户信息
            if(user!=null){//已登录
                List<Role_menu> roleMenus=service.GetRoleMenuByUserId(user.getUser_id());
                String result = JSONObject.fromObject(roleMenus).toString();//格式化result   一定要是JSONObject  
                out.print(result);
            }
        }
        out.flush();
        out.close();
    }
}
public class RoleMenuService extends Service{
    public RoleMenuService(Class entityClass) {
        super(entityClass);
    }
    public List<Role_menu> GetRoleMenuByUserId(String userId){
        return operation.selectByAppend(" and role_menu.role_id='"+userId+"'");
    }
}

OK，测试没问题，OVER。

使用EasyUI开发银行业绩统计系统[18]-加载角色对应的菜单原创