SSM整合详解

青旅半醒 2024-04-03 09:18 57阅读 0赞

#### 文章目录 ####

*  前言
 *  一、SSM
 *  二、整合步骤
 *   *  1.关系梳理
     *  2.整合
     *   *  整合开始
         *   *  导入依赖：
             *  配置mybatis-config.xml
             *  配置数据源db.properties
             *  配置applicationContext.xml
             *  配置springMVC.xml
             *  web.xml配置
             *  搭建前端页面
             *  控制器的实现
             *  实现业务层
             *  实现持久层
             *  测试运行
 *  总结

--------------------

## 前言 ##

本篇记录一下SSM的整合

--------------------

## 一、SSM ##

> 即Spring、SpringMVC、Mybatis三个框架。

## 二、整合步骤 ##

### 1.关系梳理 ###

在整合之前，先梳理一下SSM三个部分之间的关系。  
Mybatis：

> 持久层框架，代替JDBC，需要配置mybatis-config.xml文件和dbproperties，原来的dao和daoImpl文件被mapper接口和mapper.xml映射文件所替代。使用时需要创建 SqlSession，通过 SqlSession获得接口的代理对象。通过接口的代理对象调用mapper接口实现的方法。

spring：

> 开源的应用程序框架，其特点是IOC(控制反转)和AOP(面向切面编程)。IOC实现了bean对象的自动创建和管理，当我们需要某个对象时，无需手动创建。只需要调用在spring容器中注册的名字即可，spring会自动帮我们创建对象。使用spring时，需要配置applicationContext.xml文件。导入相关依赖。

springMVC:

> 其本身是spring的一部分，主要提供的是一套前端解决方案和MVC解耦合分层开发模式，构建在servlet基础上，使jsp请求服务端数据变得更加容易，各部分之间耦合度降低。利于代码的维护，在使用时，主要使用注解开发，主要表现为将原有的servlet用controller代替。

它们之间整合的关系为，mybatis代替持久层，spring提供自动创建对象，springMVC提供了MVC开发模式，并使用注解和controller代替servlet。

### 2.整合 ###

了解了各部分该干的分别是什么就可以着手进行整合了。

*  创建项目
 *  补全项目结构
 *  导入依赖
 *  配置mybatis-config.xml
 *  配置数据源db.properties
 *  配置spring配置文件applicationContext.xml
 *  配置springMVC.xml
 *  配置web.xml文件
 *  搭建前端页面
 *  配置后端控制器
 *  实现业务层
 *  实现持久层
 *  测试运行

#### 整合开始 ####

前两个步骤略

##### 导入依赖： #####

