SSM项目3：权限系统-员工管理

项目搭建

1. 创建maven-webapp工程
2. ssm框架集成（添加依赖，配置文件，web.xml）

<!--单元测试-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>
    <!--lombok-->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.16.6</version>
    </dependency>
    <!-- servlet-api -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <scope>provided</scope>
    </dependency>
    <!--mysql驱动-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.21</version>
    </dependency>
    <!-- druid -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.0.14</version>
    </dependency>
    <!-- common-lang -->
    <dependency>
      <groupId>commons-lang</groupId>
      <artifactId>commons-lang</artifactId>
      <version>2.6</version>
    </dependency>
    <!--spring-test-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${org.springframework.version}</version>
      <scope>test</scope>
    </dependency>
      <!--spring-core-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${org.springframework.version}</version>
    </dependency>
      <!--spring-context-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${org.springframework.version}</version>
    </dependency>
      <!--spring-context-support-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>${org.springframework.version}</version>
    </dependency>
      <!--spring-expression-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-expression</artifactId>
      <version>${org.springframework.version}</version>
    </dependency>
      <!--spring-jdbc-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${org.springframework.version}</version>
    </dependency>
      <!--spring-tx-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${org.springframework.version}</version>
    </dependency>
      <!--spring-web-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${org.springframework.version}</version>
    </dependency>
      <!--spring-aop-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${org.springframework.version}</version>
    </dependency>
      <!--spring-webmvc-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${org.springframework.version}</version>
    </dependency>

    <!-- aspectj -->
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjrt</artifactId>
      <version>1.7.4</version>
    </dependency>
    <!--aspectj weaver-->
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjweaver</artifactId>
      <version>1.7.4</version>
    </dependency>
    <!-- cglib -->
    <dependency>
      <groupId>cglib</groupId>
      <artifactId>cglib</artifactId>
      <version>3.1</version>
    </dependency>
    <!-- mybatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${org.mybatis.version}</version>
    </dependency>
    <!--mybatis-spring-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.2.3</version>
    </dependency>
    <!-- jackson-core -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.5.0</version>
    </dependency>
      <!--jackson-databind-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.5.0</version>
    </dependency>
      <!--jackson-annotations-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.5.0</version>
    </dependency>
    <!--slf4j-api-->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>1.7.6</version>
    </dependency>
    <!--slf4j-log4j12-->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-log4j12</artifactId>
      <version>1.7.6</version>
    </dependency>
      <!--log4j-->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>1.2.17</version>
    </dependency>
    <!--commons-fileupload-->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>
    <!-- jstl -->
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <!-- standard -->
    <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
    </dependency>

配置文件

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>

3. 添加代码生成器

• 添加代码生成器插件pom依赖

<plugin>
        <groupId>org.mybatis.generator</groupId>
        <artifactId>mybatis-generator-maven-plugin</artifactId>
        <version>1.3.2</version>
        <configuration>
          <verbose>true</verbose>
          <overwrite>false</overwrite>
        </configuration>
        <dependencies>
          <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.21</version>
          </dependency>
        </dependencies>
      </plugin>

• 添加代码生成器配置文件（generatorConfig.xml）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
		PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
		"http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<!-- 配置生成器 -->
<generatorConfiguration>

	<context id="mysql" defaultModelType="hierarchical"
			 targetRuntime="MyBatis3Simple">

		<!-- 自动识别数据库关键字，
		默认false，如果设置为true，
		根据SqlReservedWords中定义的关键字列表；
		一般保留默认值，
		遇到数据库关键字（Java关键字），
		使用columnOverride覆盖 -->
		<property name="autoDelimitKeywords" value="false" />
		<!-- 生成的Java文件的编码 -->
		<property name="javaFileEncoding" value="UTF-8" />
		<!-- 格式化java代码 -->
		<property name="javaFormatter"
				  value="org.mybatis.generator.api.dom.DefaultJavaFormatter" />
		<!-- 格式化XML代码 -->
		<property name="xmlFormatter"
				  value="org.mybatis.generator.api.dom.DefaultXmlFormatter" />

		<!-- beginningDelimiter和endingDelimiter：指明数据库的用于标记数据库对象名的符号，
		比如ORACLE就是双引号，MYSQL默认是`反引号； -->
		<property name="beginningDelimiter" value="`" />
		<property name="endingDelimiter" value="`" />

		<!--阻止生成日期和注释-->
		<commentGenerator>
			<property name="suppressDate" value="true" />
			<property name="suppressAllComments" value="true" />
		</commentGenerator>

		<!-- 数据库连接信息 -->
		<jdbcConnection driverClass="com.mysql.jdbc.Driver"
						connectionURL="jdbc:mysql:///mybatis" userId="root" password="0305">
		</jdbcConnection>

		<!-- java类型处理器 用于处理数据库中的类型到Java中的类型，
			 默认使用JavaTypeResolverDefaultImpl；
			 注意一点，默认会先尝试使用Integer，Long，Short等来对应DECIMAL和
			NUMERIC数据类型； -->
		<javaTypeResolver
				type="org.mybatis.generator.internal.types.JavaTypeResolverDefaultImpl">
			<!-- true：使用BigDecimal对应DECIMAL和 NUMERIC数据类型 f
				 alse：默认, scale>0;length>18：使用BigDecimal;
				scale=0;length[10,18]：使用Long； scale=0;length[5,9]：
				使用Integer； scale=0;length<5：使用Short； -->
			<property name="forceBigDecimals" value="false" />
		</javaTypeResolver>


		<!--
		配置domain生成策略
        targetProject:把自动生成的domian放在哪个工程里面
        targetPackage:哪个包下
		-->
		<javaModelGenerator targetPackage="com.itlike.domain"
							targetProject="src/main/java">
			<!-- for MyBatis3/MyBatis3Simple
			自动为每一个生成的类创建一个构造方法，
			构造方法包含了所有的field；而不是使用setter； -->
			<property name="constructorBased" value="false" />

			<!-- for MyBatis3 / MyBatis3Simple
			是否创建一个不可变的类，如果为true，
			那么MBG会创建一个没有setter方法的类，
			取而代之的是类似constructorBased的类 -->
			<property name="immutable" value="false" />

			<!-- 设置是否在getter方法中，
			对String类型字段调用trim()方法 -->
			<property name="trimStrings" value="true" />
		</javaModelGenerator>

		<!--
            配置mapper.xml的生成策略
            targetPackage:把自动生成的mapper放在哪个工程里面
            targetProject:哪个包下
        -->
		<sqlMapGenerator targetPackage="com.itlike.mapper"
						 targetProject="src/main/java">
			<!-- 在targetPackage的基础上，
			根据数据库的schema再生成一层package，
			最终生成的类放在这个package下，默认为false -->
			<property name="enableSubPackages" value="true" />
		</sqlMapGenerator>

		<!--
           mapper接口生成策略
        -->
		<javaClientGenerator targetPackage="com.itlike.mapper"
							 type="XMLMAPPER" targetProject="src/main/java">
			<property name="enableSubPackages" value="true" />
		</javaClientGenerator>

		<table tableName="teacher"></table>

	</context>
</generatorConfiguration>

• 创建员工表
• 生成员工mapper

主页搭建

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="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);
	            }
	        }
	
	    });
	});

员工列表

1.在tree当中指定跳转的地址

2.创建页面跳转控制器,接收请求跳转到Employee页面

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

3.在Employee.jsp页面中引入公共的EasyUI相关js编写数据表格

4.创建Employee.js引入设置-数据表格
数据加载

$(function () {

    $("#dg").datagrid({
        url:"",
        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,
        fitColumn:true,
        rownumbers:true,
        pagination:true
    })

});

日期格式化

Employee.java
	@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
    @DateTimeFormat(pattern = "yyyy-MM-dd")//这个是提交表单的
    private Date inputtime;

格式化状态和管理员(否则会显示1或0)

部门处理：由于部门是一个对象（表），所以在直接显示则会显示[object][object]代表其中2个字段

{field: 'department', title: '部门', width: 100, align: 'center',formatter:function (value, row, index) {
   if (value.name) {
        return value.name;
    }
}},

当然，对于发送的Employee发送的selectAll的语句也要做相应处理,采用左连接查询，employee的dep_id为department的id的外键

columnPrefix：定义的别名用来区分是哪个类的字段，映射对应的属性，区分他们分别属于哪些类。

5.创建部门表
建表语句

	CREATE TABLE `department` (
	  `id` bigint(20) NOT NULL,
	  `name` varchar(10) DEFAULT NULL COMMENT '部门名称 ',
	  `sn` varchar(20) DEFAULT NULL COMMENT '部门编号',
	  `manager_id` bigint(20) DEFAULT NULL,
	  `parent_id` bigint(20) DEFAULT NULL,
	  `state` tinyint(1) DEFAULT NULL,
	  PRIMARY KEY (`id`),
	  KEY `manager_id` (`manager_id`),
	  KEY `parent_id` (`parent_id`),
	  CONSTRAINT `department_ibfk_1` FOREIGN KEY (`manager_id`) REFERENCES `employee` (`id`),
	  CONSTRAINT `department_ibfk_2` FOREIGN KEY (`parent_id`) REFERENCES `department` (`id`)
	) ENGINE=InnoDB DEFAULT CHARSET=utf8;
employee表添加字段dept_id
在代码生成器当中生成相关domain和mapper
修改employee的domian

6.查询部门

