SSM整合笔记

最新推荐文章于 2025-05-18 22:44:32 发布

soaring flight

最新推荐文章于 2025-05-18 22:44:32 发布

阅读量228

点赞数

分类专栏： java ssm 文章标签： java

本文链接：https://blog.csdn.net/soarflight_ing/article/details/114788529

版权

java 同时被 2 个专栏收录

2 篇文章

订阅专栏

ssm

1 篇文章

订阅专栏

SSM整合笔记

一、配置准备

在进行配置前，先想清楚要配置哪些文件，如图，除web.xml外，其余三个配置文件名称均可自定义。

如图所示，一共有四个需要手动配置的文件：

web.xml:配置servlet、filter、listener
applicationContext.xml:配置相关的bean，与mybatis整合
SpringMvc.xml:用于配置视图解析器、控制器等
Mybatis.xml:用于生成Mybatis用到的实体类、Mapper接口、Map配置文件 (由于要与spring进行整合，所以在真正配置的时候有些会合并到spring配置文件中配置)

二、配置过程

首先要在pom.xml 中引入一定的依赖包

1.引入依赖

<?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>org.example</groupId>
  <artifactId>SSM-CRUD</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>SSM-CRUD Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <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>
    <spring.version>4.3.6.RELEASE</spring.version>
    <mybatis.version>3.4.2</mybatis.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.13.1</version>
      <scope>test</scope>
    </dependency>

    <!-- 第一部分：Spring 配置-->
    <!-- Spring core -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- Spring DAO -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- Spring mvc -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <!--servlet web-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.0.1</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.4</version>
    </dependency>

    <!-- 第三部分：数据库和mybatis -->
    <!-- 数据库 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.38</version>
    </dependency>
    <!-- 数据库连接池 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.12</version>
    </dependency>
    <!-- MyBatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>
    <!-- mybatis-spring整合包 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.1</version>
    </dependency>
    <!-- 第四部分：日志 -->
    <!-- 实现slf4j接口并整合 -->
    <dependency>
      <groupId>ch.qos.logback</groupId>
      <artifactId>logback-classic</artifactId>
      <version>1.1.1</version>
    </dependency>

    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.0.1</version>
    </dependency>

  </dependencies>

  <build>
    <finalName>SSM-CRUD</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

2.配置web.xml文件

依赖引入完后，先来配置一下Web.xml文件。
首先要明确一下Web.xml中必要配置的一些信息

1.配置Spring 的核心鉴定器ContextLoaderListener

作用：在tomcat启动的时候，创建spring 的工厂类对象，把工厂类对象绑定到tomcat的上下文中，以前写java项目第一步都是创建spring的工厂类对象（如下代码）。而在运行web项目时还是需要Spring的工厂类对象，所以spring就为我们提供了这个监听器来在tomcat启动的时候来实现这些代码。
注意：默认spring会从WEB-INF目录下加载applicationContext.xml作为spring的主配置文件，如果我们不喜欢把主配置文件放到这个地方，我们可以通过手动来指定Spring主配置文件的位置和名称。

2.配置springmvc的前端控制器DispatchServlet

作用：拦截相应的请求交给spring mvc处理。

注意：默认spring mvc会从WEB-INF下去加载[servlet的name]-servlet.xml 这个主配置文件，针对下面代码中的例子主配置文件的名称应该是spring-mvc-servlet.xml. 如果我们不喜欢把主配置文件放到这个地方，我们可以通过手动来指定springMvc主配置文件的位置和名称。

3.配置字符集编码过滤器CharacterEncodingFilter

作用：配置该过滤器拦截所有的资源并设置好编码格式，用来防止中文乱码问题。

注意：该过滤器一定要配置在其他过滤器之前。

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

<!--  ===================================Spring 配置==============================-->

<!--  spring 环境-->
<!--  手动指定spring 主配置文件的位置-->
<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>

