一、SSM整合(配置文件详解)

本文整合环境①数据库版本8.0+;②前端模板引擎使用Thymeleaf,因此配置的是Thymeleaf视图解析器视图解析器③ide使用的是idea④本文为简化代码省略dao层直接再service层

1.1 引入依赖

<packaging>war</packaging>
<properties><spring.version>5.3.2</spring.version></properties>
<dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId><version>${spring.version}</version></dependency><!--springmvc--><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-jdbc</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-test</artifactId><version>${spring.version}</version></dependency><!-- Mybatis核心 --><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.7</version></dependency><!--mybatis和spring的整合包--><dependency><groupId>org.mybatis</groupId><artifactId>mybatis-spring</artifactId><version>2.0.6</version></dependency><!-- 连接池 --><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.0.9</version></dependency><!-- junit测试 --><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test</scope></dependency><!-- MySQL驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.16</version></dependency><!-- log4j日志 --><dependency><groupId>log4j</groupId><artifactId>log4j</artifactId><version>1.2.17</version></dependency><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.2.0</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><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.12.1</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><!-- Spring5和Thymeleaf整合包 --><dependency><groupId>org.thymeleaf</groupId><artifactId>thymeleaf-spring5</artifactId><version>3.0.12.RELEASE</version></dependency>
</dependencies>

1.2 配置web.xml

配置两个过滤器,一个前端控制器,一个spring监听器,设置Spring和SpringMVC的配置文件的自定义位置和名称

<?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的编码过滤器 --><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>forceEncoding</param-name><param-value>true</param-value></init-param></filter><filter-mapping><filter-name>CharacterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- 配置处理请求方式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><!-- 配置SpringMVC的前端控制器 --><servlet><servlet-name>DispatcherServlet</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><!-- 将DispatcherServlet的初始化时间提前到服务器启动时--><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>DispatcherServlet</servlet-name><url-pattern>/</url-pattern></servlet-mapping><!-- 配置Spring的监听器,在服务器启动时加载Spring的配置文件 --><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><!-- 设置Spring的配置文件的自定义位置和名称 --><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring.xml</param-value></context-param><!-- 一共配置了两个过滤器,一个前端控制器,spring的监听器,为spring配置自定义名称和位置-->
</web-app>

1.3 创建spring和springmvc配置文件

1.3.1 springmvc.xml配置文件

将其放到resources目录下