<?xml version="1.0" encoding="UTF-8"?>
    
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
    
      <groupId>com.lzl</groupId>
      <artifactId>SSM_Integrate</artifactId>
      <version>1.0-SNAPSHOT</version>
      <packaging>war</packaging>
    
      <name>SSM_Integrate Maven Webapp</name>
      
      <url>http://www.example.com</url>
    
      <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.7</maven.compiler.source>
        <maven.compiler.target>1.7</maven.compiler.target>
      </properties>
    
      <dependencies>
        
        <dependency>
          <groupId>junit</groupId>
          <artifactId>junit</artifactId>
          <version>4.11</version>
          <scope>test</scope>
        </dependency>
        
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-context</artifactId>
          <version>5.1.6.RELEASE</version>
        </dependency>
        
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-aspects</artifactId>
          <version>5.1.6.RELEASE</version>
        </dependency>
        
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-jdbc</artifactId>
          <version>5.1.6.RELEASE</version>
        </dependency>
        
        <dependency>
          <groupId>org.mybatis</groupId>
          <artifactId>mybatis</artifactId>
          <version>3.5.7</version>
        </dependency>
        
        <dependency>
          <groupId>mysql</groupId>
          <artifactId>mysql-connector-java</artifactId>
          <version>5.1.47</version>
        </dependency>
        
        <dependency>
          <groupId>org.mybatis</groupId>
          <artifactId>mybatis-spring</artifactId>
          <version>1.3.1</version>
        </dependency>
        
        <dependency>
          <groupId>log4j</groupId>
          <artifactId>log4j</artifactId>
          <version>1.2.17</version>
        </dependency>
        
        <dependency>
          <groupId>com.alibaba</groupId>
          <artifactId>druid</artifactId>
          <version>1.2.8</version>
        </dependency>
        
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-webmvc</artifactId>
          <version>5.2.5.RELEASE</version>
        </dependency>
        
        <dependency>
          <groupId>org.projectlombok</groupId>
          <artifactId>lombok</artifactId>
          <version>1.18.12</version>
        </dependency>
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-aop</artifactId>
          <version>5.2.5.RELEASE</version>
        </dependency>
        <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>servlet-api</artifactId>
          <version>2.5</version>
        </dependency>
        
        <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-core</artifactId>
          <version>2.10.3</version>
        </dependency>
        <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.10.3</version>
        </dependency>
      </dependencies>
      <build>
        
        <resources>
          <resource>
            <directory>src/main/java</directory>
            <includes>
              <include>*.xml</include>
              <include>**/*.xml</include>
            </includes>
            <filtering>true</filtering>
          </resource>
        </resources>
      </build>
    
    </project>

##### 配置mybatis-config.xml #####

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE configuration
            PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
            "https://mybatis.org/dtd/mybatis-3-config.dtd">
    
    <configuration>
    <settings>
        <setting name="logImpl" value="LOG4J"/>
    </settings>
    </configuration>

> 由于我们可以使用spring的IOC来对bean进行统一的管理，这里就不需要再配置过多的东西，我们只需要把日志配置放在这里即可

##### 配置数据源db.properties #####

#驱动
    jdbc.driver=com.mysql.jdbc.Driver
    #数据库
    jdbc.url=jdbc:mysql://localhost:3306/test?useSSL=false
    #用户名
    jdbc.username=...
    #密码
    jdbc.password=....
    #初始化连接数，最大，最小连接数
    jdbc.initialSize=5
    jdbc.minIdle=3
    jdbc.maxActive=20
    #等待超时的时间
    jdbc.maxWait=0
    #间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
    jdbc.timeBetweenEvictionRunsMillis=600000
    #一个连接在池中最小生存的时间，单位是毫秒
    jdbc.minEvictableIdleTimeMillis=300000

> 这里我们使用了一个德鲁伊数据库连接池技术，增加我们的项目资源利用率。降低开销。

##### 配置applicationContext.xml #####

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:context="http://www.springframework.org/schema/context"
           xmlns:aop="http://www.springframework.org/schema/aop"
           xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans.xsd
    http://www.springframework.org/schema/context
    https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop https://www.springframework.org/schema/aop/spring-aop.xsd">
        
        <context:component-scan base-package="com.lzl"/>
        
        <context:property-placeholder location="classpath:db.properties"/>
        
        <aop:aspectj-autoproxy></aop:aspectj-autoproxy>
        
        <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
            <property name="driverClassName" value="${jdbc.driver}"/>
            <property name="url" value="${jdbc.url}"/>
            <property name="username" value="${jdbc.username}"/>
            <property name="password" value="${jdbc.password}"/>
            
            <property name="initialSize" value="${jdbc.initialSize}"/>
            <property name="minIdle" value="${jdbc.minIdle}"/>
            <property name="maxActive" value="${jdbc.maxActive}"/>
            
            <property name="maxWait" value="${jdbc.maxWait}"/>
            
            <property name="timeBetweenEvictionRunsMillis" value="${jdbc.timeBetweenEvictionRunsMillis}"/>
            
            <property name="minEvictableIdleTimeMillis" value="${jdbc.minEvictableIdleTimeMillis}"/>
        </bean>
        
        <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
            
            <property name="configLocation" value="classpath:mybatis-config.xml"/>
            
            <property name="dataSource" ref="dataSource"/>
            
            <property name="typeAliasesPackage" value="com.lzl.entity"/>
    
        </bean>
        
        <bean id="mapperScannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
            <property name="basePackage" value="com.lzl.mapper"/>
            <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        </bean>
    
    </beans>

> spring配置文件是整合文件的核心，绝大多数的mybatis配置都可以在这里进行配置。

##### 配置springMVC.xml #####

<beans 	xmlns="http://www.springframework.org/schema/beans"
              xmlns:context="http://www.springframework.org/schema/context"
              xmlns:mvc="http://www.springframework.org/schema/mvc"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://www.springframework.org/schema/beans
    							http://www.springframework.org/schema/beans/spring-beans.xsd
    							http://www.springframework.org/schema/context
    							http://www.springframework.org/schema/context/spring-context.xsd
    							http://www.springframework.org/schema/mvc
    							http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    
        
        <context:component-scan base-package="com.lzl.controller"></context:component-scan>
        
        <mvc:annotation-driven></mvc:annotation-driven>
        
        <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            
            <property name="prefix" value="/"></property>
            
            <property name="suffix" value=".jsp"></property>
        </bean>
    
        
        <mvc:interceptors>
            <mvc:interceptor>
                <mvc:mapping path="/**"/> 
    
                <bean class="com.lzl.interceptor.MyInterceptor"></bean>   
            </mvc:interceptor>
        </mvc:interceptors>
        
        <mvc:resources mapping="/static/**" location="/static/"/>
        <mvc:resources mapping="/managePage/**" location="/managePage/"/>
    </beans>

> 需要注意的是，SpringMVC配置的大多是和前端处理有关的内容，不涉及后端的配置。

##### web.xml配置 #####

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
             version="4.0">
    
    
      
    
      <context-param>
        <param-name>contextConfigLocation</param-name>
        
        <param-value>classpath:applicationContext.xml</param-value>
      </context-param>
    
      
    
      <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
      </listener>
    
      
      <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:springmvc.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>
      
      <servlet>
        <servlet-name>DruidStatView</servlet-name>
        <servlet-class>com.alibaba.druid.support.http.StatViewServlet</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>DruidStatView</servlet-name>
        <url-pattern>/druid/*</url-pattern>
      </servlet-mapping>
      
      <filter>
        <filter-name>encodingFilter</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>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
      </filter-mapping>
    </web-app>

> web.xml文件配置的一般是对SSM整合的补充，是全局的配置。

##### 搭建前端页面 #####

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>电影管理</title>
      <link rel="stylesheet" type="text/css" href="../lib/layui-v2.6.3/css/layui.css"/>
      <style>
        body{
          
          background-color:#eeeeee;
        }
        .layui-table-tool{
          
          padding-top: 10px;
          padding-bottom: 0px;
        }
        .layui-table, .layui-table-view {
          
          margin: 0px 0;
        }
        #transferDiv{
          
          display: none;
          width: 500px;
          margin: 0px auto;
        }
      </style>
    </head>
    <body>
    <div class="layui-card" style="margin-left: 10px; margin-top: 3px; padding-top: 10px; margin-right: 10px; margin-bottom: 0px; ">
      
      <div class="layui-card-header">
    
          <div class="layui-form-item"  id="topBar">
            <form class="layui-form" onsubmit="return false;">
              <label class="layui-form-label">姓名：</label>
              <input type="text" id="emp_name" name="emp_name" style="width:150px;" class="layui-input layui-input-inline"/>
              <label class="layui-form-label">部门：</label>
              <div class="layui-input-inline" style="width:100px;">
                <select id="dept_no" class="option">
                  <option value=""></option>
                </select>
              </div>
              <label class="layui-form-label">状态：</label>
              <div class="layui-input-inline" style="width:100px;">
                <select id="emp_status" >
                  <option value="">--全部--</option>
                  <option value="0">在职</option>
                  <option value="1">离职</option>
                </select>
              </div>
              <label class="layui-form-label">入职时间：</label>
              <input type="text" id="begin" name="begin" style="width:100px;" class="layui-input layui-input-inline"/>
              <label class="layui-form-label" style="width: 20px; text-align: center">至</label>
              <input type="text" id="end" name="end" style="width:100px;" class="layui-input layui-input-inline"/>
    
              
              <label class="layui-form-label" style="width: 20px;"></label>
              <button class="layui-btn layui-btn-sm " id="search"><i class="layui-icon"></i></button>
            </form>
          </div>
      </div>
      
      <div class="layui-card-body" style="margin-top: 0px;padding-top: 0px; height: 528px">
        
        <script type="text/html" id="topTool">
          <button type="button" class="layui-btn layui-btn-xs" lay-event="add" >
            <i class="layui-icon" ></i>添加
          </button>
          <button class="layui-btn layui-btn-xs layui-btn-danger"  lay-event="delAll">
            <i class="layui-icon"></i>批量删除
          </button>
          <button class="layui-btn layui-btn-xs layui-btn-normal"  lay-event="put">
            <i class="layui-icon"></i>入职办理
          </button>
        </script>
        
        <script type="text/html" id="barDemo">
          <button class="layui-btn layui-btn-xs layui-bg-orange" lay-event="edit" id="upbtn"><i class="layui-icon"></i></button>
          <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete" id="dlbtn"><i class="layui-icon"></i></button>
        </script>
        
        <table  class="layui-table" style="margin-top: 0px;" id="tableDemo" lay-filter="table"></table>
      </div>
      
      <div class="layui-form-item" id="upye" style="display:none;">
      <form class="layui-form" onsubmit="return false;" lay-filter="up" id="up">
        <div class="layui-form-item">
          <label class="layui-form-label">姓名：</label>
          <div class="layui-input-block">
            <input type="hidden" name="emp_no" value=""/>
            <input type="text" name="emp_name" class="layui-input"style="width:200px;"/>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别：</label>
          <div class="layui-input-block" style="width:200px;">
            男：<input type="radio" value="男" name="emp_gender" />
            女：<input type="radio"  value="女" name="emp_gender" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">年龄：</label>
          <div class="layui-input-block" style="width:200px;">
            <input type="text" lay-verify="required" name="emp_age"  class="layui-input"/>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">部门：</label>
          <div class="layui-input-block" style="width:200px;">
            <select  name="emp_dept_no" class="option" lay-verify="required"  lay-search="">
              <option value=""></option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">职位：</label>
          <div class="layui-input-block" style="width:200px;">
            <input type="text"  name="emp_position" lay-verify="required" class="layui-input"/>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">薪资：</label>
          <div class="layui-input-block" style="width:200px;">
            <input type="text"  name="emp_salary"lay-verify="required"  class="layui-input"/>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">状态：</label>
          <div class="layui-input-block" style="width:200px;">
            <select name="emp_status" lay-verify="required">
              <option value="">--全部--</option>
              <option value="0">在职</option>
              <option value="1">离职</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block" style="width:200px;">
            <button class="layui-btn layui-btn-sm layui-bg-red" lay-submit="" lay-filter="update">提交</button>
          </div>
        </div>
      </form>
    </div>
      
      
      <div class="layui-form-item" id="addPage" style="display:none;">
        <form class="layui-form" onsubmit="return false;" lay-filter="add"  id="addNew">
          <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-block">
              <input type="hidden" name="emp_no" value=""/>
              <input type="text" name="emp_name" lay-verify="required" class="layui-input"style="width:200px;"/>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-block" style="width:200px;">
              男：<input type="radio" value="男" name="emp_gender"  checked/>
              女：<input type="radio"  value="女" name="emp_gender" />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">年龄：</label>
            <div class="layui-input-block" style="width:200px;">
              <input type="text"  name="emp_age" lay-verify="required" class="layui-input"/>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">部门：</label>
            <div class="layui-input-block" style="width:200px;">
              <select  name="emp_dept_no" lay-verify="required" class="option">
                <option value=""></option>
              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">入职时间：</label>
            <div class="layui-input-block" style="width:200px;">
              <input type="text" name="emp_hire_time" id="year2" class="layui-input Time"/>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">职位：</label>
            <div class="layui-input-block" style="width:200px;">
              <input type="text"  name="emp_position" lay-verify="required" class="layui-input"/>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">薪资：</label>
            <div class="layui-input-block" style="width:200px;">
              <input type="text"  name="emp_salary" lay-verify="required" class="layui-input"/>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block" style="width:200px;">
              <button class="layui-btn layui-btn-sm layui-bg-red" lay-submit="" lay-filter="addBtn">提交</button>
            </div>
          </div>
        </form>
      </div>
      
    </div>
    
    <script type="text/html" id="status">
      {
          {
          #  if(d.emp_status == 0){
           }}
      <span>在职</span>
      {
          {
          #  } else {
           }}
      <span>离职</span>
      {
          {
          #  } }}
    </script>
    
    <div id="transferDiv" style="margin-top: 5px">
      <div id="transferDemo" style="margin-left: 10px;"></div>
    </div>
    <script type="text/javascript" src="../lib/layui-v2.6.3/layui.js" ></script>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
      layui.use(['table','layer','form','laydate','transfer'],function(){
          
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var transfer = layui.transfer;
        var $ = layui.$;
        //渲染时间
        laydate.render({
          
          elem:'#begin',
        });
        laydate.render({
          
          elem:'#end',
        });
        laydate.render({
          
          elem:'#year2',
        });
        //渲染下拉框
        $.post("/department/getDepartment",{
          },function(res){
          
          //遍历集合
          $.each(res.data,function(index,item){
          
            //<option value="item.cid">item.cName</option>
            $(".option").append(new Option(item.dept_name,item.dept_no));
          });
          //渲染layui下拉单
          layui.form.render();
        },"json");
        //表格渲染
        table.render({
          
          elem: '#tableDemo',//指定原始表格元素选择器（推荐id选择器）
          even: true,
          page: true,
          method:'post',
          width: 1250,
          toolbar: '#topTool',
          url:'/employee/getAll',
          cols:[[
            {
          type: 'checkbox', fixed: 'left'},
            {
          fixed:'left',type:'numbers', title:'编号'},
            {
          field:'emp_name', title:'姓名',width:100,align:'center'},
            {
          field:'emp_gender', title:'性别',width:80,align:'center'},
            {
          field:'emp_age', title:'年龄',width:80,align:'center'},
            {
          templet : '<span>{
          {d.department.dept_name}}</span>', title:'部门',align:'center'},
            {
          field:'emp_salary', title:'薪资',align:'center'},
            {
          field:'emp_hire_time', title:'入职时间',align:'center'},
            {
          field:'emp_position', title:'职位',align:'center'},
            {
          templet : '#status',title:'状态',align:'center'},
            {
          fixed: 'right', title:'操作', width:100, align:'center', toolbar: '#barDemo'}
          ]],
          id:"retable",
        });
    
        //重载函数
        active = {
          
              reload : function(){
          
                  table.reload('retable',{
          
                      where:{
          
                          "emp_name" : $("#emp_name").val(), //名字
                          "dept_no" : $("#dept_no").val(), //部门
                          "emp_status" : $("#emp_status").val(), //状态
                          "begin" : $("#begin").val(), //开始年份
                          "end" : $("#end").val(), //结束年份
                      }
                      ,page: {
          
                          curr: $(".layui-laypage-em").next().html() //重新从第当前页开始
                      }
                  });
              }
          }
    
        //多条件查询
        $("#search").click(function(){
          
          active.reload();
        });
        // 头工具栏事件
        table.on('toolbar(table)', function(obj){
          
          var checkStatus = table.checkStatus(obj.config.id)
                  ,data = checkStatus.data; //获取选中的数据
          switch(obj.event){
          
            case 'add':
              layer.open({
          
                type : 1,
                title : '添加数据',
                area : [ '450px', '550px' ],
                content : $('#addPage')
                //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
              });
              break;
            case 'delAll':
              if(data.length === 0){
          
                layer.msg('请至少选择一行');
              } else if(data.length > 1){
          
                $list = checkStatus.data;
                $ids = [];
                for (var i = 0; i < $list.length; i++) {
          
                  $ids[i] = $list[i].emp_no;
                }
                $strIds = ""
                for (var i = 0; i < $ids.length; i++) {
          
                  $strIds += $ids[i]+",";
                }
                layer.confirm("确认删除所有选中行吗？", function(index){
          
                  var delUrl ="/employee/deleteInfo";
                  var strData = {
          
                    "emp_no": $strIds
                  }
                  $.post(delUrl, strData, function(res){
          
                    $r = res;
                    if ($r.code != 0) {
          
                      active.reload();
                      layer.msg($r.msg, {
          
                        icon: 6,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                      }, function(){
          
                      });
                    } else {
          
                      layer.msg($r.msg, {
          
                        icon: 5,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                      }, function(){
          
                      });
                    }
                  }, "json");
                });
              }
              break;
            case 'put':
                layer.open({
          
                  type : 1,
                  title : '员工状态',
                  area : [ '500px', '468px' ],
                  content : $('#transferDiv')
                  //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                //请求穿梭框的数据
                      $.get("/employee/getAllData",{
          },function (resData1){
          //请求所有的数据
                          $data_lift = resData1.data;
                          var alreadyPut = [];//准备接收在职数据
                          //请求在职数据
                          $.get("/employee/getAllPutData",{
          },function (resData2){
          
                            $data_right = resData2.data;
                            if($data_right.length > 0) {
          	//如果有在职
                              for(var i = 0; i < $data_right.length; i++) {
          	//遍历
                                alreadyPut.push($data_right[i].emp_no);	//将在职人员工号添加到数组
                              }
                            }
                            //穿梭框渲染
                            transfer.render({
          
                              elem: '#transferDemo',  //绑定元素
                              title: ['离职', '在职'],//标题
                              showSearch: true,//开启搜索
                              data: $data_lift,//左侧数据
                              value: alreadyPut,//右侧数据
                              parseData: function(r) {
          //数据处理
                                return {
          
                                  "value": r.emp_no,
                                  "title": r.emp_name,
                                }
                              },
                              id: 'transfer_1', //定义索引
                              //穿梭事件
                              onchange: function(obj, index) {
          
                                //obj 被穿梭的数据
                                //index 0 说明数据来自于左边 反之来自于右边
                                if (index == "0") {
          
                                  //入职
                                  $emp_nos1 = "";
                                  for (var i = 0; i < obj.length; i++) {
          
                                    $emp_nos1 += obj[i].value+",";
                                  }
                                  $.post("/employee/putOnData", {
          "emp_no":$emp_nos1}, function (res) {
          
                                    if (res.code != 0) {
          
                                      layer.closeAll();
                                      layer.alert(res.msg, {
          icon: 6});
                                      active.reload();
                                    }else {
          
                                      layer.alert(res.msg);
                                    }
                                  }, "json");
                                } else {
          
                                  //离职
                                  $emp_nos2 = "";
                                  for (var i = 0; i < obj.length; i++) {
          
                                    $emp_nos2 += obj[i].value+",";
                                  }
                                  $.post("/employee/putDownData", {
          "emp_no":$emp_nos2}, function (res) {
          
                                    if (res.code != 0) {
          
                                      layer.closeAll();
                                      layer.alert(res.msg, {
          icon: 6});
                                      active.reload();
                                    }else {
          
                                      layer.alert(res.msg);
                                    }
                                  }, "json");
                                }
                              }
                            });
                          },'json');
                      },'json')
                break;
          };
        });
        //行内监听
        table.on('tool(table)', function(obj){
           //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
          var data = obj.data; //获得当前行数据
          if( obj.event =="edit"){
          
            form.val('up',data);
            layer.open({
          
              type: 1,
              title:"你正在进行修改操作",
              area: ['450px', '500px'],
              content: $('#upye') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
          }else if(obj.event =="delete"){
          
            layer.confirm("确认删除["+ data.emp_name +"]吗？", function(index){
          
              var delUrl ="/employee/deleteInfo";
              var strData = {
          
                "emp_no": data.emp_no
              }
              $.post(delUrl, strData, function(res){
          
                $r = res;
                if ($r.code != 0) {
          
                  active.reload();
                  layer.msg($r.msg, {
          
                    icon: 6,
                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                  }, function(){
          
                  });
                } else {
          
                  layer.msg($r.msg, {
          
                    icon: 5,
                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                  }, function(){
          
                  });
                }
              }, "json");
            });
          };
        });
        //添加实现
        form.on("submit(addBtn)", function() {
          
          //添加请求
          $.post("/employee/addNew", $("#addNew").serialize(), function(res) {
          
            $r = res;
            if ($r.code != 0) {
          
              active.reload();
              layer.closeAll();
              $("#addNew")[0].reset();
              layer.msg($r.msg, {
          
                icon: 6,
                time: 1000 //2秒关闭（如果不配置，默认是3秒）
              }, function(){
          
              });
            }else{
          
              layer.msg($r.msg, {
          icon : 5});
            }
          }, "json");
        });
        //修改实现
        form.on('submit(update)', function(data){
          
          //alert($("#up").serialize());
          $.post('/employee/updateInfo',$("#up").serialize(),function(res){
          
            $r = res;
            //取出表单值用form表单的id
            if($r.code != 0){
          
              active.reload();
              layer.closeAll();
              layer.msg($r.msg, {
          
                icon: 6,
                time: 1000 //2秒关闭（如果不配置，默认是3秒）
              }, function(){
          
              });
            }else{
          
              layer.msg($r.msg, {
          icon : 5});
            }
          },'json')
        });
      });
    </script>
    </body>
    </html>

##### 控制器的实现 #####

package com.lzl.controller;
    
    import com.lzl.entity.Employee;
    import com.lzl.service.EmployeeService;
    import com.lzl.util.EmployeeInfoUtil;
    import com.lzl.util.ResultLayUi;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.HashMap;
    
    /**
     * --效率，是成功的核心关键--
     * --自负，会让每个人都屈膝下跪--
     *
     * @Author lzl
     * @Date 2022/10/2 20:05
     */
    @Controller
    @RequestMapping("/employee")
    public class EmployeeController {
        
        @Autowired
        private EmployeeService service;
    
        @RequestMapping(value = "getAll",method = RequestMethod.POST)
        @ResponseBody
        public ResultLayUi<Employee> getAllByKey(EmployeeInfoUtil infoUtil){
        
            return service.getAllEmployee(infoUtil);
        }
        @RequestMapping(value = "updateInfo",method = RequestMethod.POST)
        @ResponseBody
        public ResultLayUi<Employee> updateInfo(Employee employee){
        
            return service.updateEmployeeInfo(employee);
        }
    
        @RequestMapping(value = "addNew",method = RequestMethod.POST)
        @ResponseBody
        public ResultLayUi<Employee> addNew(Employee employee){
        
            return service.addNewEmployee(employee);
        }
    
        @RequestMapping(value = "deleteInfo",method = RequestMethod.POST)
        @ResponseBody
        public ResultLayUi<Employee> deleteInfo(String emp_no){
        
            return service.deleteEmployeeInfo(emp_no);
        }
    
        @RequestMapping(value = "getAllData",method = RequestMethod.GET)
        @ResponseBody
        public ResultLayUi<Employee> getAllData(){
        
            return service.getAllData();
        }
    
        @RequestMapping(value = "getAllPutData",method = RequestMethod.GET)
        @ResponseBody
        public ResultLayUi<Employee> getAllPutData(){
        
            return service.getPutData_s();
        }
    
        @RequestMapping(value = "putOnData",method = RequestMethod.POST)
        @ResponseBody
        public ResultLayUi<Employee> putOnData(String emp_no){
        
            return service.putOnEmployee_s(emp_no);
        }
    
        @RequestMapping(value = "putDownData",method = RequestMethod.POST)
        @ResponseBody
        public ResultLayUi<Employee> putDownData(String emp_no){
        
            return service.putDownEmployee_s(emp_no);
        }
    }