<!--  ===================================SpringMVC 配置==============================-->
<!--  配置SpringMVC的前端控制器，负责处理所有请求-->
<servlet>
  <servlet-name>springmvcDispatcher</servlet-name>
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  <!--手动指定SpringMVC主配置文件的位置和名称-->
  <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>springmvcDispatcher</servlet-name>
  <url-pattern>/</url-pattern>
</servlet-mapping>


<!--字符集过滤器,放在所有过滤器之前-->
<filter>
  <filter-name>characterEncodingFilter</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>
  <init-param>
    <param-name>forceRequestEncoding</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>forceResponseEncoding</param-name>
    <param-value>true</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>characterEncodingFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>
  
  <!--配置Rest风格的URI，用于将POST 请求 转换为PUT,DELETE请求-->
  <filter>
    <filter-name>hiddenHttpMethodFilter</filter-name>
    <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>hiddenHttpMethodFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

3.配置SpringMVC.xml文件

这一步中你要先创建一个存放控制器的包。

在改文件中需要明确的配置信息：

1.需要配置扫描器（用于扫描控制器）

作用：识别指定包中含有@Controller注解的类

2.需要配置视图解析器InternalResourceViewResolver

作用：存放在/WEB-INF/下面的内容是不能直接通过request请求的方式请求到的，为了安全性考虑，我们通常会把jsp文件放在WEB-INF目录下，而InternalResourceView在服务器端跳转的方式可以很好的解决这个问题。

InternalResourceViewResolver会把返回的视图名称都解析为InternalResourceView对象，InternalResourceView会把Controller处理器方法返回的模型属性都存放到对应的request属性中，然后通过RequestDispatcher在服务器端把请求forword重定向到目标URL。比如在InternalResourceViewResolver中定义了prefix=/WEB-INF/，suffix=.jsp，然后请求的Controller处理器方法返回的视图名称为test，那么这个时候InternalResourceViewResolver就会把test解析为一个InternalResourceView对象，先把返回的模型属性都存放到对应的HttpServletRequest属性中，然后利用RequestDispatcher在服务器端把请求forword到/WEB-INF/test.jsp。

3.两个标准配置

mvc:default-servlet-handler和 mvc:annotation-driven

作用：能支持springmvc更高级的一些功能，JS303校验，快捷的ajax…映射动态请求，将springmvc不能处理的请求交给tomcat等。

springmvc.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:mvc="http://www.springframework.org/schema/mvc"
       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">

    <!-- 启动spring的一些annotation -->
    <context:annotation-config/>
    <context:component-scan base-package="com.wang" use-default-filters="false">
        <!--只扫描控制器-->
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

    <!-- 配置视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--前缀-->
        <property name="prefix" value="/WEB-INF/views"></property>
        <!--后缀-->
        <property name="suffix" value=".jsp"></property>
    </bean>

    <mvc:annotation-driven/>
    <mvc:default-servlet-handler/>
    
</beans>

4.配置Mybatis.xml文件

在ssm整合中，mybatis被spring整合，mybatis大部分配置都被spring整合到一起，所以此处mybatis就简单配置个别名和驼峰命名。还有必要的分页插件配置。

mybatis.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
        
<configuration>
    <settings>
        <!--驼峰命名-->
        <setting name="mapUnderscoreToCamelCase" value="true"/>
    </settings>
    
    <!--分页插件-->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
    </plugins>
</configuration>

5.配置applicationContext.xml文件

该文件中要实现spring和mybatis的整合，必要配置如下：

配置数据库连接池（使用druid连接池）
配置MyBatis工厂SqlSessionFactory

作用：这是一个工厂类，用于创建sqlSession对象，用来对数据库进行增删改查以及事务操作等。

注意：需要在里面配置数据源和mybatis配置文件的位置以及指定mapper文件的位置。

3.配置Mapper接口的扫描器MapperScannerConfigurer

作用：将mapper接口生成代理注入springIoc容器中。

注意：需要配置其所在的位置。

4.配置事务管理器DataSourceTransactionManager

作用：访问数据库时对数据事务进行管理。

注意：需要配置数据源，另外可以配置tx:annotation-driven用来使事务支持注解。

5.配置扫描器，来扫描除了控制器所在包之外的包

作用：主要用来扫描Service。

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"
       xmlns:tx="http://www.springframework.org/schema/tx" xmlns:mybatis="http://mybatis.org/schema/mybatis-spring"
       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/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd
       http://www.springframework.org/schema/aop
       http://www.springframework.org/schema/aop/spring-aop.xsd
       http://www.springframework.org/schema/cache
       http://www.springframework.org/schema/cache/spring-cache.xsd http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring.xsd">

    <!--配置扫描器，扫描控制器之外的包-->
    <context:component-scan base-package="com.wang">
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

    <!--=======================spring 配置文件，主要配置和业务逻辑有关的==========-->
    <!--===========================数据源，事务控制====================-->

    <!--加载jdbc 参数文件-->
    <context:property-placeholder location="classpath:jdbc.properties"></context:property-placeholder>

    <!--数据库连接池-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}"></property>
        <property name="url" value="${jdbc.url}"></property>
        <property name="username" value="${jdbc.username}"></property>
        <property name="password" value="${jdbc.password}"></property>
    </bean>


    <!--============================配置Spring 和 Mybatis 整合===============================-->
    <!--指定mybatis全局配置文件的位置-->
    <bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--指定mybatis全局配置文件的位置-->
        <property name="configLocation" value="classpath:mybatis.xml"></property>
        <property name="dataSource" ref="dataSource"></property>
        <!--指定mybatis mapper文件的位置-->
        <property name="mapperLocations" value="classpath:mapper/*.xml"></property>
    </bean>

    <!--配置扫描器，将mybatis接口的实现加入到ioc容器中-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer" id="configurer">
        <!--扫描所有的dao 接口实现，加入到ioc中-->
        <property name="basePackage" value="com.wang.dao"></property>
    </bean>

    <!--配置一个可以执行批量的sqlSession-->
    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
        <constructor-arg name="sqlSessionFactory" ref="sessionFactory"></constructor-arg>
        <!--设置批量生成-->
        <constructor-arg name="executorType" value="BATCH"></constructor-arg>
    </bean>


    <!--=================================事务控制配置===============================-->
    <bean id="dataSourceTransactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!--控制数据源-->
        <property name="dataSource" ref="dataSource"></property>
    </bean>

    <!--支持注解驱动的事务管理，指定事务管理器-->
    <tx:annotation-driven transaction-manager="dataSourceTransactionManager"/>
    
</beans>

三、主体部分

1、前端页面

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工列表</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.3.2.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>

<%--    利用ajax请求来获取员工数据--%>
    <script type="text/javascript">
        //全局变量
        var totalPages;
        var currentPage;
        $(function () {
            //页面加载完成后，直接发送一个ajax请求来获取数据,去首页
            to_page(1);
            //点击新增模态框
            $("#add_emp_btn").click(function () {
                //重置模态框信息
                reset_form("#empAddModal form");
                //给部门select下拉框添加信息
                getDepts("select#emp_add_did");
                //点击新增模态框
                $("#empAddModal").modal({
                   backdrop:"static",
                   keyboard:true
                });
            });
            //点击保存用户
            $("#emp_add_save").click(function () {

                //校验表单信息
                if(!validate_add_form_data()){
                    return false;
                }
                //判断用户名是否可用
                if($(this).attr("ajax-value") == "error"){
                    return false;
                }
                var formdata = $("#empAddModal form").serialize();
                $.ajax({
                    url:'${pageContext.request.contextPath}/emp/addEmp',
                    data:formdata,
                    type:'POST',
                    success:function (result) {
                        $('#empAddModal').modal('hide');
                        alert(result.msg);
                        to_page(totalPages + 1);
                    }
                })
            });

            //判断用户名是否可用
            $("#emp_add_name").change(function () {
                var empName = this.value;
                $.ajax({
                   url:'${pageContext.request.contextPath}/emp/checkUser',
                   data:'empName='+empName,
                   type:'GET',
                   success:function (result) {
                        if(result.code == 100){
                            show_validate_info("#emp_add_name","success","用户名可用！")
                            $("#emp_add_save").attr("ajax-value","success");
                        }else if(result.code == 200){
                            show_validate_info("#emp_add_name","error","用户名不可用！")
                            $("#emp_add_save").attr("ajax-value","error");
                        }
                   }
                });
            });

            //为更新按钮绑定单击事件
            $("#emp_edit_save").click(function () {

                //验证邮箱是否合法
                var email = $("#emp_edit_email").val();
                var regEmail = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                if(!regEmail.test(email)){
                    // alert("邮箱格式不正确！");
                    var flag = show_validate_info("#emp_edit_email","error","邮箱格式不正确！");
                    return flag;
                }else{
                    show_validate_info("#emp_edit_email","success","");
                }
                //发送ajax请求更新员工
                $.ajax({
                    url:'${pageContext.request.contextPath}/emp/updateEmp/'+$(this).attr("edit_id"),
                    data:$("#empEditModal form").serialize(),
                    type:'POST',
                    success:function (result) {
                        $('#empEditModal').modal('hide');
                        alert(result.msg);
                        to_page(currentPage);
                    }
                });

            });

            //给checkbox 添加选中按钮
            $("input.select_all_item").click(function () {
                // alert($(this).prop("checked"));
                $("input.select_item").prop("checked",$(this).prop("checked"));
            });

            //给删除按钮添加单击事件
            $("#delete_batch_btn").click(function () {
                var empNames = "";
                var ids = "";
                $.each($("input.select_item:checked"),function () {
                    // alert($(this).parents("tr").find("td:eq(2)").text());
                    var empName = $(this).parents("tr").find("td:eq(2)").text()+",";
                    empNames += empName;
                    var empId = $(this).parents("tr").find("td:eq(1)").text()+"-";
                    ids += empId;

                })
                empNames = empNames.substring(0,empNames.length-1);
                ids = ids.substring(0,ids.length-1);
                var flag = confirm("确认删除 ["+empNames+"] 吗？");
                if(flag){
                    $.ajax({
                       url:'${pageContext.request.contextPath}/emp/deleteBatch/'+ids,
                       type:'GET',
                       success:function (result) {
                            alert(result.msg);
                            to_page(currentPage);
                       }
                    });
                }
            });
        });



        //得到部门列表
        function getDepts(ele) {
            $.ajax({
                url:'${pageContext.request.contextPath}/dept/deptList',
                type:'GET',
                success:function (result) {
                    //重置select下拉框信息
                    $(ele).empty();
                    $.each(result.extend.deptList,function (index,item){
                        var optionEle = $("<option></option>").append(item.dept_name).attr("value",item.dept_id);
                        optionEle.appendTo(ele);
                    });
                }
            });
        }
        //reset方法
        function reset_form(ele) {
            $(ele)[0].reset();
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }
        //校验方法
        function validate_add_form_data() {
            var empName = $("#emp_add_name").val();
            var email = $("#emp_add_email").val();
            var regName = /(^[0-9a-zA-Z|_]{6,20}$)|^[\u4E00-\u9FA5]{2,5}$/;
            if(!regName.test(empName)){
               show_validate_info("#emp_add_name","error","用户名必须为6-16位字符或者2-5位中文");
            }else{
                show_validate_info("#emp_add_name","success","")
            }
            var regEmail = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
            if(!regEmail.test(email)){
                // alert("邮箱格式不正确！");
                var flag = show_validate_info("#emp_add_email","error","邮箱格式不正确！");
                return flag;
            }else{
                show_validate_info("#emp_add_email","success","");
            }
            return true;
        }
        //显式校验信息
        function show_validate_info(ele,status,msg) {
            //清空元素之前的表示
            $(ele).parent().removeClass("has-success has-error");
            $(ele).next("span").text("");
            if(status == "success"){
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            }else if(status=="error"){
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
                return false;
            }
        }
        //跳转到指定页面
        function to_page(pn) {
            currentPage = pn;
            $.ajax({
                url:'${pageContext.request.contextPath}/emp/empList',
                data:'pageNum='+pn,
                type:'GET',
                success:function (result) {
                    totalPages = result.extend.pageInfo.pages;
                    //解析并显示员工数据
                    build_emps_table(result);
                    //构建分页的信息
                    build_page_info(result);
                    //构建分页条
                    build_page_nav(result);
                }
            });
        }
        //构建表格数据
        function build_emps_table(result) {
            $("table tbody#emp_table_info").empty();
            var emps = result.extend.pageInfo.list;
            $.each(emps,function (index,item) {
                    var checkBoxTd = $("<td></td>").append($("<input type='checkbox'>").addClass("select_item"));
                    var empIdTd = $("<td></td>").append(item.emp_id);
                    var empNameTd = $("<td></td>").append(item.emp_name);
                    var empGenderTd = $("<td></td>").append(item.gender);
                    var empEmailTd = $("<td></td>").append(item.email);
                    var deptNameTd = $("<td></td>").append(item.dept.dept_name);

                    var updateButton = $("<button></button>").addClass("btn-success btn-sm edit_btn").append($("<span class=\"glyphicon glyphicon-pencil\" > </span>")).append(" 修改");
                    updateButton.attr("edit_id",item.emp_id);
                    var deleteButton = $("<button></button>").addClass("btn-danger btn-sm delete_btn" ).append("<span class=\"glyphicon glyphicon-trash\" > </span>").append(" 删除");
                    deleteButton.attr("delete_id",item.emp_id);
                    var operateionId = $("<td></td>").append(updateButton).append(" ").append(deleteButton);
                    empTr = $("<tr></tr>").append(checkBoxTd)
                        .append(empIdTd)
                        .append(empNameTd)
                        .append(empGenderTd)
                        .append(empEmailTd)
                        .append(deptNameTd)
                        .append(operateionId).appendTo("table tbody#emp_table_info");
            });
        }
        //构建分页信息
        function build_page_info(result) {
            $("#page_info_area").empty();
            var spaninfopageNum = $("<span class=\"text-danger\"></span>").append(result.extend.pageInfo.pageNum);
            var spaninfototalNum = $("<span class=\"text-danger\"></span>").append(result.extend.pageInfo.pages);
            $("#page_info_area").append("当前为第 ").append(spaninfopageNum).append(" 页 ").append("总共有 ").append(spaninfototalNum).append(" 页");
        }
        //构建分页条信息
        function build_page_nav(result) {
            $("div#page_nav_area").empty();
            var ul = $("<ul></ul>").addClass("pagination");
            //首页和上一页
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
            if(result.extend.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else{
                //给首页和上一页绑定单击事件
                firstPageLi.click(function () {
                    to_page(1);
                });
                prePageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum-1);
                });
            }
            //末页和下一页
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
            if(result.extend.pageInfo.hasNextPage == false){
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            }else{
                //给下一页和末页绑定单击事件
                nextPageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum + 1);
                });
                lastPageLi.click(function () {
                    to_page(result.extend.pageInfo.pages);
                });
            }
            ul.append(firstPageLi).append(prePageLi);
            //添加页码 1 2 3 4 5
            $.each(result.extend.pageInfo.navigatepageNums,function (index,item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href","#"));
                //给li绑定单击事件
                numLi.click(function () {
                    to_page(item);
                });
                if(item == result.extend.pageInfo.pageNum){
                    numLi.addClass("active");
                }
                ul.append(numLi);
            })
            ul.append(nextPageLi).append(lastPageLi);

            var navEle = $("<nav></nav>").append(ul);
            navEle.appendTo("div#page_nav_area");
        }


        //查询员工信息，并显示在修改模态框中
        function getEmpInfo(id){
            //查询员工信息
            $.ajax({
                url:'${pageContext.request.contextPath}/emp/empInfo/'+id,
                type:'GET',
                success:function (result) {
                    empData = result.extend.employee;
                    $("#emp_edit_name").val(empData.emp_name);
                    $("#emp_edit_email").val(empData.email);
                    $("#empEditModal input[name=gender]").val([empData.gender]);
                    $("#empEditModal select").val([empData.d_id]);
                }
            });
        }

        //给修改按钮绑定单击事件
        $(document).on("click",".edit_btn",function () {
            //重置模态框信息
            reset_form("#empEditModal form");
            //给部门列表添加信息
            getDepts("select#emp_edit_did");
            //查询员工信息，并显示在模态框中
            var edit_id = $(this).attr("edit_id");
            getEmpInfo(edit_id);
            //给修改按钮添加edit_id 属性
            $("#emp_edit_save").attr("edit_id",edit_id);
            //点击打开修改模态框
            $("#empEditModal").modal({
                backdrop: "static",
                keyboard: true
            });


        });

        //给删除按钮绑定单击事件
        $(document).on("click",".delete_btn",function () {
            var empName = $(this).parent().parent().find("td:eq(2)").text();
            var flag = confirm("你确定要删除 ["+empName+"] 吗？");
            if(flag){
                $.ajax({
                    url:'${pageContext.request.contextPath}/emp/deleteEmp/'+$(this).attr("delete_id"),
                    type:'GET',
                    success:function (result) {
                        alert(result.msg);
                        to_page(currentPage);
                    }
                });
            }
        });

        //单击单选框事件
        $(document).on("click","input.select_item",function () {
            //匹配所有被选中的复选框
            //alert($("input.select_item").length);
            $("input.select_all_item").prop("checked",$("input.select_item:checked").length == $("input.select_item").length);
        })
    </script>
</head>
<body>

<!--====================新增模态框start========================-->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="emp_add_name" name="emp_name" placeholder="empName">
                            <span class="help-block" id="emp_name_msg"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="emp_add_email" name="email" placeholder="email">
                            <span class="help-block" id="emp_email_msg"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="emp_add_gender1" value="男" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="emp_add_gender2"  value="女"> 女
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label  class="col-sm-2 control-label">department</label>
                        <div class="col-sm-6">
                            <select class="form-control" name="d_id" id="emp_add_did">
                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_add_save">提交</button>
            </div>
        </div>
    </div>
</div>
<!--====================新增模态框end==========================-->

<!--====================修改模态框start========================-->
<div class="modal fade" id="empEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="editModalLabel">员工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="emp_edit_name" name="emp_name" placeholder="empName" disabled="disabled">

                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="emp_edit_email" name="email" placeholder="email">
                            <span class="help-block" id="emp_edit_msg"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="emp_edit_gender1" value="男" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="emp_edit_gender2"  value="女"> 女
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label  class="col-sm-2 control-label">department</label>
                        <div class="col-sm-6">
                            <select class="form-control" name="d_id" id="emp_edit_did">
                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_edit_save">修改</button>
            </div>
        </div>
    </div>
</div>
<!--====================修改模态框end==========================-->


