ssm整合CRUD(典藏版)

 

目录

• 前言
• 1 准备工作
• • 1.1 创建工程
  • 1.2 物理建模
  • 1.3 逻辑建模
  • 1.4引入依赖
  • 1.5 加入日志配置文件
• 2 连接数据库并进行测试
• • 2.1 创建jdbc.properties
  • 2.2 创建Spring配置文件
  • 2.3 在Spring配置文件中引入jdbc.properties
  • 2.4 在spring配置文件中配置数据源
  • 2.5 创建junit测试类测试
  • • ①在日志配置文件中为测试类设置日志级别
    • ② 在test目录下创建一个测试类SSMTest
• 3 spring整合mybatis
• • 3.1 创建mybatis的配置文件
  • 3.2 测试mybatis
  • • ① 创建Mapper接口
    • ② 创建mapper配置文件
    • ③ 在junit测试类中装配Mapper接口
  • 3.3 配置spring配置文件
  • 3.4 测试Spring
  • • ①创建Service接口
    • ② 创建Service类
    • ③ 测试
• 4 web.xml
• • 4.1 生成web.xml
  • 4.2 设置web工程
  • 4.3 配置web.xml
• 5 创建SpringMVC的配置文件
• 6 显示首页
• • ① 创建首页对应的视图模板文件
  • ②配置访问首页的view-controller
• 小结
• 7 显示数据列表
• • 7.1 创建EmpHandler类并完成编写
  • • ①首页上设置一个超链接，点击超链接跳转到显示全部数据页面
    • ②在类上标记@Controller注解
    • ③在handler中装配EmpService
  • 7.2 创建逻辑视图对应的视图模板页面
  • • ① 从请求域 读取要显示的数据
    • ②遍历数据集合显示数据
• 8 分页显示数据列表
• • 8.1 环境准备
  • • ① 导入依赖
    • ②在SqlsessionFactoryBean中配置PageHelper插件
  • 8.2在首页添加超链接，需要考虑页码值（pageNo）传入
  • 8.3 service方法中实现分页功能
  • • ①empservice接口
    • ②实现类
  • 8.4 EmpHandler实现
  • 8.5 完成页面显示
• 9 删除操作
• • 9.1 在页面上给每一条记录编写超链接
  • 9.2 转换请求方式，将点击超链接的GET请求转换为最终的DELETE请求
  • 9.3 mapper接口及配置文件
  • 9.4 service接口及实现类
  • 9.5 handler类
• 10 新增操作
• • 10.1 跳转到表单（edit-add.html）
  • • ① 编写超链接
    • ②在springmvc-config.xml中配置
    • ③创建表单所在的视图模板文件（edit-add.html）
  • 10.2 提交表单
  • • ①mapper接口及配置
    • ②serivce方法及实现类
    • ③handler方法
• 11 更新操作（回显+提交）
• • 11.1 跳转到表单页面（emp-edit.html）,回显数据(本质是查询)
  • • ①编写超链接，传参数：empId和pageNum
    • ②mapper接口及配置文件
    • ③ service方法及实现类
    • ④handler方法
    • ④ 创建表单所在的视图模板文件
  • 11.2 提交表单
  • • ①mapper接口及配置文件
    • ② service方法及实现类
    • ③ handler方法
• 总结

 

前言

ssm框架整合之后，我们需要用其进行一个简单的CRUD。那么该如何进行呢？步骤是怎样的呢？本文将会从最开始环境搭建到最后所有功能的开发具体实现，一步步教会你改如何使用SSM框架进行CRUD。让我们开始吧。

---

1 准备工作

1.1 创建工程

本案例使用工具：

工具	版本
IDEA	2021.3
MYSQL	5.0
maven	3.8.4

1. IDEA中创建maven工程，准备好基础包。
   

包名	作用
entity	存放实体类
handler	存放控制器类
service	存放service类和其实现类
mapper	存放mapper接口
test	存放测试类

2. 注意设置maven本地仓库和使用自己的设置(防止都在默认的c盘，导致占用c盘空间过多)
   

1.2 物理建模

物理建模顾名思义就是在数据库中创建一个具体的table表，在数据库中实实在在存在的。那么本文以t-emp表为例。
下图给出数据库名称和表中字段名。

1.3 逻辑建模