<?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层使用的注解,因为springmvc主要管理控制层,我们只需要扫描控制层即可 --><context:component-scan base-package="com.b0.controller"/><!-- 配置视图解析器:此处使用的Thymeleaf视图解析器--><bean id="viewResolver" 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="templateMode" value="HTML5"/><property name="characterEncoding" value="UTF-8" /></bean></property></bean></property></bean><!-- 配置默认的servlet处理静态资源:为什么交默认servlet?因为tomcat内部的配置servlet就叫default。作用:解决静态资源得不到放行报404错误 --><mvc:default-servlet-handler/><!-- 开启mvc的注解驱动:我们的请求先被前端控制器处理,若无法处理再由默认servlet处理--><mvc:annotation-driven/><!-- 配置视图控制器:为当前的请求直接设置视图名称实现页面跳转。--><mvc:view-controller path="/" view-name="index"/><!-- 三个标签的区别:若只配置mvc:view-controller:只有视图控制器这个路径才会被解析,其他写的控制层的映射都处理不了。所以需要加上标签开启注解驱动,解析控制层映射路径(因为不会再被DispatcherServlet解析)若我们处理静态资源,只有mvc:default-servlet-handler标签:当前所有请求请求都将由默认servlet处理,控制层写的映射就无法被解析(因为不会再被DispatcherServlet解析)mvc:annotation-driven开启的功能:先用DispatcherServlet处理请求,若处理不了,再交给默认的servlet来处理--><!--配置文件上传解析器:文件上传必须配置该参数--><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean><!-- 配置拦截器:下方展示出多种方式使用拦截器,需要使用那种方式自行参考配置--><!--    <bean id="firstInterceptor" class="com.b0.interceptor.FirstInterceptor"></bean>--><!--    <mvc:interceptors>--><!--        <bean class="com.b0.interceptor.FirstInterceptor"></bean>--><!--        <ref bean="firstInterceptor"/>--><!--        <ref bean="secondInterceptor"/>--><!--        <mvc:interceptor>--><!-- 需要拦截的请求的请求路径: /*只能拦截上下文一层目录的请求路径,/**表示拦截所有请求--><!--            <mvc:mapping path="/**"/>--><!-- 配置需要排序拦截的请求:eg:使用/abc的请求不会被拦截--><!--            <mvc:exclude-mapping path="/abc"/>--><!-- 配置拦截器--><!--            <ref bean="firstInterceptor"/>--><!--        </mvc:interceptor>--><!--    </mvc:interceptors>--><!--异常解析器--><!--    <bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">--><!--        <property name="exceptionMappings">--><!--            <props>--><!-- key:设置要处理的异常,value设置出现该异常时要跳转的页面所对应的逻辑视图--><!--                <prop key="java.lang.ArithmeticException">error</prop>--><!--            </props>--><!--        </property>--><!-- 设置共享在请求域中的异常信息的属性名--><!--        <property name="exceptionAttribute" value="ex"></property>--><!--    </bean>--></beans>

1.3.2 spring与mybatis整合

将其放到放到resources目录下

1.编写jdbc.properties文件

jdbc.user=root
jdbc.password=123456
jdbc.url=jdbc:mysql://localhost:3306/ssm?serverTimezone=UTC
jdbc.driver=com.mysql.cj.jdbc.Driver

2.引入日志文件log4j.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE log4j:configuration SYSTEM "log4j.dtd">
<log4j:configuration xmlns:log4j="http://jakarta.apache.org/log4j/"><appender name="STDOUT" class="org.apache.log4j.ConsoleAppender"><param name="Encoding" value="UTF-8" /><layout class="org.apache.log4j.PatternLayout"><param name="ConversionPattern" value="%-5p %d{MM-dd HH:mm:ss,SSS}
%m (%F:%L) \n" /></layout></appender><logger name="java.sql"><level value="debug" /></logger><logger name="org.apache.ibatis"><level value="info" /></logger><root><level value="debug" /><appender-ref ref="STDOUT" /></root>
</log4j:configuration>

3.编写mybatis-config.xml核心配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""https://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration><!--mybatis核心配置文件中的标签必须要按照指定的顺序配置:The content of element type "configuration" must match "(properties?,settings?,typeAliases?,typeHandlers?,objectFactory?,objectWrapperFactory?,reflectorFactory?,plugins?,environments?,databaseIdProvider?,mappers?)"--><!-- 引入数据库配置文件,spring中管理了数据源该配置可以删除 -->
<!--    <properties resource="jdbc.properties"/>--><settings><!-- 全局配置:将数据库字段名中下划线字段转换为驼峰形式的属性。spring中通过configurationProperties属性完成了该配置,此处可删除 --><setting name="mapUnderscoreToCamelCase" value="true"/><!-- 使用分步查询时使用:开启延迟加载 -->
<!--         <setting name="lazyLoadingEnabled" value="true"/> --><!-- 使用分步查询时使用:按需加载 -->
<!--         <setting name="aggressiveLazyLoading" value="false"/> --></settings><!-- 对包取别名,spring中进行了取别名配置该配置可以删除 -->
<!--    <typeAliases>--><!--  eg:name = "com.b0.mybatis.pojo"  -->
<!--        <package name="com.b0.pojo"/>-->
<!--    </typeAliases>--><plugins><!--设置分页插件:spring中plugins完成了该配置,此处可以删除--><plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin></plugins><!-- 配置连接数据库的环境,spring配置数据源以后该配置可以删除-->
<!--    <environments default="development">-->
<!--        <environment id="development">-->
<!--            <transactionManager type="JDBC"/>-->
<!--            &lt;!&ndash;  数据源作用:帮助我们管理数据库的连接&ndash;&gt;-->
<!--            <dataSource type="POOLED">-->
<!--                <property name="driver" value="${jdbc.driver}"/>-->
<!--                <property name="url" value="${jdbc.url}"/>-->
<!--                <property name="username" value="${jdbc.username}"/>-->
<!--                <property name="password" value="${jdbc.password}"/>-->
<!--            </dataSource>-->
<!--        </environment>-->
<!--    </environments>--><!-- 引入mybatis的映射文件:spring中配置了mapperLocations属性就不用配置下面映射-->
<!--    <mappers>--><!-- eg:name = "com.bo.mybatis.mapper" -->
<!--        <package name="com.b0.mapper"/>-->
<!--    </mappers>-->
</configuration>

3.编写spring.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"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"><!-- 扫描组件:扫描除了controller(控制层)以外的包,因为控制层已经交给springmvc管理了--><context:component-scan base-package="com.b0"><!-- 1.以注解的方式排除对控制层的扫描 --><context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/></context:component-scan><!-- 引入jdbc.properties文件 --><context:property-placeholder location="classpath:jdbc.properties"/><!-- 配置spring数据源:将数据源交给spring管理--><bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource"><property name="driverClassName" value="${jdbc.driver}"></property><property name="url" value="${jdbc.url}"></property><property name="username" value="${jdbc.user}"></property><property name="password" value="${jdbc.password}"></property></bean><!--配置事务管理器:这个就是一个切面--><bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><property name="dataSource" ref="dataSource"></property></bean><!-- 开启事务的注解驱动:将通知作用于连接点将使用注解@Transactionl表示的方法或类中所有的方法进行事务管理--><tx:annotation-driven transaction-manager="transactionManager"/><!--配置SqlSessionFactoryBean:是一个factoryBean,是一个工厂bean,当我们将其配置到IOC容器后,我们可以直接获取工厂bean提供的对象,而不是factoryBean本身的这个对象--><!-- 也就是我们配置以后可以直接从IOC容器获取SqlSessionFactory对象,即可以在类中定义该实体类并注入它,注入以后就可以直接使用--><bean class="org.mybatis.spring.SqlSessionFactoryBean"><!--设置我们当前mybatis核心配置文件的路径,引入mybatis核心配置文件--><property name="configLocation" value="classpath:mybatis-config.xml"></property><!-- 下方也可以通过spring来配置mybatis核心配置文件,上方引入的文件就可以删除--><!--  设置数据源  --><property name="dataSource" ref="dataSource"></property><!-- 设置类型别名所对应的包,即对包取别名--><property name="typeAliasesPackage" value="com.b0.pojo"></property><!--  全局配置,替代mybatis中settings标签:将数据库字段名中下划线字段转换为驼峰形式的属性 -->
<!--        <property name="configurationProperties">-->
<!--            <map>-->
<!--                <entry key="mapUnderscoreToCamelCase" value="true"></entry>-->
<!--            </map>-->
<!--        </property>--><!-- 配置插件:此处配置分页插件-->
<!--        <property name="plugins">-->
<!--            <array>-->
<!--                <bean class="com.github.pagehelper.PageInterceptor"></bean>-->
<!--            </array>-->
<!--        </property>--><!--若我们映射文件(*Mapper.xml)与*Mapper.java路径一致,是可以不设置下面参数,路径不一致时需要设置映射因为我们在下方MapperScannerConfigurer的bean中设置的路径是我们两处(*.java,*.xml)com.b0.mapper的路径--><!-- <property name="mapperLocations" value="classpath:mappers/*.xml"></property>--></bean><!-- 开启Mapper扫描:它可以把我们当前设置的包下的所有mapper接口,通过上面bean提供的SqlSessionFactory所创建出来的SqlSession通过这些SqlSession来获取com.b0.mapper这个包下面所有的mapper接口的代理类对象并且将这些对象交给IOC容器管理这个标签配置好以后,在对应service中自动装配xxxMapper接口就可以,(因为交给IOC管理会给我们自)就不需要再获取SqlSessionFactory,SqlSession,不需要再通过getMapper获取mapper对象,这个过程在我们下方配置的bean中全部都完成了有了这个标签才算是将mybatis整合完成--><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><property name="basePackage" value="com.b0.mapper"></property></bean><!--总结:spring整合mybatis一共整合了两个标签:SqlSessionFactoryBean和MapperScannerConfigurerSqlSessionFactoryBean:为我们提供了SqlSessionFactory对象MapperScannerConfigurer:为我们提供了每一个mapper接口的代理实现类对象-->
</beans>

二、ssm整合案例(实现增删改查,数据分页)

文件存放位置

2.1.创建数据库-数据表插入30条示例数据

数据库名ssm表名t_emp

CREATE TABLE `t_emp`  (`emp_id` int NOT NULL AUTO_INCREMENT,`emp_name` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`age` int NULL DEFAULT NULL,`sex` char(1) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`email` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,PRIMARY KEY (`emp_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
INSERT INTO `t_emp` VALUES (1, 'a', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (2, 'd', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (3, 'df', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (4, 'sfdsf', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (5, 'dsfsd', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (6, 'fsdf', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (7, 'kkjhgf', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (8, 'safsdf', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (9, 'asdas', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (10, 'asfdf', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (11, 'afas', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (12, 'asfs', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (13, 'fasfs', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (14, 'ddfdsd', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (15, 'adfss', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (16, 'sdgfds', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (17, 'sdfdsf', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (18, 'fgghjytre', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (19, 'werewtr', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (20, 'wehjhbg', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (21, 'rtytt', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (22, 'yukjmhg', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (23, 'jkl;lgfd', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (24, 'ghjm,jhgf', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (25, 'rtkd', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (26, 'ghjkhg', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (27, 'fghjgf', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (28, 'fghjktr', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (29, 'ewrtytr', NULL, NULL, NULL);
INSERT INTO `t_emp` VALUES (30, 'rtyr', NULL, NULL, NULL);

2.2.编写实体类Employee.java

public class Employee {private Integer empId;private String empName;private Integer age;private String sex;private String email;//..后续自行重写:无参构造方法,有参构造方法,tostring方法,getter/setter方法
}

三、查询信息并展示分页参数

3.1 编写xxMapper.java接口和对应映射文件*Mapper.xml

public interface EmployeeMapper {/*** 查询所有的员工信息* @return*/List<Employee> getAllEmployee();
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace="com.b0.mybatis.mapper.UserMapper" -->
<mapper namespace="com.b0.mapper.EmployeeMapper">
<!--    List<Employee> getAllEmployee();--><select id="getAllEmployee" resultType="Employee">select * from t_emp</select>
</mapper>

