1、环境搭建
1.1、在project创建新module

1.2、选择maven

1.3、设置module名称和路径


1.4、module初始状态

1.5、配置打包方式和引入依赖

注意:默认的打包方式为 jar,为了能配置web资源,需要将打包方式设置为 war
1.6、配置web资源目录

打开Project Structure,选择对应的module,并为该module创建一个web.xml文件

注意:web.xml文件需要放到web资源路径(工程路径\src\main\webapp)下

1.7、配置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">
-
-
- <listener>
- <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
- </listener>
-
-
- <context-param>
- <param-name>contextConfigLocation</param-name>
- <param-value>classpath:spring.xml</param-value>
- </context-param>
-
- <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>
-
- <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>
-
-
- <servlet>
- <servlet-name>SpringMVC</servlet-name>
- <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
-
- <init-param>
- <param-name>contextConfigLocation</param-name>
- <param-value>classpath:springmvc.xml</param-value>
- </init-param>
-
- <load-on-startup>1</load-on-startup>
- </servlet>
- <servlet-mapping>
- <servlet-name>SpringMVC</servlet-name>
- <url-pattern>/</url-pattern>
- </servlet-mapping>
- </web-app>
复制代码 1.8、创建SpringMVC的配置文件
 - <?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">
-
- <context:component-scan base-package="online.liaojy.ssm.controller"></context:component-scan>
-
- <bean id="viewResolver" >
- <property name="order" value="1"/>
- <property name="characterEncoding" value="UTF-8"/>
- <property name="templateEngine">
- <bean >
- <property name="templateResolver">
- <bean
- >
-
- <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>
-
- <mvc:default-servlet-handler></mvc:default-servlet-handler>
-
- <mvc:annotation-driven></mvc:annotation-driven>
-
- <mvc:view-controller path="/" view-name="index"></mvc:view-controller>
- </beans>
复制代码 1.9、创建请求控制器
 - package online.liaojy.ssm.controller;
- import org.springframework.stereotype.Controller;
- /**
- * @author liaojy
- * @date 2023/12/3 - 18:32
- */
- @Controller
- public class EmployeeController {
- }
复制代码 1.10、创建模板目录及页面模板

注意:html要引入thymeleaf的约束:xmlns:th="http://www.thymeleaf.org"
- <!DOCTYPE html>
- <html lang="en" xmlns:th="http://www.thymeleaf.org">
- <head>
- <meta charset="UTF-8">
- <title>首页</title>
- </head>
- <body>
- <h1>index.html</h1>
- </body>
- </html>
复制代码 1.11、创建jdbc.properties属性文件

注意:本例使用的数据库版本为 MySQL-5 ,因此驱动配置为 com.mysql.jdbc.Driver
如果使用的数据库版本为 MySQL-8 ,驱动配置应该为 com.mysql.cj.jdbc.Driver
- jdbc.driver=com.mysql.jdbc.Driver
- jdbc.url=jdbc:mysql://localhost:3306/ssm?characterEncoding=utf-8
- jdbc.username=root
- jdbc.password=root
复制代码 1.12、创建MyBatis的核心配置文件
 - <?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>
-
- <properties resource="jdbc.properties"/>
-
- <settings>
-
- <setting name="mapUnderscoreToCamelCase" value="true"/>
-
-
-
- <setting name="cacheEnabled" value="true"/>
- </settings>
-
- <typeAliases>
- <package name="online.liaojy.ssm.pojo"/>
- </typeAliases>
- <plugins>
-
- <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
- </plugins>
-
- <environments default="development">
- <environment id="development">
- <transactionManager type="JDBC"/>
- <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>
-
- <mappers>
- <package name="online.liaojy.ssm.mapper"/>
- </mappers>
- </configuration>
复制代码 1.13、创建mapper接口
 - package online.liaojy.ssm.mapper;
- /**
- * @author liaojy
- * @date 2023/12/4 - 7:00
- */
- public interface EmployeeMapper {
- }
复制代码 1.14、创建mapper映射文件

注意:mapper映射文件的目录结构和名称要和mapper接口的一致
mapper映射文件的命名空间,也要和mapper接口的全类名一致
- [/code][size=4]1.15、创建Spring的配置文件[/size]
- [img]https://img2023.cnblogs.com/blog/2052479/202312/2052479-20231204172920582-339752083.png[/img]
- [code]<?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">
-
- <context:component-scan base-package="online.liaojy.ssm.controller"></context:component-scan>
-
- <bean id="viewResolver" >
- <property name="order" value="1"/>
- <property name="characterEncoding" value="UTF-8"/>
- <property name="templateEngine">
- <bean >
- <property name="templateResolver">
- <bean
- >
-
- <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>
-
- <mvc:default-servlet-handler></mvc:default-servlet-handler>
-
- <mvc:annotation-driven></mvc:annotation-driven>
-
- <mvc:view-controller path="/" view-name="index"></mvc:view-controller>
- </beans>
复制代码 1.16、创建业务层接口及实现类
 - package online.liaojy.ssm.service;