物理建模完成之后，我们要在java代码中创建其实体类，即逻辑视图，以便将数据库与java代码进行绑定，便于后续操作。

public class Emp {
    private Integer empId;

    private String empName;

    private Double empSalary;

    public Emp() {
    }

    public Emp(Integer empId, String empName, Double empSalary) {
        this.empId = empId;
        this.empName = empName;
        this.empSalary = empSalary;
    }

    public Integer getEmpId() {
        return empId;
    }

    public void setEmpId(Integer empId) {
        this.empId = empId;
    }

    public String getEmpName() {
        return empName;
    }

    public void setEmpName(String empName) {
        this.empName = empName;
    }

    public Double getEmpSalary() {
        return empSalary;
    }

    public void setEmpSalary(Double empSalary) {
        this.empSalary = empSalary;
    }

    @Override
    public String toString() {
        return "Emp{" +
                "empId=" + empId +
                ", empName='" + empName + '\'' +
                ", empSalary=" + empSalary +
                '}';
    }
}

1.4引入依赖

将整个SSM整合需要的依赖全部用maven配置。其余按需添加

<?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.atguigu.ssm</groupId>
    <artifactId>demo-ssm-test</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>


    <dependencies>
        <!-- SpringMVC -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.3.1</version>
        </dependency>

        <!-- Spring 持久化层所需依赖 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>5.3.1</version>
        </dependency>

        <!-- 日志 -->
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.2.3</version>
        </dependency>

        <!-- ServletAPI -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

        <!-- Spring5和Thymeleaf整合包 -->
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
            <version>3.0.12.RELEASE</version>
        </dependency>

        <!-- Mybatis核心 -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.7</version>
        </dependency>

        <!-- MySQL驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.3</version>
        </dependency>

        <!-- 数据源 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.0.31</version>
        </dependency>

        <!-- junit5 -->
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-api</artifactId>
            <version>5.7.0</version>
            <scope>test</scope>
        </dependency>

        <!-- Spring 的测试功能 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>5.3.1</version>
        </dependency>

        <!-- Mybatis 和 Spring 的整合包 -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.6</version>
        </dependency>
        
        <!--分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.3.1</version>
        </dependency>

    </dependencies>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

</project>

1.5 加入日志配置文件

日志文件对于我们进行调试代码有很好的作用，我们可以使用日志配置文件进行更好的查询到异常问题所在。
注意：配置文件全部放在resources目录下。

logback.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration debug="true">
    <!-- 指定日志输出的位置 -->
    <appender name="STDOUT"
              class="ch.qos.logback.core.ConsoleAppender">
        <encoder>
            <!-- 日志输出的格式 -->
            <!-- 按照顺序分别是：时间、日志级别、线程名称、打印日志的类、日志主体内容、换行 -->
            <pattern>[%d{HH:mm:ss.SSS}] [%-5level] [%thread] [%logger] [%msg]%n</pattern>
        </encoder>
    </appender>

    <!-- 设置全局日志级别。日志级别按顺序分别是：DEBUG、INFO、WARN、ERROR -->
    <!-- 指定任何一个日志级别都只打印当前级别和后面级别的日志。 -->
    <root level="INFO">
        <!-- 指定打印日志的appender，这里通过“STDOUT”引用了前面配置的appender -->
        <appender-ref ref="STDOUT" />
    </root>

    <!-- 根据特殊需求指定局部日志级别 -->
       <logger name="org.springframework.web.servlet.DispatcherServlet" level="DEBUG" />

</configuration>

全局日志级别我们一般都设置为debug。其余根据需求进行设置。比如说test测试类。

---

2 连接数据库并进行测试

2.1 创建jdbc.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:13306/mybatis-example
jdbc.username=root
jdbc.password=abc123

2.2 创建Spring配置文件

spring-persist.xml
创建spring-persist.xml配置文件引入jdbc.properties要注意引入context空间，如果不引入，接下来的操作会报各种错误。比如说：

引入名称空间：

 xmlns:context="http://www.springframework.org/schema/context"
 http://www.springframework.org/schema/context  http://www.springframework.org/schema/context/spring-context.xsd

2.3 在Spring配置文件中引入jdbc.properties

<!--    引入外部文件-->
    <context:property-placeholder location="classpath:jdbc.properties"/>

2.4 在spring配置文件中配置数据源