##### 实现业务层 #####

package com.lzl.service;
    
    import com.lzl.entity.Employee;
    import com.lzl.util.EmployeeInfoUtil;
    import com.lzl.util.ResultLayUi;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;
    
    public interface EmployeeService {
        
        /**
         * 获得所有的员工
         * @return 符合前端解析的json数据 code，msg，count，data
         */
        ResultLayUi<Employee> getAllEmployee(EmployeeInfoUtil infoUtil);
    
        /**
         * 新增员工
         * @param employee
         * @return 受影响行数
         */
        ResultLayUi<Employee> addNewEmployee(Employee employee);
    
        /**
         * 修改数据
         * @param employee 实体
         * @return 受影响行数
         */
        ResultLayUi<Employee> updateEmployeeInfo(Employee employee);
    
        /**
         * 删除数据
         * @param
         * @return
         */
        ResultLayUi<Employee> deleteEmployeeInfo(String emp_nos);
    
        /**
         * 获得所有员工信息
         * @return list集合
         */
        ResultLayUi<Employee> getAllData();
        /**
         * 获得所有在职员工信息
         * @return list集合
         */
        ResultLayUi<Employee> getPutData_s();
    
        /**
         *入职
         * @param params
         * @return 入职成功 1 或者失败 0
         */
        ResultLayUi<Employee> putOnEmployee_s(String params);
        /**
         *离职
         * @param params
         * @return 离职成功 1 或者失败 0
         */
        ResultLayUi<Employee> putDownEmployee_s(String params);
    }