- /**
- * @author liaojy
- * @date 2023/12/4 - 20:32
- */
- public interface EmployeeService {
- }
复制代码 - package online.liaojy.ssm.service.impl;
- import online.liaojy.ssm.service.EmployeeService;
- import org.springframework.stereotype.Service;
- import org.springframework.transaction.annotation.Transactional;
- /**
- * @author liaojy
- * @date 2023/12/4 - 20:34
- */
- @Service
- @Transactional
- public class EmployeeServiceImpl implements EmployeeService {
- }
复制代码 1.17、创建日志文件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" >
- <param name="Encoding" value="UTF-8" />
- <layout >
- <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>
复制代码 1.18、配置tomcat



1.19、测试效果


2、实战案例
2.1、创建表
 - CREATE TABLE `t_emp` (
- `emp_id` int(11) NOT NULL AUTO_INCREMENT,
- `emp_name` varchar(20) DEFAULT NULL,
- `age` int(11) DEFAULT NULL,
- `sex` char(1) DEFAULT NULL,
- `email` varchar(50) DEFAULT NULL,
- PRIMARY KEY (`emp_id`)
- ) ENGINE=InnoDB DEFAULT CHARSET=utf8
复制代码 2.2、插入数据
 - insert into t_emp (emp_name,age,sex,email) values ('a',18,'男','11@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('b',19,'男','22@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('c',20,'男','33@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('d',21,'男','44@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('e',22,'男','55@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('f',23,'男','66@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('g',24,'男','77@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('h',25,'男','88@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('i',26,'男','99@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('j',27,'男','00@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('k',28,'男','111@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('l',29,'男','222@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('m',30,'男','333@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('n',31,'男','444@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('o',32,'男','555@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('p',33,'男','666@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('q',34,'男','777@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('r',35,'男','888@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('s',36,'男','999@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('t',37,'男','000@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('u',38,'男','1111@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('v',39,'男','2222@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('w',40,'男','3333@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('x',41,'男','4444@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('y',42,'男','5555@qq.com');
- insert into t_emp (emp_name,age,sex,email) values ('z',43,'男','6666@qq.com');
复制代码
2.3、创建实体类
 - package online.liaojy.ssm.pojo;
- import java.io.Serializable;
- /**
- * @author liaojy
- * @date 2023/12/4 - 23:06
- */
- public class Employee implements Serializable {
- private Integer empId;
- private String empName;
- private Integer age;
- private String sex;
- private String email;
- public Employee() {
- }
- public Employee(Integer empId, String empName, Integer age, String sex, String email) {
- this.empId = empId;
- this.empName = empName;
- this.age = age;
- this.sex = sex;
- this.email = email;
- }
- 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 Integer getAge() {
- return age;
- }
- public void setAge(Integer age) {
- this.age = age;
- }
- public String getSex() {
- return sex;
- }
- public void setSex(String sex) {
- this.sex = sex;
- }
- public String getEmail() {
- return email;
- }
- public void setEmail(String email) {
- this.email = email;
- }
- @Override
- public String toString() {
- return "Employee{" +
- "empId=" + empId +
- ", empName='" + empName + '\'' +
- ", age=" + age +
- ", sex='" + sex + '\'' +
- ", email='" + email + '\'' +
- '}';
- }
- }
复制代码 2.4、持久层
 - /**
- * 查询所有员工信息
- * @return
- */
- List<Employee> getAllEmployee();
复制代码 -
- <select id="getAllEmployee" resultType="Employee">
- select * from t_emp
- </select>
复制代码 2.5、业务层
 - /**
- * 查询所有员工信息
- * @return
- */
- List<Employee> getAllEmployee();
复制代码 - @Autowired
- EmployeeMapper employeeMapper;
- public List<Employee> getAllEmployee() {
- return employeeMapper.getAllEmployee();
- }
复制代码 2.6、控制层
 - @Autowired
- EmployeeService employeeService;
- @GetMapping("/employee")
- public String getAllEmployee(Model model){
- // 查询所有员工信息
- List<Employee> employees = employeeService.getAllEmployee();
- //将员工信息共享到请求域
- model.addAttribute("employees",employees);
- //跳转到员工列表页面employee_list.html
- return "employee_list";
- }
复制代码 2.7、页面视图
 - <!DOCTYPE html>
- <html lang="en" xmlns:th="http://www.thymeleaf.org">
- <head>
- <meta charset="UTF-8">
- <title>员工列表</title>
- </head>
- <body>
- <table border="10">
- <tr>
-
- <th colspan="7">员工列表</th>
- </tr>
- <tr>
- <th>序号</th>
- <th>员工id</th>
- <th>员工姓名</th>
- <th>员工年龄</th>
- <th>员工性别</th>
- <th>员工邮箱</th>
- <th>操作(<a target="_blank" href="https://www.cnblogs.com/">添加员工</a>)</th>
- </tr>
-
-
- <tr th:each="employee,status : ${employees}">
-
- <td th:text="${status.count}"></td>
- <td th:text="${employee.empId}"></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 target="_blank" href="https://www.cnblogs.com/">修改员工</a>
- <a target="_blank" href="https://www.cnblogs.com/">删除员工</a>
- </td>
- </tr>
- </table>
- </body>
- </html>
复制代码 2.8、添加访问入口
 - <a th:target="_blank" href="https://www.cnblogs.com/@{/employee}">查询所有员工信息</a>
复制代码 2.9、测试效果


3、分页优化
3.1、业务层
 - /**
- * 分页查询所有员工信息
- * @param pageNum
- * @return
- */
- PageInfo<Employee> getAllEmployeeWithPage(Integer pageNum,Integer pageSize);
复制代码 - public PageInfo<Employee> getAllEmployeeWithPage(Integer pageNum,Integer pageSize) {
- // 在查询之前,开启分页功能,并设置当前页的页码和每页的数据条数
- PageHelper.startPage(pageNum,pageSize);
- // 查询所有的员工信息()
- // 分页插件会在查询前先进行拦截,添加相关的sql分页代码后(因此在mapper映射文件编写的sql不能使用分号结束),再放行
- List<Employee> employees = employeeMapper.getAllEmployee();
- // 根据分页数据(employees)和分页导航的页码数(navigatePages),创建分页数据对象
- PageInfo<Employee> employeePageInfo = new PageInfo<Employee>(employees, 5);
- return employeePageInfo;
- }
复制代码 3.2、控制层
 - @GetMapping(value = {"/employee/page/{pageNum}","/employee/page/{pageNum}/{pageSize}"})
- public String getAllEmployeeWithPage(Model model,
- @PathVariable("pageNum") Integer pageNum,
- @PathVariable(value = "pageSize",required = false) Integer pageSize){
- // 判断请求中是否有设置每页的数据条数,没有的话就给一个默认值
- if (pageSize == null){
- pageSize = 4;
- }
- // 根据当前页的页码,分页查询所有员工信息
- PageInfo<Employee> employeePageInfo = employeeService.getAllEmployeeWithPage(pageNum,pageSize);
- //将分页数据共享到请求域
- model.addAttribute("employeePageInfo",employeePageInfo);
- //跳转到员工列表分页的页面employee_page.html
- return "employee_page";
- }
复制代码 3.3、页面视图

关于分页数据对象的属性细节,请参考12.3.3.1节
- <!DOCTYPE html>
- <html lang="en" xmlns:th="http://www.thymeleaf.org">
- <head>
- <meta charset="UTF-8">
- <title>员工列表</title>
- </head>
- <body>
- <table border="10">
- <tr>
-
- <th colspan="7">员工列表</th>
- </tr>
- <tr>
- <th>序号</th>
- <th>员工id</th>
- <th>员工姓名</th>
- <th>员工年龄</th>
- <th>员工性别</th>
- <th>员工邮箱</th>
- <th>操作(<a target="_blank" href="https://www.cnblogs.com/">添加员工</a>)</th>
- </tr>
-
-
- <tr th:each="employee,status : ${employees}">
-
- <td th:text="${status.count}"></td>
- <td th:text="${employee.empId}"></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 target="_blank" href="https://www.cnblogs.com/">修改员工</a>
- <a target="_blank" href="https://www.cnblogs.com/">删除员工</a>
- </td>
- </tr>
- </table>
- </body>
- </html> [url=https://www.cnblogs.com/@{/employee/page/1}]首页[/url] [url=https://www.cnblogs.com/@{]上一页[/url] [url=https://www.cnblogs.com/@{]下一页[/url] [url=https://www.cnblogs.com/@{]末页[/url]
复制代码 3.4、添加访问入口
 - <a th:target="_blank" href="https://www.cnblogs.com/@{/employee/page/1}">分页查询所有员工信息</a>
复制代码 3.5、测试效果


如上图所示,当前页为第一页,所以在分页导航中没有“首页”和“上一页”,对应的页码带有中括号且标红

如上图所示,当前页为第二页,所以在分页导航中有“首页”和“上一页”,对应的页码带有中括号且标红

如上图所示,当前页为最后一页,所以在分页导航中没有“下一页”和“末页”,对应的页码带有中括号且标红
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |