文章目录
004- SSM整合
4.1 SSM整合后台功能
(1)SSM整合步骤
(2)数据库表
(3)创建webapp maven模块
使用maven创建模块 webapp
(4)修改pom.xml
修改pom.xml 刷新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.bjpowernode</groupId>
<artifactId>springmvc_ssm</artifactId>
<version>1.0</version>
<packaging>war</packaging>
<name>springmvc_ssm Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>16</maven.compiler.source>
<maven.compiler.target>16</maven.compiler.target>
<!--集中定义依赖版本号-->
<!--单元测试的依赖-->
<junit.version>4.13.2</junit.version>
<!--spring的相关依赖-->
<spring.version>5.3.21</spring.version>
<!--mybatis的相关依赖-->
<mybatis.version>3.5.6</mybatis.version>
<!--mybatis与spring整合的依赖-->
<mybatis.spring.version>1.3.1</mybatis.spring.version>
<!--mybatis支持的分页插件的依赖 使用jsp写前端用得到 使用vue用不到 这次用不到-->
<mybatis.paginator.version>1.2.15</mybatis.paginator.version>
<!--mysql的依赖-->
<mysql.version>8.0.28</mysql.version>
<!--日志的依赖-->
<slf4j.version>1.6.4</slf4j.version>
<!--数据库连接池的依赖-->
<druid.version>1.2.8</druid.version>
<!--分页插件自己的依赖 这次用不到-->
<pagehelper.version>5.3.0</pagehelper.version>
<!--jsp标准标签库的依赖-->
<jstl.version>1.2</jstl.version>
<!--servlet的依赖-->
<servlet-api.version>4.0.1</servlet-api.version>
<!--jsp依赖 加不加都可以-->
<jsp-api.version>2.0</jsp-api.version>
<!--jackson的依赖,springmvc框架默认进行JSON转换的依赖工具-->
<jackson.version>2.13.2</jackson.version>
</properties>
<dependencies>
<!-- spring -->
<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>
<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-jms</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>
<!-- Mybatis -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>${mybatis.version}</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>${mybatis.spring.version}</version>
</dependency>
<dependency>
<groupId>com.github.miemiedev</groupId>
<artifactId>mybatis-paginator</artifactId>
<version>${mybatis.paginator.version}</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>${pagehelper.version}</version>
</dependency>
<!-- MySql -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!-- 连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>${druid.version}</version>
</dependency>
<!-- junit -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${junit.version}</version>
<scope>test</scope>
</dependency>
<!-- JSP相关 -->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>${jstl.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jsp-api</artifactId>
<scope>provided</scope>
<version>${jsp-api.version}</version>
</dependency>
<!-- Jackson Json处理工具包 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
</dependencies>
<build>
<finalName>springmvc_ssm</finalName>
<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
</plugins>
</pluginManagement>
<!--识别所有的配置文件-->
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.properties</include>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>**/*.properties</include>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
</build>
</project>
(5)配置文件
jdbc.driverClassName=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssmuser?useUnicode=true&characterEncoding=utf8
jdbc.username=root
jdbc.password=123
mybatis 配置文件
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"
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">
<!--读取属性配置文件-->
<context:property-placeholder location="classpath:jdbc.properties"></context:property-placeholder>
<!--配置数据源-->
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
<property name="driverClassName" value="${jdbc.driverClassName}"></property>
<property name="url" value="${jdbc.url}"></property>
<property name="username" value="${jdbc.username}"></property>
<property name="password" value="${jdbc.password}"></property>
</bean>
<!--配置SqlSessionFactoryBean-->
<bean class="org.mybatis.spring.SqlSessionFactoryBean">
<!--配置数据源-->
<property name="dataSource" ref="dataSource"></property>
<!--配置SqlMapConfig.xml核心配置-->
<property name="configLocation" value="classpath:SqlMapConfig.xml"></property>
<!--注册实体类-->
<property name="typeAliasesPackage" value="com.bjpowernode.pojo"></property>
</bean>
<!--注册mapper.xml文件-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.bjpowernode.mapper"></property>
</bean>
</beans>
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:aop="http://www.springframework.org/schema/aop"
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/aop https://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
<!--添加包扫描-->
<context:component-scan base-package="com.bjpowernode.service.impl"></context:component-scan>
<!--添加事务管理器-->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<!--切记:配置数据源-->
<property name="dataSource" ref="dataSource"></property>
</bean>
<!--配置事务切面-->
<tx:advice id="myadvice" transaction-manager="transactionManager">
<tx:attributes>
<tx:method name="*select*" read-only="true"/>
<tx:method name="*find*" read-only="true"/>
<tx:method name="*search*" read-only="true"/>
<tx:method name="*insert*" propagation="REQUIRED"/>
<tx:method name="*add*" propagation="REQUIRED"/>
<tx:method name="*save*" propagation="REQUIRED"/>
<tx:method name="*set*" propagation="REQUIRED"/>
<tx:method name="*update*" propagation="REQUIRED"/>
<tx:method name="*change*" propagation="REQUIRED"/>
<tx:method name="*modify*" propagation="REQUIRED"/>
<tx:method name="*delete*" propagation="REQUIRED"/>
<tx:method name="*drop*" propagation="REQUIRED"/>
<tx:method name="*remove*" propagation="REQUIRED"/>
<tx:method name="*clear*" propagation="REQUIRED"/>
<tx:method name="*" propagation="SUPPORTS"/>
</tx:attributes>
</tx:advice>
<!--配置切入点+绑定-->
<aop:config>
<aop:pointcut id="mycut" expression="execution(* com.bjpowernode.service.impl.*.*(..))"></aop:pointcut>
<aop:advisor advice-ref="myadvice" pointcut-ref="mycut"></aop:advisor>
</aop:config>
</beans>
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="com.bjpowernode.controller"></context:component-scan>
<!--添加注解驱动-->
<mvc:annotation-driven></mvc:annotation-driven>
<!--因为本项目都是ajax请求 所有不需要视图解析器-->
</beans>
(6)配置web.xml
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">
<!--添加中文编码过滤器-->
<filter>
<filter-name>encode</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>encode</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!--注册springmvc框架-->
<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>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!--注册spring框架,目的就是启动spring容器-->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext_*.xml</param-value>
</context-param>
</web-app>
(7)数据库可视化
数据库可视化
(8)创建实体类
创建实体类User
package com.bjpowernode.pojo;
public class User {
private String userId;
private String cardType;
private String cardNo;
private String userName;
private String userSex;
private String userAge;
private String userRole;
public User() {
}
public User(String userId, String cardType, String cardNo, String userName, String userSex, String userAge, String userRole) {
this.userId = userId;
this.cardType = cardType;
this.cardNo = cardNo;
this.userName = userName;
this.userSex = userSex;
this.userAge = userAge;
this.userRole = userRole;
}
public String getUserId() {
return userId;
}
public void setUserId(String userId) {
this.userId = userId;
}
public String getCardType() {
return cardType;
}
public void setCardType(String cardType) {
this.cardType = cardType;
}
public String getCardNo() {
return cardNo;
}
public void setCardNo(String cardNo) {
this.cardNo = cardNo;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getUserSex() {
return userSex;
}
public void setUserSex(String userSex) {
this.userSex = userSex;
}
public String getUserAge() {
return userAge;
}
public void setUserAge(String userAge) {
this.userAge = userAge;
}
public String getUserRole() {
return userRole;
}
public void setUserRole(String userRole) {
this.userRole = userRole;
}
@Override
public String toString() {
return "User{" +
"userId='" + userId + '\'' +
", cardType='" + cardType + '\'' +
", cardNo='" + cardNo + '\'' +
", userName='" + userName + '\'' +
", userSex='" + userSex + '\'' +
", userAge='" + userAge + '\'' +
", userRole='" + userRole + '\'' +
'}';
}
}
(9)开发数据访问层
数据访问层接口开发:
根据接口文档开发 UserMapper接口
UserMapepr.xml:
<?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.bjpowernode.mapper.UserMapper">
<!--完成实体类与表中列名的映射 因为实体类属性与表中列名不一致 使用resultMap-->
<resultMap id="usermap" type="user">
<id property="userId" column="user_id"></id>
<result property="cardType" column="card_type"></result>
<result property="cardNo" column="card_no"></result>
<result property="userName" column="user_name"></result>
<result property="userSex" column="user_sex"></result>
<result property="userAge" column="user_age"></result>
<result property="userRole" column="user_role"></result>
</resultMap>
<!--指定全部列名-->
<sql id="allColumns">
user_id,card_type,card_no,user_name,user_sex,user_age,user_role
</sql>
<!--
根据条件分页获取分页数据
List<User> selectUserPage(
@Param("userName")
String userName,
@Param("userSex")
String userSex,
@Param("startRow")
int startRow);
-->
<select id="selectUserPage" resultMap="usermap">
select <include refid="allColumns"></include>
from user
<where>
<if test="userName != null and userName != ''">
and user_name like concat('%',#{userName},'%')
</if>
<if test="userSex != null and userSex != ''">
and user_sex = #{userSex}
</if>
</where>
limit #{startRow},5
</select>
<!--
添加用户
int createUser(User user);
-->
<insert id="createUser" parameterType="user">
insert into user values(#{userId},#{cardType},#{cardNo},#{userName},#{userSex},#{userAge},#{userRole})
</insert>
<!--
根据用户id删除用户
int deleteUserById(String userId);
-->
<delete id="deleteUserById" parameterType="String">
delete from user where user_id = #{userId}
</delete>
<!--
获取总行数
int getRowCount(
@Param("userName")
String userName,
@Param("userSex")
String userSex);
-->
<select id="getRowCount" resultType="int">
select count(*)
from user
<where>
<if test="userName != null and userName != ''">
and user_name like concat('%',#{userName},'%')
</if>
<if test="userSex != null and userSex != ''">
and user_sex = #{userSex}
</if>
</where>
</select>
</mapper>
(10)开发业务逻辑层
UserService接口
实现类:
(11)单元测试业务逻辑层
package test;
import com.bjpowernode.pojo.User;
import com.bjpowernode.service.UserService;
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;
import java.util.List;
@RunWith(SpringJUnit4ClassRunner.class) //启动spring容器
@ContextConfiguration(locations = {
"classpath:applicationContext_mapper.xml",
"classpath:applicationContext_service.xml"})
public class MyTest {
@Autowired
UserService userService;
@Test
public void testSelectUserPage(){
//不加条件 起始页0 前5条数据
List<User> list = userService.selectUserPage(null,null,0);
list.forEach(user -> System.out.println(user));
//加条件 性别男
List<User> list1 = userService.selectUserPage(null,"男",0);
list1.forEach(user -> System.out.println(user));
}
@Test
public void testDeleteUserById(){
int num = userService.deleteUserById("15968162087363060");
System.out.println(num);
}
@Test
public void testGetRowCount(){
//没有任何条件 查总行数
int num = userService.getRowCount(null,null);
System.out.println(num);
//有几个用户是男性
int num1 = userService.getRowCount(null,"男");
System.out.println(num1);
}
@Test
public void testCreateUser(){
User user = new User("3423423432","身份证","123456345678324567","哈哈",
"男","23","工人");
int num = userService.createUser(user);
System.out.println(num);
}
}
(12)开发控制器
package com.bjpowernode.controller;
import com.bjpowernode.pojo.User;
import com.bjpowernode.service.UserService;
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("/user")
public class UserController {
//切记:一定要有业务逻辑层对象
@Autowired
UserService userService;
//这里写这个其实没用 因为UserMapping.xml中的sql语句被写死了
public static final int PAGE_SIZE = 5;
// /user/selectUserPage?userName=z&userSex=男&page=null
@RequestMapping("/selectUserPage")
@ResponseBody //使用ajax请求 要用这个将返回的数据放在响应体中
public List<User> selectUserPage(String userName, String userSex, Integer page) {
//根据页码计算起始行
int startRow = 0;
if (page != null) {
startRow = (page - 1) * PAGE_SIZE;
}
return userService.selectUserPage(userName, userSex, startRow);
}
// /user/getRowCount?userName=z&userSex=男
@RequestMapping("/getRowCount")
@ResponseBody
public int getRowCount(String userName, String userSex) {
return userService.getRowCount(userName, userSex);
}
// /user/deleteUserById?userId= 15968162087363060
@RequestMapping("/deleteUserById")
@ResponseBody
public int deleteUserById(String userId) {
return userService.deleteUserById(userId);
}
// /user/createUser(参数见下面 没有userId)
@RequestMapping("/createUser")
@ResponseBody
public int createUser(User user) {
String userId = System.currentTimeMillis() + ""; //随机生成userId
user.setUserId(userId);
return userService.createUser(user);
}
}
测试控制器:
修改控制器 支持跨域访问 和 端口修改
前端 占用8080端口
后端占用 8082端口
前后台交流涉及跨域访问
跨端口是跨域访问的一种 跨协议也是跨域访问
设置 前端vue访问后端的端口为8082
4.2 Vue实现前台功能
(1)Element UI 和 node.js
(2)项目构建
找到老师提供的vue项目在idea中打开
在vue项目终端输入npm install 点击右上方的运行
再启动后台项目即可