<!--    装配数据源(使用druid数据库连接池)-->
    <bean id="druidDataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="driverClassName" value="${jdbc.driver}"/>
    </bean>

2.5 创建junit测试类测试

①在日志配置文件中为测试类设置日志级别

    <logger name="src/test/java/com/atguigu/ssm/SSMTest.java" level="DEBUG"/>

② 在test目录下创建一个测试类SSMTest

@SpringJUnitConfig(locations = {"classpath:spring-persist.xml"})
public class SSMTest {
    @Autowired
    private DruidDataSource dataSource;
    
    //使用日志进行输出，需要在logback.xml中设置类的日志级别为DUBUG
   Logger logger =  LoggerFactory.getLogger(getClass());
   
    @Test
    public void testConn() throws SQLException {
        DruidPooledConnection connection = dataSource.getConnection();
        //使用日志级别输出
        logger.debug(connection.toString());
    }
}

@SpringJUnitConfig -----spring整合junit5单元测试注解，指定spring配置文件位置，自动加载上下文。
注意：
我们使用的日志文件导入的包是：org.slf4j.Logge

千万不要导错了。

3 spring整合mybatis

3.1 创建mybatis的配置文件

mybatis-config.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>
<!-- 设置实体类所在包的别名-->
    <typeAliases>
        <package name="com.atguigu.entity"/>
    </typeAliases>
</configuration>

3.2 测试mybatis

① 创建Mapper接口

public interface EmpMapper {
    List<Emp>  getAllEmp();
}

以查询全部数据为例。

② 创建mapper配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.atguigu.mapper.EmpMapper">
    <!--List<Emp>  getAllEmp();-->
<select id="getAllEmp" resultType="Emp">
    select * from t_emp
</select>
</mapper>

③ 在junit测试类中装配Mapper接口

@SpringJUnitConfig(locations = {"classpath:spring-persist.xml"})
public class SSMTest {
    @Autowired
    private DruidDataSource dataSource;
    
    @Autowired
    private EmpMapper empMapper;
    
   //使用日志进行输出，需要在logback.xml中设置类的日志级别为DUBUG
   Logger logger =  LoggerFactory.getLogger(getClass());

    @Test
    public void testList(){
        List<Emp> empList = empMapper.getAllEmp();
        for (Emp emp : empList) {
            System.out.println("emp=" +emp);
        }
    } 
}

3.3 配置spring配置文件

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

<!--    引入外部文件-->
    <context:property-placeholder location="classpath:jdbc.properties"/>
<!--    装配数据源(使用druid数据库连接池)-->
    <bean id="druidDataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="driverClassName" value="${jdbc.driver}"/>
    </bean>

<!--    设置自动扫描service的包-->
    <context:component-scan base-package="com.atguigu.service"/>

<!-- 整合mybatis-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 指定mybatis配置文件-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <!--指定mapper.xml-->
        <property  name="mapperLocations" value="classpath:mappers/*Mapper.xml"/>
        <!--装配数据源-->
        <property name="dataSource" ref="druidDataSource"/>

        <!--配置分页插件-->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <!--设置reasonable为true表示将页码进行合理化ixuzheng，页码的有效范围是1-总页数-->
                            <prop key="reasonable">true</prop>
                            <!--数据库方言，即同样的sql语句在不同数据库中语法会有差异。默认mysql-->
                            <prop key="helperDialect">mysql</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>
    </bean>
<!--配置扫描Mapper接口到IOC容器-->
  <bean id="mapperScannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
      <property name="basePackage" value="com.atguigu.mapper"/>
  </bean>

<!--    配置事务管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="druidDataSource"/>
    </bean>
    
        <!--    开启声明式事务-->
    <tx:annotation-driven  transaction-manager="transactionManager"/>
</beans>

注意：

• 注意开启注解声明式事务需要引入的名称空间为

 xmlns:tx="http://www.springframework.org/schema/tx"
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd ">

• 注意配置sqlsessionFactoryBean的时候，要将mapper.xml中开启对哪一个mapper接口的配置，如果不写，会报错

Error creating bean with name ‘sqlSessionFactory’ defined in class path resource [spring-persist.xml]: Invocation of init method failed; nested exception is org.springframework.core.NestedIOException: Failed to parse mapping resource

应该这样写

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.atguigu.mapper.EmpMapper">  
</mapper>