3.2 编写service层以及实现类

public interface EmployeeService {/*** 查询所有的员工信息* @return*/List<Employee> getAllEmployee();/*** 获取员工的分页信息* @param pageNum* @return*/PageInfo<Employee> getEmployeePage(Integer pageNum);
}
@Service
@Transactional
public class EmployeeServiceImpl implements EmployeeService {@Autowiredprivate EmployeeMapper employeeMapper;@Overridepublic List<Employee> getAllEmployee() {return employeeMapper.getAllEmployee();}@Overridepublic PageInfo<Employee> getEmployeePage(Integer pageNum) {//在查询信息之前开启分页功能PageHelper.startPage(pageNum,4);//当前页,多少条数据为一页//查询所有的员工信息,相当于拦截器在,查询功能中加上limit实现分页List<Employee> list = employeeMapper.getAllEmployee();//获取分页相关数据PageInfo<Employee> page = new PageInfo<>(list,5);//设置一个页面显示5个导航分页前两个页码和后两个页码return page;}
}

3.3 编写控制类

/*** 查询所有的员工信息-->/employee/-->get* 查询员工的分页信息-->/employee/page/1-->get* 根据id查询某个员工信息-->/employee/1-->get* 跳转到添加页面-->/to/add-->get* 添加员工信息-->/employee-->post* 修改员工信息-->/employee-->put* 删除员工信息-->/employee/1-->delete*/
@Controller
public class EmployeeController {@Autowiredprivate EmployeeService employeeService;@GetMapping("/employee/page/{pageNum}")public String getEmployeePage(@PathVariable("pageNum")Integer pageNum,Model model){//获取员工的分页信息PageInfo<Employee> page = employeeService.getEmployeePage(pageNum);//将分页数据共享到请求域中model.addAttribute("page",page);return "employee_list";}@GetMapping("/employee")public String getAllEmployee(Model model){//查询所有的员工信息List<Employee> list = employeeService.getAllEmployee();//将员工信息在请求域中共享model.addAttribute("list",list);//跳转到employee_list.htmlreturn "employee_list";}
}

3.4 编写前端网页处理数据

首页index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>首页</title>
</head>
<body>
<h1>视图控制器默认访问页面</h1>
<a th:href="@{/employee/page/1}">查询员工的分页信息</a>
</body>
</html>

信息展示页

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>员工列表</title><link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body><table><tr><th colspan="6">员工列表</th></tr><tr><th>流水号</th><th>员工姓名</th><th>年龄</th><th>性别</th><th>邮箱</th><th>操作</th></tr><tr th:each="employee,status:${page.list}"><td th:text="${status.count}"></td><td th:text="${employee.empName}"></td><td th:text="${employee.age}"></td><td th:text="${employee.sex}"></td><td th:text="${employee.email}"></td><td><a href="">删除</a><a href="">修改</a></td></tr></table><div style="text-align: center;"><a th:if="${page.hasPreviousPage}" th:href="@{/employee/page/1}">首页</a><a th:if="${page.hasPreviousPage}" th:href="@{'/employee/page/'+${page.prePage}}">上一页</a><span th:each="num:${page.navigatepageNums}"><a th:if="${page.pageNum == num}" style="color: red;" th:href="@{'/employee/page/'+${num}}" th:text="'['+${num}+']'"></a><a th:if="${page.pageNum != num}" th:href="@{'/employee/page/'+${num}}" th:text="${num}"></a></span><a th:if="${page.hasNextPage}" th:href="@{'/employee/page/'+${page.nextPage}}">下一页</a><a th:if="${page.hasNextPage}" th:href="@{'/employee/page/'+${page.pages}}">尾页</a></div>
</body>
</html>

四、添加用户

4.1 修改EmployeeMapper.java

/*** 添加一个用户信息* @param employee*/void addEmployee(@Param("emp") Employee employee);

4.2 修改EmployeeMapper.xml

<!--    void addEmployee(Employee employee);--><insert id="addEmployee">insert into t_emp values(null,#{emp.empName},#{emp.age},#{emp.sex},#{emp.email})</insert>

4.3 修改EmployeeService.java

void addEmployee(Employee employee);

4.4 修改EmployeeServiceImpl.java

@Override
public void addEmployee(Employee employee) {employeeMapper.addEmployee(employee);
}

4.5 修改EmployeeController.java

/*** 添加员工信息* @param employee* @return*/
@PostMapping("/employee")
public String addEmployee(Employee employee){employeeService.addEmployee(employee);return "redirect:/employee/page/1";
}

4.6 添加网页employee_add.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>员工列表</title><link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<form th:action="@{/employee}" method="post"><table><tr><th colspan="2">添加员工信息</th></tr><tr><td>员工姓名</td><td><input type="text" name="empName"></td></tr><tr><td>年龄</td><td><input type="text" name="age"></td></tr><tr><td>性别</td><td><input type="text" name="sex"></td></tr><tr><td>邮箱</td><td><input type="text" name="email"></td></tr><tr><td colspan="2"><input type="submit" value="提交"><input type="reset" value="重置"></td></tr></table>
</form>
</body>
<script>
</script>
</html>

4.7 修改employee_list.html

在表格的表头标签中添加信息

<tr><th colspan="5">员工列表</th><th><a th:href="@{/to/add}">添加员工</a> </th>
</tr>

五、修改用户

业务逻辑梳理:通过当前id查询到用户信息,将信息共享到数据域再去访问修改页面,将数据渲染到修改页面,用户完成修改以后再进行更新

5.1 修改EmployeeMapper.java

/*** 根据id查询员工* @param empId* @return*/
Employee queryEmployeeById(@Param("empId") Integer empId);/*** 更新用户信息* @param employee*/
void updateEmployee(@Param("employee") Employee employee);

5.2 修改EmployeeMapper.xml

<!--    Employee queryEmployeeById(Integer id);--><select id="queryEmployeeById" resultType="Employee">select * from t_emp where emp_id = #{empId}</select>
<!--    void updateEmployee(Employee employee);--><update id="updateEmployee">update t_emp set emp_name=#{employee.empName}, age = #{employee.age},sex = #{employee.sex}, email = #{employee.email} where emp_id=#{employee.empId}</update>

5.3 修改EmployeeService.java

Employee queryEmployeeById(Integer empId);void updateEmployee(Employee employee);

5.4 修改EmployeeServiceImpl.java

@Override
public Employee queryEmployeeById(Integer empId) {return employeeMapper.queryEmployeeById(empId);
}@Override
public void updateEmployee(Employee employee) {employeeMapper.updateEmployee(employee);
}

5.5 修改EmployeeController.java

/*** 根据用户id查询信息放入数据域再实现跳转* @param empId* @return*/
@GetMapping("/employee/{empId}")
public String toUpdate(@PathVariable("empId") Integer empId,Model model){Employee employee = employeeService.queryEmployeeById(empId);model.addAttribute("employee",employee);return "employee_update";
}/*** 更新用户信息,跳转到信息详情页* @param employee* @return*/
@PutMapping("/employee")
public String updateEmployee(Employee employee){employeeService.updateEmployee(employee);return "redirect:/employee/page/1";
}

5.6 添加网页employee_update.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>员工列表</title><link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<form th:action="@{/employee}" method="post"><input type="hidden" name="_method" value="put"><!-- 隐藏id,后台通过该属性处理--><input type="hidden" th:value="${employee.empId}" name="empId"><table><tr><th colspan="2">更新员工信息</th></tr><tr><td>员工姓名</td><td><input type="text" name="empName" th:value="${employee.empName}"></td></tr><tr><td>年龄</td><td><input type="text" name="age" th:value="${employee.age}"></td></tr><tr><td>性别</td><td><input type="text" name="sex" th:value="${employee.sex}"></td></tr><tr><td>邮箱</td><td><input type="text" name="email" th:value="${employee.email}"></td></tr><tr><td colspan="2"><input type="submit" value="更新"></td></tr></table>
</form>
</body>
<script>
</script>
</html>

5.7 修改employee_list.html

修改操作栏的修改链接

<td><a href="">删除</a><a th:href="@{'/employee/'+${employee.empId}}">修改</a>
</td>

六、删除用户

6.1 修改EmployeeMapper.java

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

6.2 修改EmployeeMapper.xml

/*** 根据用户id删除信息* @param empId*/
void deleteEmployeeById(@Param("empId") Integer empId);

6.3 修改EmployeeService.java

    void deleteEmployeeById(Integer empId);

6.4 修改EmployeeServiceImpl.java

@Override
public void deleteEmployeeById(Integer empId) {employeeMapper.deleteEmployeeById(empId);
}

6.5 修改EmployeeController.java

/**** @param empId* @return*/
@DeleteMapping("/employee/{empId}")
public String deleteEmployee(@PathVariable("empId") Integer empId){employeeService.deleteEmployeeById(empId);return "redirect:/employee/page/1";
}

6.6 修改网页employee_list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>员工列表</title><link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<div id="app"><table><tr><th colspan="5">员工列表</th><th><a th:href="@{/to/add}">添加员工</a> </th></tr><tr><th>流水号</th><th>员工姓名</th><th>年龄</th><th>性别</th><th>邮箱</th><th>操作</th></tr><tr th:each="employee,status:${page.list}"><td th:text="${status.count}"></td><td th:text="${employee.empName}"></td><td th:text="${employee.age}"></td><td th:text="${employee.sex}"></td><td th:text="${employee.email}"></td><td><a @click="deleteEmployee()" th:href="@{'/employee/'+${employee.empId}}">删除</a><a th:href="@{'/employee/'+${employee.empId}}">修改</a></td></tr></table><div style="text-align: center;"><a th:if="${page.hasPreviousPage}" th:href="@{/employee/page/1}">首页</a><a th:if="${page.hasPreviousPage}" th:href="@{'/employee/page/'+${page.prePage}}">上一页</a><span th:each="num:${page.navigatepageNums}"><a th:if="${page.pageNum == num}" style="color: red;" th:href="@{'/employee/page/'+${num}}" th:text="'['+${num}+']'"></a><a th:if="${page.pageNum != num}" th:href="@{'/employee/page/'+${num}}" th:text="${num}"></a></span><a th:if="${page.hasNextPage}" th:href="@{'/employee/page/'+${page.nextPage}}">下一页</a><a th:if="${page.hasNextPage}" th:href="@{'/employee/page/'+${page.pages}}">尾页</a></div><form method="post"><input type="hidden" th:name="_method" th:value="delete"></form>
</div>
</body>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript">/***  axios({*                     url:"",请求路径*                     method:"",请求方式*                     params:{},*                     //以name=value & name=value的方式发送的请求参数;*                     //不管使用的请求方式是GET还是POST请求参数都会被拼接到请求地址后*                     //此种方式的请求参数可以通过request.getParameter()获取;springmvc直接通过方法体形参获取*                     data:{}*                     //json格式发送的请求参数*                     //请求参数会被保存到请求报文的请求体传输到服务器(post才有请求体)*                     //此种方式的请求参数不可以通过request.getParameter()获取*                 }).then(response=>{*                     console.log(response.data)*                 });*                 eg:*                 testAjax(){*                 axios.post(*                   "/spring_mvc_ajax_war_exploded/test/ajax?id=1001",*                     {username:"admin",password:"123456"}*                 ).then(response=>{*                     console.log(response.data)*                 });*             }*/let app = new Vue({el:"#app",methods:{deleteEmployee(){//获取form表单var form = document.getElementsByTagName("form")[0];//将超链接的href属性值复制给form表单的action属性//event.target表示当前触发事件的标签form.action = event.target.href;//表单提交form.submit();//阻止超链接的默认行为event.preventDefault();}}})
</script>
</html>

参考资源:B站尚硅谷

SSM整合-内涵基本SSM开发基本结构框架相关推荐

  1. 一文让你明白CAD开发基本结构框架(CAD二次开发入门)

    想对CAD进行二次开发的你一定有这样的困惑.那就是如何入手呢?怎么用代码画图呢?又或是CAD画一个简单的图形要遵循什么步骤呢? 我认为学习任何一个东西,从整体把握都是十分重要的,哪怕刚开始慢一点,花一 ...

  2. 阿里开发规范文档_华为阿里等技术专家15年开发经验总结:SSM整合开发实战文档...

    前言 Spring自2002年诞生至今,已有近20年的历史,虽然几经变迁,但始终在继续发展和精进.Spring目前由Pivotal维护和开发. Pivotal是PaaS(平台即服务)的领导者,也是消息 ...

  3. 【编程不良人】快速入门Spring学习笔记08---事务属性、Spring整合Structs2框架(SM)、Spring整合Mybatis+Struts2(SSM)、Spring注解、SSM注解式开发

    1. 事务属性 1.1 事务传播属性 配套视频:[编程不良人]快速入门Spring,SpringBoot.SpringCloud学不好完全是因为Spring没有掌握!_哔哩哔哩_bilibili # ...

  4. Day68-基于CoolMeeting项目开发的ssm整合流程

    Day68-基于CoolMeeting项目开发的ssm整合流程 一.创建数据库,执行一下SQL脚本. /* SQLyog Ultimate v12.08 (32 bit) MySQL - 8.0.18 ...

  5. 超级详细!!!Spring、SpringMVC、Mybatis知识点完整版更新!IOD、DI依赖注入、Mybatis配置、SQL、MVC拦截器、Web开发、SSM整合案例。

    Spring Spring框架知识点完整版 上篇,SSM三部曲之一 知识点涵盖:Spring简介IOC控制反转DI依赖注入LombokSPEL配置文件低频知识点注解开发Spring常用注解 链接:ht ...

  6. ssm整合说明与模板-Spring Spring MVC Mybatis整合开发

    ssm整合说明 spring+spring mvc+mybatis 说明 源码下载 由于之前存在ssh框架,spring+struts+hibernate,其中spring负责aop与ioc,所以一般 ...

  7. SSM整合+视频网站开发

    课程目标 使用SpringMVC+Mybatis+Spring+Maven进行分模块整合 简单实现视频网站开发 一.项目演示 视频网站构建模式 分为:自建模式和第三方模式 自建模式:需要自己搭建服务器 ...

  8. java框架ssm整合_SSM三大框架整合详细教程(Spring+SpringMVC+MyBatis)

    使用 SSM ( Spring . SpringMVC 和 Mybatis )已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方.之前没 ...

  9. SSM整合简单登录案例

    [1] 在数据库中创建用户信息表 [2] 搭建SSM开发环境 使用idea创建登录功能的web项目 在web-inf目录下创建lib文件夹,并导入SSM的jar包. 在src下创建MVC的包结构 在s ...

  10. 一步步教你搭建SSM整合+前提配置超详细版(IDEA版本)

    为了应付学校的实训课作业,开始自学SSM框架-- 我!太南了!! 所以,从下午两点写到现在晚上九点,终于搭出了这个框架并成功运行(其实就是一直运行不出来). 为了这八个小时的奋战,我都得记录这个艰难的 ...

最新文章

  1. 【Linux驱动】ThinkPad笔记本wifi模块rtl8821ce在ubuntu16.04的驱动(默认没有)
  2. MyEclipse中快捷键的使用
  3. python中global 和 nonlocal 的作用域
  4. git合并分支的策略(赞)
  5. 新电子书:解决生产中Java应用程序错误的完整指南
  6. linux网络编程应用于生活,[Linux网络编程]应用实例--获取网络时间
  7. ListView的getFirstVisiblePosition等方法返回的是哪个对象
  8. TCC Demo 代码实现
  9. 结对-结对编程项目作业名称-需求分析
  10. eeprom和编程器固件 k2_瞎鸡儿折腾之K2/K2P刷机,刷入第三方固件,傻吊教程!
  11. Excel如何合并单元格
  12. pe下修复linux磁盘分区,找回丢失的Linux分区及Grub修复过程
  13. .NET软件授权管理解决方案Eziriz .NET IntelliLock控件详细介绍
  14. python如何捕获指定异常_如何捕获Python中的异常
  15. 计算机机房标准pdf,计算机专业机房建设标准.pdf
  16. 物联网知识点(总结)
  17. Android之仿B612咔叽滤镜列表操作
  18. 可视化例子(3)——geo3D-bar3D(3D地图柱状图)
  19. 利用SSH 或 Teamviewer 控制远程服务器
  20. SWUSTOJ #953 单链表的删除操作的实现

热门文章

  1. 【Python黑科技】背单词的小程序之我爱记单词(保姆级图文+实现代码)
  2. 卡瓦莱斯的世界杯往事
  3. macOS safari安装第三方插件
  4. 【POJ】Radar Installation题解
  5. Codeforces Round #459 (Div. 1) B. MADMAX
  6. c语言printf小数乘整数,如何将小数化为整数
  7. 2018最新win10激活密匙
  8. 彼得林奇:全球理财师中的NO.1
  9. LM2586S 应用笔记
  10. 利用手机模拟器进行apk抓包分析