SSM权限管理系统

    1    SSM权限管理系统-项目环境搭建
在创建Maven项目时,添加archetypeCatalog=internal
配置pom.xml的mvean依赖,添加逆向生成工具.
创建需要的目录domain,mapper,service,web,resources
替换web.xml,修改为3.0的约束
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0"
         metadata-complete="false">
    <absolute-ordering/>
    <display-name>web</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

    <!--配置前端控制器-->
    <servlet>
        <servlet-name>SpringMVC</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <!--加载的主配置文件-->
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <!-- 项目启动就加载框架 -->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>SpringMVC</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <!-- 编码过滤器 -->
    <filter>
        <filter-name>CharacterEncoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>


    2.    SSM权限管理-EasyUI主页框架
EasyUI主页
1.在目录当中引入EasyUI相关JS与css
    
2.在首页当中引入所需要的js与css
    
 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/easyui/uimaker/easyui.css">
 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/easyui/uimaker/icon.css">
 <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/easyui/jquery.min.js"></script>
 <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/easyui/jquery.easyui.min.js"></script>
 <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/easyui/easyui-lang-zh_CN.js"></script>
 <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>

3.编写body所首页框架格式
<body class="easyui-layout">
<%--顶部--%>
<div data-options="region:'north'" style="height:100px; background: #ec4e00; padding: 20px 20px">
    <img src="static/images/main_logo.png" alt="">
</div>
<%--底部--%>
<div data-options="region:'south'" style="height:50px; border-bottom: 3px solid #ec4e00">
    <p align="center" style="font-size: 14px">撩课学院</p>
</div>
<%--左侧菜单--%>
<div data-options="region:'west',split:true" style="width:300px;">
    <div id="aa" class="easyui-accordion" data-options="fit:true">
        <div title="菜单" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;">
            <!--tree-->
            <ul id="tree"></ul>
        </div>
        <div title="公告" data-options="iconCls:'icon-reload'" style="padding:10px;">
        </div>
    </div>
</div>
<%--右侧主区域--%>
<div data-options="region:'center'" style="background:#eee;">
    <!--标签-->
    <div id="tabs" style="overflow: hidden" ></div>
</div>
</body>

4.创建首页index.js引入
    $(function () {
        $("#tabs").tabs({
            fit:true
        })
    $('#tree').tree({
            url:'/getTreeData',
            lines:true,
            onSelect: function(node){
                /*在添加之前, 做判断  判断这个标签是否存在 */
                var exists =   $("#tabs").tabs("exists",node.text);
                if(exists){
                    /*存在,就让它选中*/
                    $("#tabs").tabs("select",node.text);
                }else {
                    if (node.url !=''&& node.url !=null){
                        /*如果不存在 ,添加新标签*/
                        $("#tabs").tabs("add",{
                            title:node.text,
                            /*href:node.attributes.url,*/  /*href  引入的是body当中*/
                            content:"<iframe src="+node.url+" frameborder='0' width='100%' height='100%'></iframe>",
                            closable:true
                        })
                    }
                }
            },
            onLoadSuccess: function (node, data) {
                console.log(data[0].children[0].id);
                if (data.length > 0) {
                    //找到第一个元素
                    var n = $('#tree').tree('find', data[0].children[0].id);
                    //调用选中事件
                    $('#tree').tree('select', n.target);
                }
            }
    
        });
    });


    3.    菜单标签跳转
创建3个controller
EmployeeController    MenuController    RoleController
控制拦截url为employee,role,menu

跳转到相应的页面,比如EmployeeController    
@Controller
public class EmployeeController {
    @RequestMapping("/employee")
    public String employee(){
        return "employee";
    }
}

index.js上面的
        onLoadSuccess: function (node, data) {
            console.log(data[0].children[0].id);
            if (data.length > 0) {
                //找到第一个元素
                var n = $('#tree').tree('find', data[0].children[0].id);
                //调用选中事件
                $('#tree').tree('select', n.target);
            }
        }
    });
表示在页面初始时调用一个元素.让页面初始时右侧不为空.
注意需要清空缓存.

    4.    主页数据表格添加