7.列表添加工具栏目
1.添加标签

<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>

2.处理Js
	 
toolbar: '#tb',

8.添加对话框弹出
对话框标签以及

employee.jsp
<%--对话框--%>
<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" data-options="required:true,validType:'email'" ></td>
        </tr>
        <tr>
            <td>入职日期:</td>
            <td><input type="text" class="easyui-datebox" required="required"></td>
        </tr>
        <tr>
            <td>部门:</td>
            <td><input id="department" placeholder="请选择部门"/></td>
        </tr>
        <tr>
            <td>是否管理员:</td>
            <td><input id="state" placeholder="是否为管理员"/></td>
        </tr>
    </table>
</div>

employee.js
$("#dialog").dialog({
       width:300,
       height:350,
       closed:true
    });

部门列表展示

设置placehoder(每个下拉框都是一个span)

$("#state").each(function (i) {//遍历
      var span=$(this).siblings("span")[i];
      var targetInput=$(span).find("input:first");
      if (targetInput){
          $(targetInput).attr("placeholder",$(this).attr("placeholder"));
      }
  })

是否管理员下拉列表展示

9.保存
对于table要用form表单标签将其包裹，对name赋值，部门的name赋值为name=“department.id”

employee.jsp
<form id="employeeForm">
        <table align="center" style="border-spacing: 0px 10px">
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="username" class="easyui-validatebox" data-options="required:true"></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="password" class="easyui-validatebox" data-options="required:true"></td>
            </tr>
            <tr>
                <td>手机:</td>
                <td><input type="text"  name="tel"class="easyui-validatebox"></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="text" name="tel" class="easyui-validatebox" data-options="required:true,validType:'email'"></td>
            </tr>
            <tr>
                <td>入职日期:</td>
                <td><input type="text"  name="inputtime" class="easyui-datebox" required="required"></td>
            </tr>
            <tr>
                <td>部门:</td>
                <td><input id="department"  name="department.id" placeholder="请选择部门"/></td>
            </tr>
            <tr>
                <td>是否管理员:</td>
                <td><input id="state"  name="admin" placeholder="是否为管理员"/></td>
            </tr>
        </table>
    </form>

employee.js
/*提交表单*/
 $("#employeeForm").form("submit",{
      url:"saveEmployee",
      success:function (data) {
          console.log(data);
      }
  });

下拉列表设置默认值时, 默认value也要设置上去
	
	
监听保存按钮,提交表单

bug

org.springframework.jdbc.BadSqlGrammarException

在添加password字段后，服务台不断报错cloumn count 与 传进来的字段count不匹配，，将其改为currentpwd或其他非系统字段即可
bug

org.springframework.web.util.NestedServletException: Handler dispatch failed; nested exception is java.lang.NoSuchMethodError：包名+方法（L包名+domain类）：V

对maven进行clean，可能出现了重复依赖

10.编辑
监听编辑按钮点击

保存时判断添加还是编辑

更新业务逻辑
由于添加时密码currentpwd是默认为需要验证的data-options=“required:true”，而编辑时（更新）时是没有密码的，或者说是可以不用验证的，但属性依旧在，所以提交不了，所以需要动态把属性给设置为false，

11.离职
离职按钮点击

 $("#delete").click(function () {
        /*确保你已经选中了一行*/
        var row = $("#dg").datagrid("getSelected");
        if (!row) {
            $.messager.alert("提示", "请选择一行数据");
            return;
        }
        /*提醒用户是否做离职操作*/
        $.messager.confirm("确认","是否做离职操作",function (res) {
            if (res) {
                /*做离职操作*/
                $.get("/updateState?id="+row.id,function (data) {
                   // data = $.parseJSON(data);
                    if (data.success) {
                        $.messager.alert("温馨提示", data.msg);
                        //保存成功 并 保存数据
                        $("#dg").datagrid("reload");
                    } else {
                        $.messager.alert("温馨提示", data.msg);
                    }
                });
            }
        })
    });

post和form提交的之后返回的json数据格式，get会自动转化成json格式，而form不会，若强转可能会出现问题	
业务处理

12.离职按钮禁用
给数据表格绑定选中事件

添加按钮js插件base.js
13.分页控制
EasyUI中可以自动的提交分页参数直接接收分页参数
增加一个domain类来接收一些需要传递到后台的参数

业务处理
就可以得到页面所要分配的页数以及总记录（row）数

14.高级查询
在toolbar上添加搜索框

	<input type="text" name="keyword" style="width: 200px; height: 30px;padding-left: 5px;">
	  <a class="easyui-linkbutton" iconCls="icon-search" id="searchbtn">查询</a>

监听搜索点击

接收参数处理,其中的vo就包括了搜索的关键词keyword

对查询语句进行拼接

重新加载按钮点击