---

3.4 测试Spring

①创建Service接口

List<Emp> getALL();

② 创建Service类

在需要使用事务的方法上加@Transaction注解，readOnly ----只读

@Service
public class EmpServiceImpl implements EmpService {
    @Autowired
    private EmpMapper empMapper;
    @Override
    @Transactional(readOnly = true)
    public List<Emp> getALL() {
        return empMapper.getAllEmp();
    }
}

③ 测试

 	@Autowired
    private EmpService empService;
	
    @Test
    public void testtx(){
        List<Emp> empList = empService.getALL();
        for (Emp emp : empList) {
            System.out.println("emp=" +emp);
        }
    }

4 web.xml

4.1 生成web.xml

在pom.xml中将当前module的打包方式修改为war。

<packaging>war</packaging>

4.2 设置web工程

4.3 配置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">

<!--    配置contextLoaderListener-->
<!--    使用contextConfigLocation读取配置文件-->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-persist.xml</param-value>
    </context-param>
<!--    配置监听器-->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

<!--配置dispatcherServlet-->
    <servlet>
        <servlet-name>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--    指定springmvc-config.xml-->
        <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:springmvc-config.xml</param-value>
    </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcherServlet</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>

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

5 创建SpringMVC的配置文件

springmvc-config.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 https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--配置自动扫描controller的包-->
    <context:component-scan base-package="com.atguigu.handler"/>

    <!-- 配置 Thymeleaf 的视图解析器 -->
    <bean id="thymeleafViewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
        <property name="order" value="1"/>
        <property name="characterEncoding" value="UTF-8"/>
        <property name="templateEngine">
            <bean class="org.thymeleaf.spring5.SpringTemplateEngine">
                <property name="templateResolver">
                    <bean class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
                        <property name="prefix" value="/WEB-INF/templates/"/>
                        <property name="suffix" value=".html"/>
                        <property name="characterEncoding" value="UTF-8"/>
                        <property name="templateMode" value="HTML5"/>
                    </bean>
                </property>
            </bean>
        </property>
    </bean>


	<!--view-controller-->
    <mvc:view-controller path="/" view-name="index"/>
  <!--默认访问处理器-->
    <mvc:default-servlet-handler/>
    <!--注解驱动-->
    <mvc:annotation-driven/>

</beans>

6 显示首页

① 创建首页对应的视图模板文件

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body style="text-align: center">
<h1>首页</h1>
</body>
</html>

②配置访问首页的view-controller

 <mvc:view-controller path="/" view-name="index"/>

一般默认首页是index。

---

小结

经过前面的六个步骤，基本准备工作已经完成。其中1-3步骤是持久层操作，4-6是表述层操作。

下面让我们进行具体功能开发吧。
在此之前我们先将后面的地址使用Rest风格进行规范下吧。

功能	地址	请求方式
删除	/emp/{empId}/{pageNo}	DELETE
前往新增页面	/emp/add	view-controller
提交新增表单	/emp	POST
前往更新页面	/emp/{empId}/{pageNo}	GET
提交更新表单	/emp	PUT

7 显示数据列表

7.1 创建EmpHandler类并完成编写

①首页上设置一个超链接，点击超链接跳转到显示全部数据页面

	<a th:href="@{/get/all}">显示全部数据</a><br>

②在类上标记@Controller注解

③在handler中装配EmpService

前面我们在进行测试的时候就已经将mapper接口和mapper.xml以及empService接口及实现类中查询全部数据的代码已经完成了，现在我们只需要编写EmpHandler。

@Controller
public class EmpHandler {
        @Autowired
        private EmpService empService;
        @RequestMapping("/get/all")
        public String getALLEmpList(Model model){
        	//调用EmployeeService的方法获取所需数据
            List<Emp> empList = empService.getALL();
            //将EmployeeService的方法返回的数据存入模型
            model.addAttribute("empList",empList);
            //返回逻辑视图
            return "emp-list";
        }

7.2 创建逻辑视图对应的视图模板页面

创建emp-list.html页面来展示全部数据页面。

① 从请求域 读取要显示的数据

②遍历数据集合显示数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    table{
      border-collapse: collapse;
      margin: 0px auto 0px auto;
    }
    table th,td {
      border: 1px solid black;
      text-align: center;
    }
  </style>
</head>
<body>
<table>
  <tr>
    <td>ID</td>
    <td>empName</td>
    <td>empSalary</td>
  </tr>
  <tbody th:if="${#lists.isEmpty(empList)}">
  <tr>
    <td colspan="3">抱歉，没有查询到数据！</td>
  </tr>
  </tbody>
  <tbody th:if="${not #lists.isEmpty(empList)}">
  <tr th:each="emp:${empList}">
    <td th:text="${emp.empId}">这里显示员工ID</td>
    <td th:text="${emp.empName}">这里显示员工姓名</td>
    <td th:text="${emp.empSalary}">这里显示员工工资</td>
  </tr>
  </tbody>
</table>


<a th:href="@{/}">回首页</a>
</body>
</html>

我们还可以设置一个超链接返回首页。

8 分页显示数据列表

当数据很多的时候，我们适当分页并设置简单导航来使得查看数据更加便捷。

8.1 环境准备

① 导入依赖

 <!--分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.3.1</version>
        </dependency>

②在SqlsessionFactoryBean中配置PageHelper插件

<!--配置分页插件-->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <!--设置reasonable为true表示将页码进行合理化ixuzheng，页码的有效范围是1-总页数-->
                            <prop key="reasonable">true</prop>
                            <!--数据库方言，即同样的sql语句在不同数据库中语法会有差异。默认mysql-->
                            <prop key="helperDialect">mysql</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>

8.2在首页添加超链接，需要考虑页码值（pageNo）传入

<a th:href="@{/get/page/1}">显示分页数据</a>

这里我们默认设置点击超链接，跳转页面显示从第一页开始。

8.3 service方法中实现分页功能

①empservice接口

 ```java
 //分页实现
    PageInfo<Emp> getPageInfo(Integer pageNo);
```

②实现类

 @Override
    public PageInfo<Emp> getPageInfo(Integer pageNo) {
        //设置每页显示的数据条数
        int pageSize = 6;

        //设定分页数据，开启分页功能
        PageHelper.startPage(pageNo,pageSize);


        //执行查询功能
        List<Emp> empList = empMapper.getAllEmp();

        //封装为pageInfo对象返回
        return new PageInfo<>(empList);

    }

8.4 EmpHandler实现

 @RequestMapping("/get/page/{pageNo}")
         public String getPage(
        		 //传入页码值
                 @PathVariable("pageNo")Integer pageNo,
                 Model model
        ){
            PageInfo<Emp> pageInfo = empService.getPageInfo(pageNo);
            //分页数据存入模型
            model.addAttribute("pageInfo",pageInfo);
            //返回逻辑视图
            return "emp-page";
        }

注意映射文件中页码值不能写具体数据，那样就直接写死了。

8.5 完成页面显示

创建emp-page.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      table{
        border-collapse: collapse;
        margin: 0px auto 0px auto;
      }
      table th,td {
        border: 1px solid black;
        text-align: center;
      }
    </style>
</head>
<body>
<table>
  <tr>
    <td>ID</td>
    <td>empName</td>
    <td>empSalary</td>
  </tr>
  <tbody th:if="${#lists.isEmpty(pageInfo.list)}">
    <tr>
      <td colspan="3">抱歉，没有查询到数据！</td>
    </tr>
  </tbody>
  <tbody th:if="${not #lists.isEmpty(pageInfo.list)}">
  <tr th:each="emp:${pageInfo.list}">
    <td th:text="${emp.empId}">这里显示员工ID</td>
    <td th:text="${emp.empName}">这里显示员工姓名</td>
    <td th:text="${emp.empSalary}">这里显示员工工资</td>
  </tr>
  <tr>
    <td colspan="3">
      <!--判断是否有上一页-->
      <span th:if="${pageInfo.hasPreviousPage}">
        <a th:href="@{/get/page/1}">首页</a>
        <!-- 不能是@{/get/page/prePage}，如果这样写就变成路径了。-->
      <a th:href="@{/get/page/}+${pageInfo.prePage}">上一页</a>
      </span>


      <!--循环页码，判断是否是当前页[1]-->
      <span th:each="navigator:${pageInfo.navigatepageNums}">
        <!--如果不是，显示可跳转的超链接-->
        <a th:if="${navigator != pageInfo.pageNum}"
           th:href="@{/get/page/}+${navigator}"
           th:text="'['+${navigator}+']'"></a>
        <!--如果是当前页，显示页码-->
        <span th:if="${navigator == pageInfo.pageNum}"
              th:text="'['+${navigator}+']'">
        </span>
      </span>

      <!--判读是否有下一页-->
      <span th:if="${pageInfo.hasNextPage}">
        <a th:href="@{/get/page/}+${pageInfo.nextPage}">下一页</a>
        <a th:href="@{/get/page/}+${pageInfo.pages}">最后一页</a>
      </span>

      <span th:text="${pageInfo.pageNum} + '/' +${pageInfo.pages}"></span>

    </td>
  </tr>
  </tbody>
  <tr>
    <td colspan="3">
      <!--绑定值改变事件响应函数-->
      <input id="jumpToPageNumInput" type="text" name="jumpToPageNum" placeholder="请输入你想直接跳转的页码"/>
    </td>
  </tr>
</table>
<!--编辑点击响应函数-->
<script type="text/javascript">
  // 获取页码文本框的元素对象
  var jumpPageNumEle = document.getElementById("jumpToPageNumInput");
  // 给页码文本框绑定至改变响应函数
  jumpPageNumEle.onchange = function () {
    // 触发值改变响应函数后，获取当前文本框中用户输入的值
    var targetNum = this.value;
    // 检测用户输入的数据是否是数字
    if(isNaN(targetNum)){
      // 如果不是数字则恢复文本框
      this.value="";
      // 当前函数结束
      return ;
    }

    //如果用户输入合法，则跳转页面
    //[[@{/get/page/}]] 表示解析thymeleaf表达式
    window.location.href="[[@{/get/page/}]]" + targetNum;
  }
</script>

<a th:href="@{/}">首页</a><br>

</body>
</html>

9 删除操作

9.1 在页面上给每一条记录编写超链接

 <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>SALARY</th>
      <th>删除</th>
      <th>更新</th>
  </tr>

 <!--设置删除超链接并绑定事件-->
    <td>
      <a onclick="convertMethod(this,event)"
         th:href="@{/emp/}+${emp.empId}+'/'+${pageInfo.pageNum}">删除</a>
    </td>

9.2 转换请求方式，将点击超链接的GET请求转换为最终的DELETE请求

我们的思路是提供一个空表单，作为通用组件。

<!--提供一个空表单，实现请求转换-->
<!--id作用是通过js代码获取表单对象，rest风格要求将post请求，以_method为参数名，delete为参数值转换请求-->
<form id="convertFrom" method="post" >
  <input type="hidden" name="_method" value="delete">
</form>

配套的js代码

<!--给每一个删除超链接绑定单击响应函数-->
<script type="text/javascript">
  function convertMethod(anchorElement,event) {

    //获取超链接原本要访问的目标地址
     var targetURL =anchorElement.href;
    //获取表单对象
     var  formEle = document.getElementById("convertFrom");

     //把超链接要访问的地址设置给表单action属性
    formEle.action = targetURL;

    //提交表单
    formEle.submit();

    //取消控件的默认行为，让超链接不会跳转
    event.preventDefault();
  }
</script>

9.3 mapper接口及配置文件

void deleteEmpByPrimaryId(Integer empId);

<!--    void deleteEmpByPrimaryId(Integer empId);-->
<delete id="deleteEmpByPrimaryId">
    delete from t_emp where  emp_id = #{empId}
</delete>

9.4 service接口及实现类

//删除
    void doDeleteEmpByPrimaryId(Integer empId);

@Override
    public void doDeleteEmpByPrimaryId(Integer empId) {
        empMapper.deleteEmpByPrimaryId(empId);
    }

9.5 handler类