将共用的scrpit和link抽成一个包.
common.jsp
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/easyui/uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/easyui/uimaker/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/easyui/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/base.js"></script>

在index.jsp中引用

<head>
    <title>权限管理系统</title>
    <%@include file="/static/common/common.jsp"%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>
</head>
index.js属于index.jsp独有的.

在employee.jsp中引用
<head>
    <title>Title</title>
    <%@include file="/static/common/common.jsp"%>
</head>

给employee页面添加employee.js
$(function(){
    $("#dg").datagrid({
        url:"/employeeList",
        columns:[[
            {field:'username',title:'姓名',width:100,align:'center'},
            {field:'inputtime',title:'入职时间',width:100,align:'center'},
            {field:'tel',title:'电话',width:100,align:'center'},
            {field:'email',title:'邮箱',width:100,align:'center'},
            {field:'department',title:'部门',width:100,align:'center'},
            {field:'state',title:'状态',width:100,align:'center'},
            {field:'admin',title:'管理员',width:100,align:'center'},
        ]],
        fit:true,   /*是否需要填满*/
        fitColumns:true,    /*是否自动伸缩*/
        rownumbers:true,    /*是否需要显示行号*/
        pagination:true     /*是否需要分页*/
    })

});


    5.    员工表建立
设计数据库的表.
建立新的数据库promission
修改逆向工程的generatorConfig.xml,修改配置中的数据库名和表名.
逆向生成Employee,EmployeeMapper,EmployeeMapper.xml
注意把EmployeeMapper.xml需要放在resources下面新建的com.itlike.mapper.

    6.    员工列表查询
创建一个业务接口service,employeeService.实现类employeeServiceImpl.
将其标记为@Service
public class employeeServiceImpl implements employeeService {
    @Autowired
    private EmployeeMapper employeeMapper;

    @Override
    public void getEmployee() {
        System.out.println("来到业务层");
        /*调用mapper查询员工*/
        employeeMapper.selectAll();
    }
}

修改controller层,注入service,添加@RequestMapping("/employeeList")
EmployeeController
@Controller
public class EmployeeController {
    /*注入业务层*/
    @Autowired
    private employeeService employeeService;

    @RequestMapping("/employee")
    public String employee(){
        return "employee";
    }

    @RequestMapping("/employeeList")
    public void employeeList(){
        /*调用业务层查询员工*/
        employeeService.getEmployee();
    }
}

注意修改db.properties下面的数据库名jdbc.url=jdbc:mysql://localhost:3306/promission?characterEncoding=utf-8


新建一个PageListRes的domain类.
由于easyUI的datagrid需要有total分页和rows数组类型的json
PageListRes类.
@Getter@Setter
public class PageListRes {
    private Long total;
    private List<?> rows=new ArrayList<>();
}


修改employeeServiceImpl,使用pageHelper来进行分页
@Service
public class employeeServiceImpl implements employeeService {
    @Autowired
    private EmployeeMapper employeeMapper;

    @Override
    public PageListRes getEmployee() {
        /*调用mapper查询员工*/
        /*设置分页total*/
        Page<Object> page = PageHelper.startPage(1, 5);
        List<Employee> employees = employeeMapper.selectAll();
        /*封装成pageList*/
        PageListRes pageListRes = new PageListRes();
        pageListRes.setTotal(page.getTotal());
        pageListRes.setRows(employees);
        return pageListRes;
    }
}
修改接口employeeService,将返回值类型改为PageListRes 

前端控制器修改EmployeeController
@Controller
public class EmployeeController {
    /*注入业务层*/
    @Autowired
    private employeeService employeeService;
    @RequestMapping("/employeeList")
    @ResponseBody
    public PageListRes employeeList(){
        /*调用业务层查询员工*/
        PageListRes pageListRes = employeeService.getEmployee();
        return pageListRes;
    }
使用@ResponseBody获取json数据