接口实现

package com.lzl.service.impl;
    
    
    import com.lzl.entity.Employee;
    import com.lzl.mapper.EmployeeMapper;
    import com.lzl.service.EmployeeService;
    import com.lzl.util.EmployeeInfoUtil;
    import com.lzl.util.ResultLayUi;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.ArrayList;
    import java.util.List;
    
    @Service
    public class EmployeeServiceImpl implements EmployeeService {
        
        @Autowired
        private EmployeeMapper mapper;
        /**
         * 获得所有的员工
         *
         * @return 符合前端解析的json数据 code，msg，count，data
         */
        @Override
        public ResultLayUi<Employee> getAllEmployee(EmployeeInfoUtil infoUtil) {
        
            List<Employee> list = mapper.getAll(infoUtil);
            int count = mapper.getCount(infoUtil);
            ResultLayUi<Employee> resultLayUi = new ResultLayUi<>();
            if (list.size() > 0){
        
               resultLayUi.setCount(count);
               resultLayUi.setData(list);
            }else {
        
                resultLayUi.setCode(0);
                resultLayUi.setMsg("没有数据");
            }
            return resultLayUi;
        }
    
    
        /**
         * 新增员工
         *
         * @param employee
         * @return 受影响行数
         */
        @Override
        public ResultLayUi<Employee> addNewEmployee(Employee employee) {
        
            ResultLayUi<Employee> resultLayUi = new ResultLayUi<>();
            Integer key = mapper.addNew(employee);
            if (key!=0){
        
                resultLayUi.setCode(1);
                resultLayUi.setMsg("新增成功");
            }else {
        
                resultLayUi.setCode(0);
                resultLayUi.setMsg("新增失败");
            }
            return resultLayUi;
        }
    
        /**
         * 修改数据
         *
         * @param employee
         * @return 受影响行数
         */
        @Override
        public ResultLayUi<Employee> updateEmployeeInfo(Employee employee) {
        
            ResultLayUi<Employee> resultLayUi = new ResultLayUi<>();
            Integer key = mapper.updateInfo(employee);
            if (key!=0){
        
                resultLayUi.setCode(1);
                resultLayUi.setMsg("更新成功");
            }else {
        
                resultLayUi.setCode(0);
                resultLayUi.setMsg("更新失败");
            }
            return resultLayUi;
        }
    
        /**
         * 删除数据
         *
         * @param
         * @return
         */
        @Override
        public ResultLayUi<Employee> deleteEmployeeInfo(String emp_nos) {
        
            ResultLayUi<Employee> resultLayUi = new ResultLayUi<>();
            String[] strList =  emp_nos.split(",");
            //设置一个数组
            ArrayList<String> params = new ArrayList<>();
            for (String s : strList) {
        
                params.add(s);
            }
            Integer key = mapper.deleteInfoByEmp_no(params);
            if (key!=0){
        
                resultLayUi.setCode(1);
                resultLayUi.setMsg("删除成功");
            }else {
        
                resultLayUi.setCode(0);
                resultLayUi.setMsg("删除失败");
            }
            return resultLayUi;
        }
    
        /**
         * 获得系统所有员工
         *
         * @return list集合
         */
        @Override
        public ResultLayUi<Employee> getAllData() {
        
            List<Employee> list = mapper.getAllData_m();
            ResultLayUi<Employee> resultLayUi = new ResultLayUi<>();
            if(list.size()!=0){
        
                resultLayUi.setCode(1);
                resultLayUi.setData(list);
            }else {
        
                resultLayUi.setCode(0);
                resultLayUi.setMsg("没有数据");
            }
            return resultLayUi;
        }
    
        /**
         * 获得所有在职员工
         *
         * @return list集合
         */
        @Override
        public  ResultLayUi<Employee> getPutData_s() {
        
            List<Employee> list = mapper.getPutData_m();
            ResultLayUi<Employee> resultLayUi = new ResultLayUi<>();
            if(list.size()!=0){
        
                resultLayUi.setCode(1);
                resultLayUi.setData(list);
            }else {
        
                resultLayUi.setCode(0);
                resultLayUi.setMsg("没有数据");
            }
            return resultLayUi;
        }
    
        /**
         * 入职
         *
         * @param
         * @return 入职成功或者失败
         */
        @Override
        public ResultLayUi<Employee> putOnEmployee_s(String emp_nos) {
        
            ResultLayUi<Employee> resultLayUi = new ResultLayUi<>();
            String[] strList =  emp_nos.split(",");
            //设置一个数组
            ArrayList<String> params = new ArrayList<>();
            for (String s : strList) {
        
                params.add(s);
            }
            Integer key = mapper.putOnEmployee_m(params);
            if (key!=0){
        
                resultLayUi.setCode(1);
                resultLayUi.setMsg("入职办理成功");
            }else {
        
                resultLayUi.setCode(0);
                resultLayUi.setMsg("入职办理失败");
            }
            return resultLayUi;
        }
    
        /**
         * 离职
         *
         * @param
         * @return 离职成功 1 或者失败 0
         */
        @Override
        public ResultLayUi<Employee> putDownEmployee_s(String emp_nos) {
        
            ResultLayUi<Employee> resultLayUi = new ResultLayUi<>();
            String[] strList =  emp_nos.split(",");
            //设置一个数组
            ArrayList<String> params = new ArrayList<>();
            for (String s : strList) {
        
                params.add(s);
            }
            Integer key = mapper.putDownEmployee_m(params);
            if (key!=0){
        
                resultLayUi.setCode(1);
                resultLayUi.setMsg("离职办理成功");
            }else {
        
                resultLayUi.setCode(0);
                resultLayUi.setMsg("离职办理失败");
            }
            return resultLayUi;
        }
    
    }

