使用EasyUI开发银行业绩统计系统[20]-角色管理实现@慕课网原创_慕课网

一，简介

之前已经实现了业绩统计系统的用户登录、登录之后加载角色对应的菜单的功能，最近几篇将实现用户的角色管理、菜单管理及角色-菜单对应关系管理。

本篇只介绍角色管理，即角色的增、删、改、查功能的实现。

核心关注点是基于EasyUI的增删改查的实现，跟之前JSP+Servlet培训班作业管理系统中讲的JSP+Servlet实现增删改查区别明显。最明显的就是借助于JavaScript(jQuery和EasyUI在动态的部分都是基于JavaScript进一步封装的)，实现了页面无刷新（不同把整个页面提交到后台）获取后端数据并修改页面内容。

二，JavaScript脚本简单封装

之前讲了，在主页面main.jsp中右侧区域加载菜单对应界面的代码为：

function ShowPage(title,url){
            $("#mainPanel").panel({title:title});
            $("#mainPanel").panel("refresh",url);
        }

需要注意的是，猫哥并没有使用任何的frameset和iframe框架，使用frame框架的话，其实是在一个浏览器页面加载了多个网页。而$("#mainPanel").panel("refresh",url);这一句只是在一个网页的部分区域加载一个网页。

即然是一个网页，就容易出现JavaScript脚本变量、函数等对象重名引起冲突的现象！为了避免冲突猫哥进行了简单的封装。将上述代码改为：

    function ShowPage(title,url){
            $("#mainPanel").panel({title:title});
            $("#mainPanel").panel("refresh",url);

        }

增加的代码$.getScript(file="script/"+url+".js");的含义就是：点击菜单链接为url时，将script文件夹下url.js文件中的脚本加载到当前页面。

例如如果有一个菜单对应jsp页面为test.jsp，则点击该菜单时自动加载script文件夹下test.jsp.js文件。

OK，为了划分不同文件中的对象，猫哥还约定url.jsp.js文件中的对象都放在var url_function=function(){}中。例如test.jsp.js中的对象（变量、函数等）都放如下格式里面，作用就是区分，就像Java语言的命名空间一样，避免混乱。

var test_function=function{
    //放在这里面
}
var test=new test_function();//通过test全局对象区分和调用test.jsp.js中的变量、函数。

三，角色管理功能整体

1，整体设计如图，可以分页显示角色列表，点击新增可以新增一个角色、点击编辑可以修改角色名称、点击删除可以删除角色。

2，文件作用

首先是网页role_manage.jsp，根据之前介绍的js文件规则，role_manage.jsp将调用script文件夹下的role_manage.jsp.js中的脚本。

jsp和js中需要调用后端数据时，都需要通过RoleServlet实现，在RoleServlet中如果要操作数据库，则通过RoleService实现。

注意RoleService通过继承Service基类具备了操作数据库的功能，而Service基类调用Panda ORM
操作数据库，Panda ORM是猫哥自己封装的极简ORM框架，后期在介绍MyBatis时可以轻松的将数据库模块切换到MyBatis中，本系列中重点不是数据库操作，主要是讲EasyUI与后端如何交互来处理业务逻辑，朋友们不要跑题啊。

四，角色管理功能具体代码实现

1，role_manage.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>角色管理</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </head>
  <body>
    <!--列表 -->
    <table id="uiGrid" title="角色列表" class="easyui-datagrid" 
        url="/BankStatistics/RoleServlet?method=list"
        toolbar="#uiTool" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="role_id" width="100">角色编号</th>
            <th field="role_name" width="100">角色名称</th>
        </tr>
    </thead>
    </table>
    <!-- 工具栏 -->
    <div id="uiTool">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="role_manage.CreateOne()">新增</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="role_manage.EditOne()">编辑</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="role_manage.DeleteOne()">删除</a>
    </div>
    <!--详情对话框 -->
    <div id="uiDialog" class="easyui-dialog" 
        closed="true" buttons="#dlg-buttons">
        <div class="ftitle">详细信息</div>
        <form id="formInfo" method="post">
            <div class="fitem">
                <label>角色名称:</label>
                <input name="role_name" class="easyui-validatebox" required="true">
            </div>
        </form>
        <div id="toolInfo">
            <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="role_manage.SaveOne()">保存</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#uiDialog').dialog('close')">取消</a>
        </div>
    </div>
  </body>