    7.    日期格式化
由于上一节已经可以取到数据,并且显示在前端页面,但是日期格式不对,需要格式化日期数据
在employee.js做数据格式化
$(function(){
    $("#dg").datagrid({
        url:"/employeeList",
        columns:[[
            {field:'username',title:'姓名',width:100,align:'center'},
            {field:'inputtime',title:'入职时间',width:100,align:'center'},
            {field:'tel',title:'电话',width:100,align:'center'},
            {field:'email',title:'邮箱',width:100,align:'center'},
            {field:'department',title:'部门',width:100,align:'center'},
            {field:'state',title:'状态',width:100,align:'center',formatter:function (value,row,index) {
                    if (row.state){
                        return "在职";
                    }else {
                        return "<font style='color:red'>离职</font>"
                    }
                }},
            {field:'admin',title:'管理员',width:100,align:'center',formatter:function (value,row,index) {
                    if (row.admin){
                        return "是";
                    }else {
                        return "否";
                    }
                }},
        ]],
        fit:true,   /*是否需要填满*/
        fitColumns:true,    /*是否自动伸缩*/
        rownumbers:true,    /*是否需要显示行号*/
        pagination:true     /*是否需要分页*/
    })
});
添加管理员和状态的判断,true为在职和是,false为离职和否.

在domain的实体类中添加注解
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    private Date inputtime;
设置时间格式为GMT+8小时.
或者使用    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")

    8.    部门表创建
包含id和name,在employee表建立外键dep_id
参考表department参考字段id.
逆向生成domain和mapper,mapper.xml.
将xml放在resources下面.


    9.    员工部门关联查询.
修改Employee的部门字段,需要修改为和employee.js的字段相同.
    private Department department;
修改数据库查询语句,使用左连接当两个表id相等时.
  <select id="selectAll" resultMap="BaseResultMap" >
select e.id, e.username, e.inputtime, e.tel, e.email, e.state, e.admin ,
d.id as d_id,
d.`name` as d_name
from employee as e
LEFT JOIN department as d
ON e.dep_id=d.id;
  </select>

修改 <result column="dep_id" property="dep_id" jdbcType="bigint" />为下面的
注意columnPrefix="d_",因为上面使用了as修改了别名,所有要加上d_,不然无法映射
      <association property="department" javaType="com.itlike.domain.Department" columnPrefix="d_">
          <result property="id" column="id"/>
          <result property="name" column="name"/>
      </association>

实现了查询部门名称,接下来再在前端去使用数据.
注意需要删除上面查询语句中的dep_id
注意SQL语句结尾不能添加;  否则sql语句不会执行.

修改前端的js,如果有部门则显示名字,注意使用value.
            {field:'department',title:'部门',width:100,align:'center',formatter:function (value,row,index) {
                    if(value.name){
                        return value.name;
                    }else {
                        return "无部门";
                    }
                }},

在多表查询有字段名相同时,起一个别名,在封装时注意使用columnPrefix.


    10.    添加对话框搭建
列表添加工具栏目
employee.jsp
<body>
<div id="tb">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="add">添加</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" id="edit">编辑</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" id="delete">删除</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" id="reload">刷新</a>
</div>
    <table id="dg"></table>
</body>

修改前端样式,添加对话框
<%--对话框--%>
<div id="dialog">
    <table align="center" style="border-spacing: 0px 10px">
        <tr>
            <td>用户名:</td>
            <td><input type="text" class="easyui-validatebox" data-options="required:true"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" class="easyui-validatebox" data-options="required:true"></td>
        </tr>
        <tr>
            <td>手机:</td>
            <td><input type="text" class="easyui-validatebox" ></td>
        </tr>
        <tr>
            <td>邮箱:</td>
            <td><input type="text" class="easyui-validatebox" ></td>
        </tr>
        <tr>
            <td>入职日期:</td>
            <td><input type="text" class="easyui-datebox"></td>
        </tr>
        <tr>
            <td>部门:</td>
            <td><select id="department"></select></td>
        </tr>
        <tr>
            <td>是否管理员:</td>
            <td><select id="state"></select></td>
        </tr>
    </table>
</div>

添加增删编辑刷新按钮.
employee.js 监听添加按钮点击
    /*对话框*/
    $("#dialog").dialog({
        width:350,
        height:350,
        closed:true        //初始默认为隐藏
    });
    /*监听添加按钮点击*/
    $("#add").click(function () {
        $("#dialog").dialog("open");        //监听点击时open
    })


