SSM整合、环境配置以及基础综合测试(单表查询、多表查询和数据分页、前后端分离、Vue3)
SSM整合、环境配置以及基础综合测试
准备：创建maven项目以及项目框架准备
SSM整合简介
介绍:
- SSM(Spring+SpringMVC+MyBatis) 整合，就是三个框架协同开发。
- Spring整合Mybatis就是将Mybatis核心配置文件当中数据源的配置、事务处理、以及工厂的配置，Mapper接口的实现类等交给Spring管理。即spring.xml
- Spring整合SpringMVC，就是在web.xml当中添加监听器 ，当服务启动，监听触发，监听器执行了Spring的核心配置文件，核心配置文件被加载。即springmvc.xml
整合核心步骤：
- Spring基础框架单独运行
- SpringMVC框架单独运行
- Spring整合SpringMVC框架
- Spring整合Mybatis框架
添加依赖和配置文件
<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.0modelVersion>
<groupId>com.etimegroupId>
<artifactId>day13artifactId>
<version>1.0-SNAPSHOTversion>
<properties>
<project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
<maven.compiler.source>8maven.compiler.source>
<maven.compiler.target>8maven.compiler.target>
<spring-version>5.2.5.RELEASEspring-version>
<mybatis-version>3.4.6mybatis-version>
properties>
<dependencies>
<dependency>
<groupId>mysqlgroupId>
<artifactId>mysql-connector-javaartifactId>
<version>8.0.11version>
<scope>runtimescope>
dependency>
<dependency>
<groupId>org.mybatisgroupId>
<artifactId>mybatisartifactId>
<version>${mybatis-version}version>
dependency>
<dependency>
<groupId>com.mchangegroupId>
<artifactId>c3p0artifactId>
<version>0.9.5.2version>
dependency>
<dependency>
<groupId>junitgroupId>
<artifactId>junitartifactId>
<version>4.12version>
<scope>testscope>
dependency>
<dependency>
<groupId>log4jgroupId>
<artifactId>log4jartifactId>
<version>1.2.17version>
dependency>
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelperartifactId>
<version>5.1.10version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-contextartifactId>
<version>${spring-version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-jdbcartifactId>
<version>${spring-version}version>
dependency>
<dependency>
<groupId>org.aspectjgroupId>
<artifactId>aspectjweaverartifactId>
<version>1.8.7version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-webmvcartifactId>
<version>${spring-version}version>
dependency>
<dependency>
<groupId>com.fasterxml.jackson.coregroupId>
<artifactId>jackson-databindartifactId>
<version>2.9.9version>
dependency>
<dependency>
<groupId>commons-fileuploadgroupId>
<artifactId>commons-fileuploadartifactId>
<version>1.3.1version>
dependency>
<dependency>
<groupId>org.mybatisgroupId>
<artifactId>mybatis-springartifactId>
<version>1.3.2version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-testartifactId>
<version>${spring-version}version>
dependency>
<dependency>
<groupId>org.projectlombokgroupId>
<artifactId>lombokartifactId>
<version>1.18.16version>
dependency>
dependencies>
project>
jdbc.properties：与数据库建立连接的密码驱动等的属性配置文件
jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/db_418?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC
jdbc.username=root
jdbc.password=h123456
spring.xml配置文件配置扫描包
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
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/mvc
http://www.springframework.org/schema/mvc/spring-mvc.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/context
http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.etime.service">context:component-scan>
beans>
新建实体类Student
package com.etime.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
//注解注入无参构造函数
@NoArgsConstructor
//注解注入全参构造函数
@AllArgsConstructor
//注解注入get,set等方法
@Data
public class Student {
private int sid;
private String sname;
private int cid;
}
创建接口StudentService.java:查询所有学生信息
package com.etime.service;
import com.etime.pojo.Student;
import java.util.List;
public interface StudentService {
List<Student> getAllStudent();
}
创建StudentService.java接口的实现类StudentServiceImpl.java并继承StudentService且实现里面的方法getAllStudent
package com.etime.service.impl;
import com.etime.pojo.Student;
import com.etime.service.StudentService;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class StudentServiceImpl implements StudentService {
@Override
public List<Student> getAllStudent() {
System.out.println("这是service实现类里面的方法");
return null;
}
}
测试：测试通过spring的配置是否可行
package com.etime.test;
import com.etime.service.StudentService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
//通过@RunWith注解的方式加载注入SpringJunit4ClalssRunner.class文件对spring进行测试
@RunWith(SpringJUnit4ClassRunner.class)
//通过注解@ContextConfiguration注解加载文件spring.xml
@ContextConfiguration("classpath:spring.xml")
public class SsmTest {
//使用自动注入注解@Autowired对接口StudentService进行注入
@Autowired
private StudentService studentService;
//使用@Test单元注解的方式对实现层的方法调用
@Test
public void t01(){
studentService.getAllStudent();
}
}
单独测试service结果是spring的单独测试下面将对它进行整合：如下的测试结果表名确实是通过spring.xml配置文件可以测试当前接口实现类里面的方法
在web.xml中配置核心控制器（DispatcherServlet）:通过web.xml中配置核心控制器控制加载springmvc的配置文件，加载web.xml同时也加载springmvc.xml文件
<servlet>
<servlet-name>DispatcherServletservlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
<init-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:springmvc.xmlparam-value>
init-param>
<load-on-startup>1load-on-startup>
servlet>
<servlet-mapping>
<servlet-name>DispatcherServletservlet-name>
<url-pattern>/url-pattern>
servlet-mapping>
创建springmvc核心配置文件：配置扫描控制层的处理文件，以及处理器，但是后期用了前后端分离的模式来讲解，所以其实，配置视图解析器的但是没有用到。
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
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/mvc
http://www.springframework.org/schema/mvc/spring-mvc.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/context
http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.etime.controller">context:component-scan>
<mvc:annotation-driven>mvc:annotation-driven>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/"/>
<property name="suffix" value=".jsp"/>
bean>
beans>
创建控制器整理数据，对数据进行简单处理
package com.etime.controller;
import com.etime.pojo.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/student")
public class StudentController {
@RequestMapping("t02")
@ResponseBody
public Student test(){
return new Student(1,"mchh",2);
}
}
这里测试工具我使用Apifox进行接口测试：如果想要使用该工具的，大家可以去该路径下我有写在哪可以下载，以及使用：
https://blog.csdn.net/m0_56245143/article/details/130270652?spm=1001.2014.3001.5501
运行结果：
整合Spring 和 SpringMVC:web.xml中添加监听器的方式当在加载的web.xml的时候就能将所需要加载的配置加载上，使用servletContext的监听器，是在该项目第一次被访问的时候就加载的，监听到的时候就 对该文件的其它配置进行加载
在web.xml中进行配置：
<context-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:spring.xmlparam-value>
context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
listener>
修改service实现类方法代码及控制器代码并测试：准备一些简单测试数据对进行测试，因为目前所做的还是为了后面整合ssm做准备的。
在StudentServiceImpl.java中进行修改
package com.etime.service.impl;
import com.etime.pojo.Student;
import com.etime.service.StudentService;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
@Service
public class StudentServiceImpl implements StudentService {
@Override
public List<Student> getAllStudent() {
//准备多个学生数据信息进行测试
Student student1= new Student(1,"cc",2);
Student student2 = new Student(2,"mc",3);
Student student3 = new Student(3,"mm",4);
List<Student> list = new ArrayList<>();
list.add(student1);
list.add(student2);
list.add(student3);
return list;
}
}
对控制层也进行微量的调节，获取到service返回的数据
对StudentController.java进行修改：
package com.etime.controller;
import com.etime.pojo.Student;
import com.etime.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
@RequestMapping("/student")
public class StudentController {
//本来如果没有用注解的情况下，如果要对service的数据进行访问时，就只能进行对StudentService类进行创建新对象
//可以使用@Autowired注解的方式对service进行引入
@Autowired
private StudentService studentService;
@RequestMapping("t02")
@ResponseBody
public List<Student> test(){
return studentService.getAllStudent();
}
}
运行结果：
该次测试将打通数据访问层将mybatis也整合进来：
编写数据访问层的接口
StudentMapper.java
package com.etime.mapper;
import com.etime.pojo.Student;
import java.util.List;
public interface StudentMapper {
List<Student> getAllStudent();
}
编写mybatis映射配置文件：这里有两种方式，一种使用配置文件的方式，另一种方式就是使用纯注解的方式进行数据 访问层的操作。我这里采用的方式是直接使用配置文件的方式：
如图所示的创建StudentMappe.xml文件以及添加修改数据：
DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.etime.mapper.StudentMapper">
<select id="getAllStudent" resultType="Student">
select * from student
select>
mapper>
将Spring和mybatis配置进行整合
准备连接数据的配置属性文件，注意根据个人即将测试的数据，修改该数据库的名称，密码和用户等
jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/db_418?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC
jdbc.username=root
jdbc.password=h123456
在spring.xml中配置连接数据库，准备数据源
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
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/mvc
http://www.springframework.org/schema/mvc/spring-mvc.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/context
http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.etime.service">context:component-scan>
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.etime.mapper" />
bean>
<context:property-placeholder location="classpath:jdbc.properties"/>
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="${jdbc.driver}"/>
<property name="jdbcUrl" value="${jdbc.url}"/>
<property name="user" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
bean>
<bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<property name="typeAliasesPackage" value="com.etime.pojo"/>
<property name="mapperLocations" value="classpath:com/etime/mapper/*.xml"/>
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<value>
helperDialect=mysql
reasonable=true
supportMethodsArguments=true
params=count=countSql
autoRuntimeDialect=true
value>
property>
bean>
array>
property>
bean>
beans>
原本是需要对spring.xml中配置的事务进行处理的使用注解权限，但是这里用不到，配置上一方用到：
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"/>
bean>
<tx:annotation-driven transaction-manager="transactionManager">tx:annotation-driven>
修改service实现类中的方法
StudentServiceImpl.java
package com.etime.service.impl;
import com.etime.mapper.StudentMapper;
import com.etime.pojo.Student;
import com.etime.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
@Service
public class StudentServiceImpl implements StudentService {
//使用@Autowired注解将StudentMapper接口引入
@Autowired
private StudentMapper studentMapper;
@Override
public List<Student> getAllStudent() {
//准备多个学生数据信息进行测试
return studentMapper.getAllStudent();
}
}
启动服务进行测试整合结果：如下图的结果说明还是比较成功的打通了ssm的所有整合过程
SSM整合测试
使用前后端分离的技术对整合的ssm进行测试：
案例一、使用VScode、idea、js、vue3进行前后端分离的技术对查询所有学生信息进行页面展示：即简单单表操作
使用vue.global.js 、 axios.min.js 、进行页面编写
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="js/axios.min.js">script>
<script src="js/vue.global.js">script>
head>
<body>
<div id="app">
<table>
<tr>
<td>学号td>
<td>姓名td>
<td>班级编号td>
tr>
<tr v-for="stu in students">
<td>{{stu.sid}}td>
<td>{{stu.sname}}td>
<td>{{stu.cid}}td>
tr>
table>
div>
<script>
const vueApp = Vue.createApp({
data(){
return{
students:""
}
},
created(){
axios({
url:"http://localhost:8080/day13_war_exploded/student/t02",
method:"get"
}).then(resp => {
this.students = resp.data;
});
}
});
vueApp.mount("#app");
script>
body>
html>
控制层：
StudentController.java
package com.etime.controller;
import com.etime.pojo.Student;
import com.etime.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
@RequestMapping("/student")
//使用注解@CrossOrigin方式来解决跨域问题
@CrossOrigin
public class StudentController {
//本来如果没有用注解的情况下，如果要对service的数据进行访问时，就只能进行对StudentService类进行创建新对象
//可以使用@Autowired注解的方式对service进行引入
@Autowired
private StudentService studentService;
@RequestMapping("t02")
@ResponseBody
public List<Student> test(){
return studentService.getAllStudent();
}
}
运行结果：由运行结果可以看出单表操作没有问题
接下来进行 多表查询并进行分页测试，由上可知的 配置中咱们是使用了mybatis分页插件的，可以利用这一工具进行数据分页到html上进行展示：
案例二：
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="js/axios.min.js">script>
<script src="js/vue.global.js">script>
head>
<body>
<div id="app">
<table align="center">
<tr>
<td>学号td>
<td>姓名td>
<td>班级td>
tr>
<tr v-for="stu in students" align="center">
<td>{{stu.sid}}td>
<td>{{stu.sname}}td>
<td>{{stu.classes.cname}}td>
tr>
table>
<div style="width: 500px;margin: auto;">
<a href="javascript:void(0)" @click="getStudentByPage(1)">首页a>
<a href="javascript:void(0)" @click="getStudentByPage(prevPage)">上一页a>
{{pageNum}}/{{pageTotal}}
<a href="javascript:void(0)" @click="getStudentByPage(nextPage)">下一页a>
<a href="javascript:void(0)" @click="getStudentByPage(pageTotal)">尾页a>
div>
div>
<script>
const vueApp = Vue.createApp({
data(){
return{
students:"",
pageNum:"",
pageTotal:"",
prevPage:"",
nextPage:""
}
},
methods:{
getStudentByPage(page){
axios({
url:"http://localhost:8080/day13_war_exploded/student/t02?pageNum="+page+"&pageSize=2",
method:"get"
}).then(resp => {
console.log(resp)
this.students = resp.data.list;
this.pageNum = resp.data.pageNum;
this.pageTotal = resp.data.pages;
this.prevPage = resp.data.prePage;
if(this.prevPage <= 0){
this.prevPage =1;
}
this.nextPage = resp.data.nextPage;
});
}
},
created(){
this.getStudentByPage(1);
}
});
vueApp.mount("#app");
script>
body>
html>
StudentController.java
package com.etime.controller;
import com.etime.pojo.Student;
import com.etime.service.StudentService;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
@RequestMapping("/student")
//使用注解@CrossOrigin方式来解决跨域问题
@CrossOrigin
public class StudentController {
//本来如果没有用注解的情况下，如果要对service的数据进行访问时，就只能进行对StudentService类进行创建新对象
//可以使用@Autowired注解的方式对service进行引入
@Autowired
private StudentService studentService;
@RequestMapping("t02")
@ResponseBody
public PageInfo<Student> test(int pageNum,int pageSize){
return studentService.getAllStudent(pageNum,pageSize);
}
}
StudentService.java
package com.etime.service;
import com.etime.pojo.Student;
import com.github.pagehelper.PageInfo;
public interface StudentService {
PageInfo<Student> getAllStudent(int pageNum,int pageSize);
}
StudentServiceImpl.java
package com.etime.service.impl;
import com.etime.mapper.StudentMapper;
import com.etime.pojo.Student;
import com.etime.service.StudentService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class StudentServiceImpl implements StudentService {
//使用@Autowired注解将StudentMapper接口引入
@Autowired
private StudentMapper studentMapper;
@Override
public PageInfo<Student> getAllStudent(int pageNum, int pageSize) {
PageHelper.startPage(pageNum,pageSize);
List<Student> list = studentMapper.getAllStudent();
PageInfo<Student> pageInfo = new PageInfo<>(list);
return pageInfo;
}
}
StudentMapper.java
package com.etime.mapper;
import com.etime.pojo.Student;
import java.util.List;
public interface StudentMapper {
List<Student> getAllStudent();
}
StudentMapper.xml
DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.etime.mapper.StudentMapper">
<select id="getAllStudent" resultMap="studentAndClasses">
select * from student s,classes c where s.cid = c.cid
select>
<resultMap id="studentAndClasses" type="Student">
<id property="sid" column="sid">id>
<result property="sname" column="sname">result>
<result property="cid" column="cid">result>
<association property="classes" javaType="Classes">
<id property="cid" column="cid">id>
<result property="cname" column="cname">result>
association>
resultMap>
mapper>
并在pojo中创建Classes.java班级实体类
package com.etime.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@AllArgsConstructor
@NoArgsConstructor
@Data
public class Classes {
private int cid;
private String cname;
}
测试结果：到目前为止基本的ssm整合对基础的查询都能成功
ntMapper">
select * from student s,classes c where s.cid = c.cid
并在pojo中创建Classes.java班级实体类
package com.etime.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@AllArgsConstructor
@NoArgsConstructor
@Data
public class Classes {
private int cid;
private String cname;
}
测试结果：到目前为止基本的ssm整合对基础的查询都能成功