   @RequestMapping(value="/emp/{empId}/{pageNo}",method = RequestMethod.DELETE)
    public String doDelete(
            @PathVariable("empId")Integer empId,
            @PathVariable("pageNo")Integer pageNo
        ){
            empService.doDeleteEmpByPrimaryId(empId);
            return "redirect:/get/page/"+pageNo;
        }

10 新增操作

10.1 跳转到表单（edit-add.html）

① 编写超链接

<a th:href="@{/emp/add}">添加数据</a>

②在springmvc-config.xml中配置

<mvc:view-controller path="/emp/add" view-name="emp-add"/>

③创建表单所在的视图模板文件（edit-add.html）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table{
            border-collapse: collapse;
            margin: 0px auto 0px auto;
        }
        table th,td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<form  th:action="@{/emp}" method="post">
    姓名：<input type="text" name="empName"/><br/>
    工资：<input type="text" name="empSalary"/><br/>
    <button type="submit">保存</button>
</form>

</body>
</html>

10.2 提交表单

①mapper接口及配置

void insert(Emp emp);

<!--     void insert(Emp emp);-->
    <insert id="insert">
        insert into t_emp values(null,#{empName},#{empSalary})
    </insert>

②serivce方法及实现类

//新增
    void doAdd(Emp emp);

 @Override
    public void doAdd(Emp emp) {
        empMapper.insert(emp);
    }

③handler方法

  @RequestMapping(value="/emp",method = RequestMethod.POST)
    public String doSave(
            //使用实体类接收发送过来的请求参数
            Emp emp ){
        empService.save(emp);
        //跳转到最后一页，Integer.MAX_VALUE---为了确保直接前往最后一页
        return "redirect:/get/page/"+Integer.MAX_VALUE;
    }

11 更新操作（回显+提交）

11.1 跳转到表单页面（emp-edit.html）,回显数据(本质是查询)

①编写超链接，传参数：empId和pageNum

 <tr>
    <td>ID</td>
    <td>empName</td>
    <td>empSalary</td>
    <td>删除</td>
    <td>更新</td>
  </tr>

<td>
    <a th:href="@{/emp/}+${emp.empId}+'/'+${pageInfo.pageNum}">更新</a>
  </td>

②mapper接口及配置文件

 Emp selectedEmpByPrimaryId(Integer empId);

<!--    Emp selectedEmpByPrimaryId(Integer empId);-->
<select id="selectedEmpByPrimaryId" resultType="emp">
   select emp_id,emp_name,emp_salary from t_emp where emp_id=#{empId}
</select>

③ service方法及实现类

//查询
    Emp  selectEmpById(Integer empId);

 @Override
    public Emp selectEmpById(Integer empId) {
        
        return empMapper.selectedEmpByPrimaryId(empId);
    }

④handler方法

 @RequestMapping(value="/emp/{empId}/{pageNo}",method = RequestMethod.GET)
    public String  doFormResisPlayer(
            @PathVariable("empId") Integer empId,
            @PathVariable("pageNo") Integer pageNo,
            Model model
    ){
        Emp emp = empService.getEmpById(empId);
        //将实体类对象存入模型
        model.addAttribute("emp",emp);
        //前往表单页面
        return "emp-edit";
    }

④ 创建表单所在的视图模板文件

emp-edit

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>更新</title>
</head>
<body>
<form th:action="@{/emp}" method="post">
    <!--id 页数等都要回显，但是用户不关心，所以用隐藏域-->
  <input type="hidden" name="_method" value="put"/>
  <input type="hidden" name="pageNo" th:value="${pageNo}"/>
  <input type="hidden" name="empId" th:value="${emp.empId}"/>

  姓名：<input type="text" name="empName" th:value="${emp.empName}"/><br/>
  工资：<input type="text" name="empSalary" th:value="${emp.empSalary}"/><br/>
  <button type="submit">更新</button>

</form>
</body>
</html>

11.2 提交表单

①mapper接口及配置文件

void updateByPrimaryKey(Emp emp);

<!--    void updateByPrimaryKey(Emp emp);-->
    <update id="updateByPrimaryKey">
        update t_emp  set emp_name=#{empName},emp_salary=#{empSalary} where emp_id = #{empId}
    </update>

② service方法及实现类

  void doUpdate(Emp emp);

 @Override
    public void doUpdate(Emp emp) {
        
        empMapper.updateByPrimaryKey(emp);
    }

③ handler方法

  @RequestMapping(value = "/emp",method = RequestMethod.PUT)
    public String doUpdate(
            Emp emp,
            @RequestParam("pageNo") Integer pageNo
    ){
        empService.doUpdate(emp);
		//	跳转到最后一页
        return "redirect:/get/page/"+pageNo;
    }

总结

至此我们已经完成了基于ssm框架基本的crud操作，可以将此案例作为一个练手项目。
不足之处还请多多指教。