    11.    下拉列表placeholder处理
修改jsp中的页面,将select改为input,添加placeholder属性
        <tr>
            <td>部门:</td>
            <td><input id="department" placeholder="请选择部门"/></td>
        </tr>
        <tr>
            <td>是否管理员:</td>
            <td><input id="state" placeholder="是否为管理员"/></td>
        </tr>

在js中添加下拉列表,选中id为state和department的行

    /*部门选择 下拉列表*/
    $("#department").combobox({
        width:150,
        panelHeight:'auto'
    });

    /*是否为管理员 下拉列表*/
    $("#state").combobox({
       width:150,
       panelHeight: 'auto',
       textField:'label',
       valueField:'value',
       editable:false,        //editable 是否可以输入
       data:[{
           label:'是',
            value:'true'
        },{
           label:'否',
            value:'false'
        }],
        onLoadSuccess:function () {/*数据加载完毕后回调显示提示*/
           $("#state").each(function(i){
               var span =$(this).siblings("span")[i];
               var targetInput = $(span).find("input:first");
               if(targetInput) {
                   $(targetInput).attr("placeholder", $(this).attr("placeholder"));
               }
           })
        }
    });



    12.    下拉列表部门数据加载
先建立一个controller
DepartmentController
@Controller
public class DepartmentController {
    /*注入DepartmentService业务层*/
    @Autowired
    private DepartmentService departmentService;
    //部门下拉查询部门
    @RequestMapping("/departList")
    @ResponseBody
    public List<Department> departList(){
        List<Department> departmentList = departmentService.getDepartmentList();
        return departmentList;
    }
}
创建它依赖的业务层接口DepartmentService

创建业务层DepartmentServiceImpl
@Service
public class DepartmentServiceImpl implements DepartmentService {
    /*注入mapper*/
    @Autowired
    private DepartmentMapper departmentMapper;
    @Override
    public List<Department> getDepartmentList() {
        List<Department> departments = departmentMapper.selectAll();
        return departments;
    }
}

修改employee.jsp
   /*部门选择 下拉列表*/
    $("#department").combobox({
        width:150,
        panelHeight:'auto',
        editable:false,
        url:'departList',
        textField:'name',
        valueField:'id',
        onLoadSuccess:function () {/*数据加载完毕后回调显示提示*/
            $("#department").each(function(i){
                var span =$(this).siblings("span")[i];
                var targetInput = $(span).find("input:first");
                if(targetInput) {
                    $(targetInput).attr("placeholder", $(this).attr("placeholder"));
                }
            })
        }
    });

    13.    添加表单提交
修改对话框,添加两个按钮
    /*对话框*/
    $("#dialog").dialog({
        width:350,
        height:350,
        closed:true,
        buttons:[{
                /*提交表单*/
                $("#employeeForm").form("submit",{
                    url:"saveEmployee",
                    success:function(data){
                        console.log(data);
                    }
                });
            }
        },{
            text:'关闭',
            handler:function() {
            }
        }]
    });
给.jsp的对话框添加form表单属性
<%--对话框--%>
<div id="dialog">
    <form id="employeeForm">
    </form>
</div>

给对话框内的所有参数添加name属性
<td><input type="text" name="username" class="easyui-validatebox" data-options="required:true"></td>
<td><input type="text" name="password" class="easyui-validatebox" data-options="required:true"></td>

在EmployeeController层添加接收表单
    /*接收员工添加表单*/
    @RequestMapping("/saveEmployee")
    public void saveEmployee(Employee employee){
        System.out.println("提交表单成功");
        System.out.println(employee);
    }
让后台可以接收到属性

    14.    添加表单提交
由于前面设计表时没有添加密码,需要在数据库添加password字段
在controller层
    /*接收员工添加表单*/
    @RequestMapping("/saveEmployee")
    public void saveEmployee(Employee employee){
        /*调用业务层,保存用户*/
        employeeService.saveEmployee(employee);
    }