##### 实现持久层 #####

package com.lzl.mapper;
    
    import com.lzl.entity.Employee;
    import com.lzl.util.EmployeeInfoUtil;
    import org.apache.ibatis.annotations.Param;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;
    
    /**
     * --效率，是成功的核心关键--
     * --自负，会让每个人都屈膝下跪--
     *
     * @Author lzl
     * @Date 2022/9/20 10:25
     */
    
    public interface EmployeeMapper {
        
        /**
         * 获得所有的员工
         * @return 前端所需要解析的json，code，msg，count，data
         */
        List<Employee> getAll(EmployeeInfoUtil infoUtil);
    
        /**
         * 获得数据总数
         * @return int count
         */
        Integer getCount(EmployeeInfoUtil infoUtil);
    
    
        /**
         * 新增员工数据
         * @param employee
         * @return 受影响行数
         */
        Integer addNew(Employee employee);
    
        /**
         * 修改数据
         * @param employee
         * @return 受影响行数
         */
        Integer updateInfo(Employee employee);
    
        /**
         * 删除数据
         * @param  params
         * @return 受影响行数
         */
        Integer deleteInfoByEmp_no(@Param("emp_nos")ArrayList<String> params);
    
        /**
         * 获得数据
         * @return
         */
        List<Employee> getAllData_m();
    
        /**
         * 获得已入职数据
         * @return
         */
        List<Employee> getPutData_m();
    
        /**
         * 入职
         * @param params
         * @return
         */
        Integer putOnEmployee_m(@Param("emp_nos")ArrayList<String> params);
        /**
         * 离职
         * @param params
         * @return
         */
        Integer putDownEmployee_m(@Param("emp_nos")ArrayList<String> params);
    }