<%--搭建布局--%>
    <div class="container">

        <!--标题部分-->
        <div class="row ">
            <div class="col-md-12">
                <h1>员工管理系统</h1>
            </div>
        </div>
        <!--新增，删除按钮-->
        <div class="row ">

            <div class="col-md-4 col-md-offset-8">
                <button class="btn-success btn-sm" id="add_emp_btn">新增</button>
                <button class="btn-danger btn-sm" id="delete_batch_btn">删除</button>

            </div>
        </div>
        <br>
        <!--表格部分-->
        <div class="row">

            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" class="select_all_item">
                        </th>
                        <th>#</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>邮箱</th>
                        <th>部门</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="emp_table_info">

                </tbody>
            </table>
        </div>
        <!--分页部分-->
        <div class="row">
            <!--分页信息情况-->
            <div class="col-md-4" id="page_info_area"></div>
            <!--分页条-->
            <div class="col-md-6 col-md-offset-2" id="page_nav_area"></div>
        </div>
    </div>
</body>
</html>

2、后端页面

package com.wang.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wang.dao.EmployeeMapper;
import com.wang.pojo.Employee;
import com.wang.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;


import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/emp")
public class EmployeeController {

    @Autowired
    EmployeeService employeeService;

    /**
     * 员工列表信息
     * @param pageNum
     * @return
     */
    @RequestMapping(value = "/empList")
    @ResponseBody
    public Msg empList(@RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum){
        PageHelper.startPage(pageNum,5);
        List<Employee> allEmp = employeeService.getAllEmp();
        PageInfo<Employee> pageInfo = new PageInfo<>(allEmp,5);
        return Msg.success().add("pageInfo",pageInfo);
    }