</html>

2，调用的role_manage.jsp.js

var role_manage_function=function(){
    this.CreateOne=function(){
        $('#uiDialog').dialog('open').dialog('setTitle','新增');
        $('#formInfo').form('clear');
        url = '/BankStatistics/RoleServlet?method=createOne&ran='+Math.random();
    };
    this.EditOne=function(){
        var row = $('#uiGrid').datagrid('getSelected');
        if (row){
            $('#uiDialog').dialog('open').dialog('setTitle','编辑');
            $('#formInfo').form('load',row);
            url = '/BankStatistics/RoleServlet?method=editOne&id='+row.role_id+'&ran='+Math.random();
        }
    };
    this.SaveOne=function(){
        $('#formInfo').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                if (result.success===false){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#uiDialog').dialog('close');     
                    $('#uiGrid').datagrid('reload');    
                }
            }
        });
    };
    this.DeleteOne=function(){
        var row = $('#uiGrid').datagrid('getSelected');
        if (row){
            $.messager.confirm('确认','确定删除选中项?',function(r){
                if (r){
                        $.post('/BankStatistics/RoleServlet?method=deleteOne&ran='+Math.random()
                            ,{id:row.role_id},
                            function(result){
                                if (result.success===true){
                                    $('#uiGrid').datagrid('reload');    
                                } 
                                else {
                                    $.messager.show({   
                                        title: 'Error',
                                        msg: '删除错误'
                                    });
                                }//ifelse
                            }//functoon
                            ,'json'
                        );//post
                }//if(r)
            });//messager.confirm
        }//if(row)
    };
};

var role_manage=new role_manage_function();

3，RoleServlet

package panda.bank.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;
import panda.bank.entity.Role;
import panda.bank.entity.User;
import panda.bank.service.RoleService;
import panda.bank.service.UserService;
@WebServlet(urlPatterns="/RoleServlet")
public class RoleServlet 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");
        RoleService service=new RoleService(Role.class);
        //获取列表
        if(method.equals("list")){
            int page,rows,offset,total;
            String i_page=request.getParameter("page");
            if(i_page==null)
                page=1;
            else
                page=Integer.parseInt(i_page);
            String i_rows=request.getParameter("rows");
            if(i_rows==null)
                rows=10;
            else
                rows=Integer.parseInt(i_rows);
            offset=(page-1)*rows;
            total=service.getTotalCount();
            List<Role> roles=service.getPage(offset, rows);

            Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map  
            jsonMap.put("total", total);//total键 存放总记录数，必须的  
            jsonMap.put("rows", roles);//rows键 存放每页记录 list  
            String result = JSONObject.fromObject(jsonMap).toString();//格式化result   一定要是JSONObject  
            out.print(result);
        }
        else if(method.equals("createOne")){
            Role role=new Role();
            role.setRole_name(request.getParameter("role_name"));
            service.add(role);
            out.print("{\"success\":true}");
        }   
        else if(method.equals("editOne")){
            String id=request.getParameter("id");
            Role role=service.getByRoleId(id);
            role.setRole_name(request.getParameter("role_name"));
            service.update(role);
            out.print("{\"success\":true}");
        }   
        else if(method.equals("deleteOne")){
            String id=request.getParameter("id");
            service.delete(id);
            out.print("{\"success\":true}");
        }   
        out.flush();
        out.close();
    }
}

4，RoleService

package panda.bank.service;

import java.util.List;

import panda.bank.entity.Role;

public class RoleService extends Service{
    public RoleService(Class entityClass) {
        super(entityClass);
    }

    public int getTotalCount(){
        return operation.selectCount();
    }

    public List getPage(int offset,int rows){
        return operation.selectPage(offset, rows);
    }

    public Role getByRoleId(String id){
        return (Role)operation.selectOne(id);
    }

    public int add(Role role){
        return operation.add(role);
    }

    public int update(Role role){
        return operation.update(role);
    }

    public int delete(String key){
        return operation.delete(key);
    }
}

5，基类Service

package panda.bank.service;
import panda.orm.operation.EntityOperation;
import panda.orm.operation.IOperation;
public class Service {
    protected IOperation operation;
    public Service(Class entityClass){
        operation=new EntityOperation(entityClass);
    }
}

五，总结
挺简单，我就不再一一注释了，对ORM框架部分有疑问的看我之前的文章即可。