service层
@Transactional
    /*保存员工*/
    @Override
    public void saveEmployee(Employee employee) {
        employeeMapper.insert(employee);
    }

注意是添加,所以需要添加事务的注释.
修改mapper
    <!--添加员工-->
  <insert id="insert" parameterType="com.itlike.domain.Employee" >
    insert into employee (id, username, password, inputtime,
      tel, email, state, admin, 
      dep_id)
    values (#{id}, #{username},#{password}, #{inputtime},
      #{tel}, #{email}, #{state}, #{admin},
      #{department.id})
  </insert>
由于dep_id是从department.id获取的值,所以修改values.并且添加password字段.

state还未设置,需要添加设置在service层
    /*接收员工添加表单*/
    @RequestMapping("/saveEmployee")
    public void saveEmployee(Employee employee){
        /*调用业务层,保存用户*/
        employee.setState(true);
        employeeService.saveEmployee(employee);
    }

添加一个domain类AjaxRes,用来接收参数.
用来表明接收失败还是成功,还有message.
.parseJSON()函数
用于将格式完好的JSON字符串转为与之对应的JavaScript对象。
AjaxRes
@Component
@Getter@Setter@ToString
public class AjaxRes {
    private boolean success;
    private String msg;
}

EmployeeController
    @Autowired
    private AjaxRes ajaxRes;
    /*接收员工添加表单*/
    @RequestMapping("/saveEmployee")
    @ResponseBody
    public AjaxRes saveEmployee(Employee employee){
        try {
            /*调用业务层,保存用户*/
            employee.setState(true);
            employeeService.saveEmployee(employee);
            ajaxRes.setMsg("保存成功");
            ajaxRes.setSuccess(true);
        }catch (Exception e){
            ajaxRes.setSuccess(false);
            ajaxRes.setMsg("保存失败");
        }
        return ajaxRes;
    }
修改employee.js
                    success:function(data){
                        data = $.parseJSON(data);
                        if(data.success){
                            $.messager.alert("温馨提示",data.msg);
                            /*关闭对话框*/
                            $("#dialog").dialog("close");
                            /*重新加载数据表格*/
                            $("#dg").datagrid("reload");
                        }else {
                            $.messager.alert("温馨提示",data.msg);
                        }
                    }


    15.    编辑数据回显.
先添加关闭按钮的响应
            text:'关闭',
            handler:function() {
                $("#dialog").dialog("close");
            }
然后添加按钮的打开时清空.
    /*监听添加按钮点击*/
    $("#add").click(function () {
        $("#employeeForm").form("clear");    使用.form(clear)
        $("#dialog").dialog("open");
    });
-----------------------------------------------------------------------

    /*监听添加按钮点击*/
    $("#add").click(function () {
        $("#dialog").dialog("setTitle","编辑员工");
        /*清空对话框中的数据*/
        $("#employeeForm").form("clear");
        /*打开对话框*/
        $("#dialog").dialog("open");
    });

   /*员工数据列表*/
    $("#dg").datagrid({
        singleSelect:true,  /*只能选择一行*/
        striped:true,       /*斑马线显示,隔行变色*/}

如果需求是不能编辑密码,那么选择编辑时隐藏密码选项
在jsp页面给tr添加id为password
            <tr id="password">
                <td>密码:</td>
                <td><input type="text" name="password" class="easyui-validatebox" data-options="required:true"></td>
            </tr>

    /*监听编辑按钮点击*/
    $("#edit").click(function () {
        /*获取当前选中的行*/
        var rowData = $("#dg").datagrid("getSelected");
        console.log(rowData);
        if(!rowData){
            $.messager.alert("提示","请选择一行数据进行编辑");
            return;
        }
        /*隐藏密码选项*/
        $("#password").hide();
        /*弹出对话框*/
        $("#dialog").dialog("setTitle","编辑员工");
        $("#dialog").dialog("open");
        /*设置部门,由于部门是department.id,所以需要设置,不能直接回调*/
        rowData["department.id"] = rowData["department"].id;
        /*设置管理员回显*/
        rowData["admin"]=rowData["admin"]+"";
        /*选中数据的回显*/
        $("#employeeForm").form("load",rowData);
    })

    16.    编辑提交
由于是使用的同一个对话框dialog,所以在提交表单之前,需要判断是新增还是添加.
在jsp页面的form标签下添加一个隐藏域
jsp页面
    <form id="employeeForm">
        <%--添加一个隐藏域用于区分添加和编辑--%>
        <input  type="hidden" name="id">
employee.js
            handler:function(){
                /*判断当前是新增还是编辑*/
                var id = $("[name='id']").val();
                /*由于要区分新增和编辑,下面url不能写死.*/
                var url;
                if(id){
                    /*如果有id则为编辑操作*/
                    url = "updateEmployee"
                }else{
                    /*如果没有则为添加*/
                    url = "saveEmployee"
                }
                /*提交表单*/
                $("#employeeForm").form("submit",{
                    url:url,
由于采用的对话框编辑和添加时同一个,而编辑没有密码的选项,但是密码属于data-options="required:true"
是必填项,所以需要取消密码校验.

在employee.js  /*监听编辑按钮点击*/下添加
        /*取消密码的验证*/
        $("[name= 'password']").validatebox({required:false});    //validatebox验证盒设置必需为否
        /*隐藏密码选项*/
        $("#password").hide();

然后在添加时需要去增加密码验证
    /*监听添加按钮点击*/
    $("#add").click(function () {
        /*添加密码验证*/
        $("[name='password']").validatebox({required: true});

在EmployeeController添加    @RequestMapping("/updateEmployee")
    /*编辑员工数据*/
    @RequestMapping("/updateEmployee")
    public void updateEmployee(){
        System.out.println("编辑员工数据");
    }


    17.    更新员工
EmployeeController
    /*编辑员工数据*/
    @RequestMapping("/updateEmployee")
    @ResponseBody
    public AjaxRes updateEmployee(Employee employee){
        try {
            employeeService.updateEmployee(employee);
            ajaxRes.setMsg("编辑成功");
            ajaxRes.setSuccess(true);
        }catch (Exception e){
            ajaxRes.setSuccess(false);
            ajaxRes.setMsg("编辑失败");
        }
        return ajaxRes;
    }

employeeService
    /*编辑员工*/
    public void updateEmployee(Employee employee);

employeeServiceImpl
    @Override
    public void updateEmployee(Employee employee) {
        /*调用业务层更新员工*/
        employeeMapper.updateByPrimaryKey(employee);
    }

    18.    设置离职状态
先监听按钮的点击
    /*设置离职按钮的点击*/
    $("#delete").click(function () {
        /*获取当前选中的行*/
        var rowData =$("#dg").datagrid("getSelected");
        console.log(rowData);
        if(!rowData){
         $.messager.alert("请选择一行数据进行删除");
         return;
        }
        /*提醒用户是否做离职操作*/
        $.messager.confirm("确认","是否做离职操作",function (res) {
            if(res){
                /*点击确认,返回值为true,点击取消返回值为false,做离职的操作*/
                $.get("/updateState?id="+rowData.id,function (data) {
        /* data = $.parseJSON(data);由于前面时使用get方式提交,所有不再需要转换json格式*/
                    if(data.success){
                        $.messager.alert("温馨提示",data.msg);
                        /*重新加载数据表格*/
                        $("#dg").datagrid("reload");
                    }else {
                        $.messager.alert("温馨提示",data.msg);
                    }
                })
            }
        })
    });

EmployeeController
    /*离职操作请求*/
    @RequestMapping("/updateState")
    @ResponseBody
    public AjaxRes updateState(Long id){
        try {
            /*设置员工离职状态*/
            employeeService.updateState(id);
            ajaxRes.setMsg("删除成功");
            ajaxRes.setSuccess(true);
        }catch (Exception e){
            ajaxRes.setSuccess(false);
            ajaxRes.setMsg("删除失败");
        }
        return ajaxRes;
    }

employeeService
    /*离职员工*/
    public void updateState(Long id);

employeeServiceImpl
    @Override
    public void updateState(Long id) {
        /*员工离职状态*/
        employeeMapper.updateState(id);
    }
EmployeeMapper
    void updateState(Long id);

EmployeeMapper.xml
    <!--设置员工离职状态-->
    <update id="updateState">
        update employee set state=false where id=#{id}
    </update>


    19.    离职按钮状态设置
需求,状态设置为离职后,选择该条数据不能再点击离职.
employee.js/*员工数据列表*/下面最后添加

        onClickRow:function (rowIndex,rowData) {
            /*判断当前行是否是离职状态*/
            if(!rowData.state){
                /*是离职,把离职按钮禁用*/
                $("#delete").linkbutton("disable");
            }else{
                /*未离职,启用*/
                $("#delete").linkbutton("enable");
            }
        }

但是disable还是可以点击,esayUI的bug.
添加一个base.js覆盖重写linkbutton方法扩展
把base.js放在js目录下.

    20.    分页添加
添加一个domain QueryVo接收页面的两个参数
由于前端页面设定的form data 有两个参数page:1 rows:10.
QueryVo
@Getter@Setter@ToString
public class QueryVo {
    private int page;
    private int rows;
}
在EmployeeController层
    @RequestMapping("/employeeList")
    @ResponseBody
    public PageListRes employeeList(QueryVo vo){
        /*调用业务层查询员工*/
        PageListRes pageListRes = employeeService.getEmployee(vo);
        return pageListRes;
    }
传入一个vo参数.

employeeService
    /*查询员工*/
    public PageListRes getEmployee(QueryVo vo);

employeeServiceImpl
    @Override
    public PageListRes getEmployee(QueryVo vo) {
        /*调用mapper查询员工*/
        /*设置分页total*/
        Page<Object> page = PageHelper.startPage(vo.getPage(), vo.getRows());

就可以通过页面设置每页的数据条数,自动分页.
        pageList:[10,20,30,50], /*设置每页显示行数*/

    21.    搜索操作
在工具栏添加一个查询框
    <input type="text" name="keyword" style="width: 200px; height: 30px;padding-left: 5px;">
    <a class="easyui-linkbutton" iconCls="icon-search" id="searchbtn">查询</a>

监听按钮点击employee.js
    /*监听搜索按钮点击*/
    $("#searchbtn").click(function () {
        /*获取搜索框内容*/
         var keyword = $("[name='keyword']").val();
        /*重新加载列表 把参数传过去*/
        $("#dg").datagrid("load",{keyword:keyword});
    })

QueryVo中添加
    private String keyword;

employeeServiceImpl在查询中传入参数vo
        List<Employee> employees = employeeMapper.selectAll(vo);

EmployeeMapper添加参数vo
    List<Employee> selectAll(QueryVo vo);

EmployeeMapper.xml改写sql语句,引用sql片段
添加sql片段
  <sql id="where_sql" >
      <where>
          <if test="keyword !=null and keyword!=''">
              and e.username like concat('%',#{keyword},'%')
              or e.tel like concat('%',#{keyword},'%')
              or e.email like concat('%',#{keyword},'%')
          </if>
      </where>
  </sql>
  <!--员工关联部门查询-->
  <select id="selectAll" resultMap="BaseResultMap" >
select e.id, e.username, e.inputtime, e.tel, e.email, e.state, e.admin,
d.id as d_id,
d.`name` as d_name
from employee as e
LEFT JOIN department as d
ON e.dep_id=d.id
<include refid="where_sql"/>    //引用sql片段
order by e.id            //根据id排序
  </select>


    22.    刷新操作
直接在js上添加一个刷新按钮的监控就行了,然后清空搜索框内容,再重载一下.
    /*监听刷新点击*/
    $("#reload").click(function () {
        /*清空搜索内容*/
        var keyword = $("[name='keyword']").val('');
        /*重新加载数据*/
        $("#dg").datagrid("load",{});
    })


    23    角色权限关系表建立

 

转载于:https://www.cnblogs.com/cqbstyx/p/11045784.html

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页