    /**
     * 添加员工
     * @param employee
     * @return
     */
    @RequestMapping("/addEmp")
    @ResponseBody
    public Msg addEmp(Employee employee){
        int count = employeeService.addEmp(employee);
        System.out.println("count = "+count);
        if(count!=0){
            return Msg.success();
        }
        return Msg.fail();
    }

    /**
     * 检测用户名是否可用
     * @param empName
     * @return
     */
    @RequestMapping("/checkUser")
    @ResponseBody
    public Msg checkUser(@RequestParam("empName") String empName){
        Employee employee = employeeService.checkUser(empName);
        if(employee != null){
            return Msg.fail();
        }else{
            return Msg.success();
        }
    }

    @RequestMapping(value = "/empInfo/{emp_id}",method = RequestMethod.GET)
    @ResponseBody
    public Msg getEmpById(@PathVariable("emp_id") Integer emp_id){
        System.out.println("emp_id="+emp_id);
        Employee employee = employeeService.getEmpById(emp_id);
        if(employee!=null){
            return Msg.success().add("employee",employee);
        }else{
            return Msg.fail();
        }
    }

    /**
     * 员工更新
     * @param employee
     * @return
     */
    @RequestMapping(value = "/updateEmp/{emp_id}",method = RequestMethod.POST)
    @ResponseBody
    public Msg updateEmpById(Employee employee){
        int i = employeeService.updateEmp(employee);
        return Msg.success();
    }

    @RequestMapping("/deleteEmp/{id}")
    @ResponseBody
    public Msg deleteEmpById(@PathVariable("id") Integer id){
        int count = employeeService.deleteEmpById(id);
        return Msg.success();
    }

    @RequestMapping("/deleteBatch/{ids}")
    @ResponseBody
    public Msg deleteBatch(@PathVariable("ids") String ids){
        String[] strs = ids.split("-");
        List<Integer> idList = new ArrayList<>();
        for(String str:strs){
            idList.add(Integer.parseInt(str));
        }
        int count = employeeService.deleteBatch(idList);
        return Msg.success();
    }
//    @RequestMapping(value = "/empList")
//    public String empList(@RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum, Model model){
//        // pageNum:当前页码数，第一次进来时默认为1（首页）
//        PageHelper.startPage(pageNum,5);
//        List<Employee> allEmp = employeeService.getAllEmp();
//        PageInfo<Employee> pageInfo = new PageInfo<>(allEmp,5);
//        System.out.println(pageInfo);
//        model.addAttribute("pageInfo",pageInfo);
//        return "list";
//    }
}

3、运行效果图

在这里插入图片描述