SpringMVC学习笔记（2）——B站动力节点

004- SSM整合

4.1 SSM整合后台功能

（1）SSM整合步骤

---

（2）数据库表

---

（3）创建webapp maven模块

使用maven创建模块 webapp

---

（4）修改pom.xml

修改pom.xml 刷新Maven之后 会自动显示哪些依赖可以更新 但是不一定最新就是最好

<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.bjpowernodegroupId>
  <artifactId>springmvc_ssmartifactId>
  <version>1.0version>
  <packaging>warpackaging>

  <name>springmvc_ssm Maven Webappname>
  
  <url>http://www.example.comurl>

  <properties>
    <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
    <maven.compiler.source>16maven.compiler.source>
    <maven.compiler.target>16maven.compiler.target>

    
    
    <junit.version>4.13.2junit.version>
    
    <spring.version>5.3.21spring.version>
    
    <mybatis.version>3.5.6mybatis.version>
    
    <mybatis.spring.version>1.3.1mybatis.spring.version>
    
    <mybatis.paginator.version>1.2.15mybatis.paginator.version>
    
    <mysql.version>8.0.28mysql.version>
    
    <slf4j.version>1.6.4slf4j.version>
    
    <druid.version>1.2.8druid.version>
    
    <pagehelper.version>5.3.0pagehelper.version>
    
    <jstl.version>1.2jstl.version>
    
    <servlet-api.version>4.0.1servlet-api.version>
    
    <jsp-api.version>2.0jsp-api.version>
    
    <jackson.version>2.13.2jackson.version>
  properties>

  <dependencies>
    
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-contextartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-beansartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-webmvcartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-jdbcartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-aspectsartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-jmsartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-context-supportartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-testartifactId>
      <version>5.2.5.RELEASEversion>
    dependency>

    
    <dependency>
      <groupId>org.mybatisgroupId>
      <artifactId>mybatisartifactId>
      <version>${mybatis.version}version>
    dependency>
    <dependency>
      <groupId>org.mybatisgroupId>
      <artifactId>mybatis-springartifactId>
      <version>${mybatis.spring.version}version>
    dependency>
    <dependency>
      <groupId>com.github.miemiedevgroupId>
      <artifactId>mybatis-paginatorartifactId>
      <version>${mybatis.paginator.version}version>
    dependency>
    <dependency>
      <groupId>com.github.pagehelpergroupId>
      <artifactId>pagehelperartifactId>
      <version>${pagehelper.version}version>
    dependency>

    
    <dependency>
      <groupId>mysqlgroupId>
      <artifactId>mysql-connector-javaartifactId>
      <version>${mysql.version}version>
    dependency>
    
    <dependency>
      <groupId>com.alibabagroupId>
      <artifactId>druidartifactId>
      <version>${druid.version}version>
    dependency>

    
    <dependency>
      <groupId>junitgroupId>
      <artifactId>junitartifactId>
      <version>${junit.version}version>
      <scope>testscope>
    dependency>

    
    <dependency>
      <groupId>jstlgroupId>
      <artifactId>jstlartifactId>
      <version>${jstl.version}version>
    dependency>
    <dependency>
      <groupId>javax.servletgroupId>
      <artifactId>javax.servlet-apiartifactId>
      <version>4.0.1version>
      <scope>providedscope>
    dependency>
    <dependency>
      <groupId>javax.servletgroupId>
      <artifactId>jsp-apiartifactId>
      <scope>providedscope>
      <version>${jsp-api.version}version>
    dependency>

    
    <dependency>
      <groupId>com.fasterxml.jackson.coregroupId>
      <artifactId>jackson-databindartifactId>
      <version>${jackson.version}version>
    dependency>

  dependencies>

  <build>
    <finalName>springmvc_ssmfinalName>
    <pluginManagement>
      <plugins>
        <plugin>
          <artifactId>maven-clean-pluginartifactId>
          <version>3.1.0version>
        plugin>
        
        <plugin>
          <artifactId>maven-resources-pluginartifactId>
          <version>3.0.2version>
        plugin>
        <plugin>
          <artifactId>maven-compiler-pluginartifactId>
          <version>3.8.0version>
        plugin>
        <plugin>
          <artifactId>maven-surefire-pluginartifactId>
          <version>2.22.1version>
        plugin>
        <plugin>
          <artifactId>maven-war-pluginartifactId>
          <version>3.2.2version>
        plugin>
        <plugin>
          <artifactId>maven-install-pluginartifactId>
          <version>2.5.2version>
        plugin>
        <plugin>
          <artifactId>maven-deploy-pluginartifactId>
          <version>2.8.2version>
        plugin>
      plugins>
    pluginManagement>

    
    <resources>
      <resource>
        <directory>src/main/javadirectory>
        <includes>
          <include>**/*.propertiesinclude>
          <include>**/*.xmlinclude>
        includes>
        <filtering>falsefiltering>
      resource>
      <resource>
        <directory>src/main/resourcesdirectory>
        <includes>
          <include>**/*.propertiesinclude>
          <include>**/*.xmlinclude>
        includes>
        <filtering>falsefiltering>
      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 数据访问层配置文件

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

    
    <bean class="org.mybatis.spring.SqlSessionFactoryBean">
        
        <property name="dataSource" ref="dataSource">property>

        
        <property name="configLocation" value="classpath:SqlMapConfig.xml">property>

        
        <property name="typeAliasesPackage" value="com.bjpowernode.pojo">property>
    bean>

    
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.bjpowernode.mapper">property>
    bean>
beans>

---

spring 业务逻辑层配置文件

<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配置文件

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

    
beans>

---

（6）配置web.xml

web.xml设置

<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>encodefilter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
        <init-param>
            <param-name>encodingparam-name>
            <param-value>UTF-8param-value>
        init-param>
        <init-param>
            <param-name>forceRequestEncodingparam-name>
            <param-value>trueparam-value>
        init-param>
        <init-param>
            <param-name>forceResponseEncodingparam-name>
            <param-value>trueparam-value>
        init-param>
    filter>
    <filter-mapping>
        <filter-name>encodefilter-name>
        <url-pattern>/*url-pattern>
    filter-mapping>

    
    <servlet>
        <servlet-name>springmvcservlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
        <init-param>
            <param-name>contextConfigLocationparam-name>
            <param-value>classpath:springmvc.xmlparam-value>
        init-param>
    servlet>
    <servlet-mapping>
        <servlet-name>springmvcservlet-name>
        <url-pattern>/url-pattern>
    servlet-mapping>
    
    
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
    listener>
    <context-param>
        <param-name>contextConfigLocationparam-name>
        <param-value>classpath:applicationContext_*.xmlparam-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：

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

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

    
    <insert id="createUser" parameterType="user">
        insert into user values(#{userId},#{cardType},#{cardNo},#{userName},#{userSex},#{userAge},#{userRole})
    insert>

    
    <delete id="deleteUserById" parameterType="String">
        delete from user where user_id = #{userId}
    delete>
    
    
    <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

Element UI官网

（2）项目构建

---

找到老师提供的vue项目在idea中打开

在vue项目终端输入npm install 点击右上方的运行
再启动后台项目即可