mapper映射文件

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper
            PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
    
    <mapper namespace="com.lzl.mapper.EmployeeMapper">
        
        <cache/>
        
        <resultMap id="empMap" type="employee">
            
            
            
            <id property="emp_no" column="emp_no" jdbcType="INTEGER"/>
            <result property="emp_name" column="emp_name" jdbcType="VARCHAR"/>
            <result property="emp_gender" column="emp_gender" jdbcType="VARCHAR"/>
            <result property="emp_age" column="emp_age" jdbcType="INTEGER"/>
            <result property="emp_dept_no" column="emp_dept_no" jdbcType="INTEGER"/>
            <result property="emp_salary" column="emp_salary" jdbcType="DOUBLE"/>
            <result property="emp_hire_time" column="emp_hire_time" jdbcType="VARCHAR"/>
            <result property="emp_position" column="emp_position" jdbcType="VARCHAR"/>
            <result property="emp_status" column="emp_status" jdbcType="INTEGER"/>
            
            <association property="department" javaType="department">
                <id column="dept_no" property="dept_no"/>
                <result column="dept_name" property="dept_name"/>
            </association>
        </resultMap>
        
        <select id="getAll" resultMap="empMap">
            select e.*,d.dept_no,d.dept_name from employee e
            inner join department d on e.emp_dept_no = d.dept_no
            <where>
                <if test="emp_name !=null and emp_name !=''">
                    and e.emp_name like "%"#{emp_name}"%"
                </if>
                <if test="dept_no !=null and dept_no !=''">
                    and e.emp_dept_no = #{dept_no}
                </if>
                <if test="emp_status !=null and emp_status !=''">
                    and e.emp_status = #{emp_status}
                </if>
                <if test="begin !=null and begin !=''">
                    and e.emp_hire_time  >= #{begin}
                </if>
                <if test="end !=null and end !=''">
                    and e.emp_hire_time <= #{end}
                </if>
            </where>
            order by e.emp_no
            limit #{page},#{limit}
        </select>
        <select id="getCount" resultType="Integer">
            select count(*) from employee e
            inner join department d on e.emp_dept_no = d.dept_no
            <where>
                <if test="emp_name !=null and emp_name !=''">
                    and e.emp_name like "%"#{emp_name}"%"
                </if>
                <if test="dept_no !=null and dept_no !=''">
                    and e.emp_dept_no = #{dept_no}
                </if>
                <if test="emp_status !=null and emp_status !=''">
                    and e.emp_status = #{emp_status}
                </if>
                <if test="begin !=null and begin !=''">
                    and e.emp_hire_time  >= #{begin}
                </if>
                <if test="end !=null and end !=''">
                    and e.emp_hire_time <= #{end}
                </if>
            </where>
        </select>
    
    
    
    
        
        <insert id="addNew" useGeneratedKeys="true" keyColumn="emp_no" keyProperty="emp_no">
            insert into employee(emp_name,emp_gender,emp_age,emp_dept_no,emp_salary,
                emp_hire_time,emp_position)
            values(#{emp_name},#{emp_gender},#{emp_age},#{emp_dept_no},#{emp_salary},
            #{emp_hire_time},#{emp_position});
        </insert>
        <update id="updateInfo">
            update employee
            <set>
                <if test="emp_name != null and emp_name != '' ">
                    emp_name = #{emp_name},
                </if>
                <if test="emp_gender != null and emp_gender != '' ">
                    emp_gender = #{emp_gender},
                </if>
                <if test="emp_age != null and emp_age != '' ">
                    emp_age = #{emp_age},
                </if>
                <if test="emp_dept_no != null and emp_dept_no != '' ">
                    emp_dept_no = #{emp_dept_no},
                </if>
                <if test="emp_salary != null and emp_salary != '' ">
                    emp_salary = #{emp_salary},
                </if>
                <if test="emp_position != null and emp_position != '' ">
                    emp_position = #{emp_position},
                </if>
                <if test="emp_status != null and emp_status != '' ">
                    emp_status = #{emp_status},
                </if>
            </set>
            where emp_no = #{emp_no}
        </update>
        <delete id="deleteInfoByEmp_no">
            delete from employee where emp_no in
            <foreach collection="emp_nos" item="emp_no"
                     open="(" close=")" separator=",">
                #{emp_no}
            </foreach>
        </delete>
        <select id="getAllData_m" resultType="employee">
            select emp_no,emp_name from employee;
        </select>
        <select id="getPutData_m" resultType="employee">
            select emp_no,emp_name from employee where emp_status = 0;
        </select>
        <update id="putOnEmployee_m">
            update employee set emp_status = 0 where emp_no in
            <foreach collection="emp_nos" item="emp_no"
                     open="(" close=")" separator=",">
                #{emp_no}
            </foreach>
        </update>
        <update id="putDownEmployee_m">
            update employee set emp_status = 1 where emp_no in
            <foreach collection="emp_nos" item="emp_no"
                     open="(" close=")" separator=",">
                #{emp_no}
            </foreach>
        </update>
    </mapper>

##### 测试运行 #####

![在这里插入图片描述][c9e20ebcfeec408e8e0b46466c39e352.png]  
看到已经实现了显示所有和分页展示，证明我们已经将SSM整合成功

--------------------

## 总结 ##

在整合中的最大问题就是配置文件的编写和注解的使用，配置文件的编写需要理解每个部分（SSM）在没整合之前干的是哪些事，整合之后，这个事谁来干，这样能保证配置项不会漏掉。

[c9e20ebcfeec408e8e0b46466c39e352.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f99e8e0a84f84786a9f5be1d92388f3d.png