SpringMVC学习（三）----SSM整合

已于 2022-07-18 15:22:35 修改
阅读量188 收藏 1
点赞数
分类专栏： Java 文章标签： spring 学习 mybatis maven java
于 2022-07-09 15:13:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yshjvc/article/details/125657804
版权

SSM整合的步骤---后端编写

1.创建数据库表

2.新建一个maven的项目，webapp的模板

3.修改目录

4.修改pom.xml文件

<?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>org.example</groupId>
  <artifactId>SpringMVC_SSM</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

    <!-- 集中定义依赖版本号 -->
    <properties>
        <!--单元测试的依赖-->
        <junit.version>4.12</junit.version>
        <!--spring的相关依赖-->
        <spring.version>5.2.5.RELEASE</spring.version>
        <!--mybatis的相关依赖-->
        <mybatis.version>3.5.1</mybatis.version>
        <!--mybaits与spring整合的依赖-->
        <mybatis.spring.version>1.3.1</mybatis.spring.version>
        <!--mybatis支持的分页插件的依赖-->
        <mybatis.paginator.version>1.2.15</mybatis.paginator.version>
        <!--mysql的依赖-->
        <mysql.version>5.1.32</mysql.version>
        <!--slf4j日志依赖-->
        <slf4j.version>1.6.4</slf4j.version>
        <!--阿里的数据库连接池-->
        <druid.version>1.1.12</druid.version>
        <!--分页插件的依赖-->
        <pagehelper.version>5.1.2</pagehelper.version>
        <!--JSTL的依赖(jsp的标准标签库)-->
        <jstl.version>1.2</jstl.version>
        <!--servlet的依赖-->
        <servlet-api.version>3.0.1</servlet-api.version>
        <!--jsp的依赖-->
        <jsp-api.version>2.0</jsp-api.version>
        <!--jackson的依赖,springmvc框架默认进行JSON转换的依赖工具-->
        <jackson.version>2.9.6</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>3.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>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
        </plugins>
        <!--识别所有的配置文件-->
        <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.properties文件（数据库信息文件）

jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/**?useUnicode=true&characterEncoding=utf-8
jdbc.username=****
jdbc.password=****

6.添加SqlMapCofig.xml文件（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>
    <!--设置日志输出语句,显示相应操作的sql语名-->
    <settings>
        <setting name="logImpl" value="STDOUT_LOGGING"/>
    </settings>
    
</configuration>

7.添加applicationContext_mapper.xml文件（数据访问层的核心配置文件----Spring控制MyBatis）

<?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">
    <!--读取属性文件jdbc.properties-->
    <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="password" value="${jdbc.password}"></property>
        <property name="username" value="${jdbc.username}"/>
    </bean>
    <!--    配置SqlSessionFactoryBean类-->
    <bean class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--    配置数据源-->
        <property name="dataSource" ref="dataSource"/>
        <!-- 配置MyBatis的核心配置文件-->
        <property name="configLocation" value="classpath:SqlMapConfig.xml"></property>
        <!--  注册实体类的的别名-->
        <property name="typeAliasesPackage" value="com.ys.pojo"></property>
    </bean>
    <!--    注册mapper.xml-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.ys.mapper"/>
    </bean>


</beans>

8.添加applicationContext_service.xml文件（业务逻辑层的核心配置文件----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" xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:aop="http://www.springframework.org/schema/aop"
       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/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop https://www.springframework.org/schema/aop/spring-aop.xsd">
<!--添加包扫描-->
    <context:component-scan base-package="com.ys.service"></context:component-scan>
<!--   添加事务管理器 -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property>
    </bean>
<!--    配置事务切面-->
    <tx:advice id="interceptor" transaction-manager="transactionManager">
        <tx:attributes>
            <tx:method name="*select*" read-only="true"/>
            <tx:method name="*find*" read-only="true"/>
            <tx:method name="*serach*" read-only="true"/>
            <tx:method name="*get*" 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="*insert*" propagation="REQUIRED"/>
            <tx:method name="*" propagation="SUPPORTS"/>
        </tx:attributes>
    </tx:advice>
<!--    配置切入点+绑定事务-->
<aop:config>
<!--    * com.ys.service.*.*(..)->任意返回值的com.ys.service包的任意类 任意方法名任意参数的方法-->
    <aop:pointcut id="cut" expression="execution(* com.ys.service.*.*(..))"/>
    <aop:advisor advice-ref="interceptor" pointcut-ref="cut"></aop:advisor>
</aop:config>
</beans>

9.添加springmvc文件（界面层----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.ys.controller"></context:component-scan>

    <!--    添加注解驱动（ajax和date都必须要）-->
    <mvc:annotation-driven></mvc:annotation-driven>

</beans>

10.删除web.xml新建一个版本高一点的web.xml并注册springmvc，设置中文编码并注册spring框架

<?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>
        <!--  查看CharacterEncodingFilter中，得到的三个变量
	private String encoding; 字符格式
	private boolean forceRequestEncoding = false;  请求的强制转换编码
	private boolean forceResponseEncoding = false; 响应的强制转换编码
-->
        <!--        配置参数-->
        <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>
<!--    绑定Spring配置文件-->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext_*.xml</param-value>
    </context-param>
</web-app>

11.创建实体类User

package com.ys.pojo;

public class User {
    private Integer userId;
    private String cardType;
    private Integer cardNo;
    private String userName;
    private String userSex;
    private Integer userAge;

    @Override
    public String toString() {
        return "User{" +
                "userId=" + userId +
                ", cardType='" + cardType + '\'' +
                ", cardNo=" + cardNo +
                ", userName='" + userName + '\'' +
                ", userSex='" + userSex + '\'' +
                ", userAge=" + userAge +
                ", userRole='" + userRole + '\'' +
                '}';
    }

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public String getCardType() {
        return cardType;
    }

    public void setCardType(String cardType) {
        this.cardType = cardType;
    }

    public Integer getCardNo() {
        return cardNo;
    }

    public void setCardNo(Integer 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 Integer getUserAge() {
        return userAge;
    }

    public void setUserAge(Integer userAge) {
        this.userAge = userAge;
    }

    public String getUserRole() {
        return userRole;
    }

    public void setUserRole(String userRole) {
        this.userRole = userRole;
    }

    public User(Integer userId, String cardType, Integer cardNo, String userName, String userSex, Integer 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 User() {
    }

    private String userRole;
}

12.新建UserMapper.java接口

package com.ys.mapper;

import com.ys.pojo.User;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface UserMapper {
//    分页
  List<User>selectUserPage(
          @Param("userName") String userName,//作为筛选的条件
          @Param("userSex") String userSex,//作为筛选的条件
          @Param("startRow") int startRow);
  //startRow用于返回分页时的起始行，在分页的limit中不能有表达式，所以t_user3应该提前算出并返回

//    将数据表中的除主键的其他字段封装在user中
//    增加
    int createUser(User user);

//    删除   根据用户编码做删除(主键)
    int deleteUserById(String userId);

//    获取总行数
    int getRowCount(@Param("userName") String userName,//作为筛选的条件
                    @Param("userSex") String userSex);//作为筛选的条件
}

13.新建UserMapper.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.ys.mapper.UserMapper">
<!--   实体类的变量与数据库表中的字段名不同，需要先完成实体类与表中字段的映射
    private Integer userId;
    private String cardType;
    private Integer cardNo;
    private String userName;
    private String userSex;
    private Integer userAge;
    private String userRole;
    -->
    <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>

<!--    增加 values中的值和表中字段顺序相同-->
    <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>

14.新建service接口和实现类

package com.ys.service;

import com.ys.pojo.User;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface UserService {
//  分页查询
    List<User> selectUSerPage(String userName, String userSex, int startRow);
//增加
    int createUser(User user);
//    删除
     int deleteUserById(String userId);
//    计算总行数
int getRowCount(String userName, String userSex);

}


package com.ys.service.Impl;

import com.ys.mapper.UserMapper;
import com.ys.pojo.User;
import com.ys.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService {
    //切记：业务逻辑层一定会有数据访问层的对象
    @Autowired
    UserMapper userMapper;

    @Override
    public List<User> selectUSerPage(String userName, String userSex, int startRow) {
        return userMapper.selectUserPage(userName,userSex,startRow);
    }

    @Override
    public int createUser(User user) {
        return userMapper.createUser(user);
    }

    @Override
    public int deleteUserById(String userId) {
        return userMapper.deleteUserById(userId);
    }

    @Override
    public int getRowCount(String userName, String userSex) {
        return userMapper.getRowCount(userName,userSex);
    }
}

15.新建测试类，完成所有功能的测试

在测试添加功能时，如果出现错误，但是数据库中又出现了该数据，可能是重复提交所造成的修改方法如下：进入下列文件中，取消掉勾选

package test;

import com.ys.pojo.User;
import com.ys.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"})
//使用Spring接管测试
public class MyTest {
    @Autowired
    UserService userService;
    @Test
    public void selectUSerPageTest(){
        List<User> list=userService.selectUSerPage("三","男",0);
        list.forEach(user -> System.out.println(user));
    }
    @Test
    public void createUserTest(){
        User user=new User(154568793,"2",3,"4","5",6,"7");
        int list=userService.createUser(user);
        System.out.println(list);
    }

    @Test
    public void deleteUserByIdTest(){
        int list=userService.deleteUserById("154568793");
        System.out.println(list);
    }

    @Test
    public void getRowCount(){
       int list=userService.getRowCount(null,null);
      System.out.println(list);
    }


}

file->setting->Buid,Execution,Deployment->Build Tools->Maven->Runner

 

16.新建控制器，完成所有功能

package com.ys.controller;

import com.ys.pojo.User;
import com.ys.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;

//@RestController  如果本类中的请求全部都是ajax请求，那么可以使用此注解，
// 则方法上的@ResponseBody注解可以不写  且@RestController是替换的@Controller
@Controller
@RequestMapping("/user")//添加虚拟路径
public class UserController {
    //    界面层必须有业务逻辑层的对象
    @Autowired
    UserService userService;
    //    定义每页的数据条数
    public static final int Page_Size = 5;

    @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);
    }


    //    获取总行数
    @RequestMapping("/getRowCount")
    @ResponseBody
    public int getRowCount(String userName, String userSex) {
        return userService.getRowCount(userName, userSex);
    }

    //    增加
    @RequestMapping("/createUser")
    @ResponseBody
    public int createUser(User user) {
        int userId=(int)(Math.random()*999999999);
        user.setUserId(userId);
        return userService.createUser(user);
    }

    //    删除
    @RequestMapping("/deleteUserById")
    @ResponseBody
    public int createUser(String userId) {
        return userService.deleteUserById(userId);
    }
}

17.浏览器测试功能

 

 

18.完整目录一览

 SSM整合Vue---前端编写（使用Element UI框架）

Element的官网Element - The world's most popular Vue UI framework

在UserController中的@Controller上面一行添加

@CrossOrigin//支持跨域访问，即前后端的端口不一致时也支持访问

安装node.js---默认路径，一直下一步即可

验证node.js 是否安装成功

使用命令行进入到当前要运行的vue的项目的目录下,运行以下命令进行项目搭建.

<vuedemo01是已经完成实现功能的前段项目，该资源私聊可发>

cd E:\vuedemo01  进入到当前项目的目录下

npm i element -ui -S  下载elementUI的框架

npm install  //打包项目

npm install --save vue-axios  //下载跨域访问组件axios

 在idea安装Vue

在SSM整合的项目中，修改Tomcat服务器，并进行启动

 使用idea打开vuedemo01文件，在新窗口打开，点击配置选择npm进行如下配置后运行Tomcat

 弹出如下页面

 点击UserHome进入页面，前后端完整数据交互

vue项目内容详解

build 项目构建(webpack)相关代码

config 配置目录，包括端口号等。我们初学可以使用默认的。

node_modules npm 加载的项目依赖模块

src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

    assets: 放置一些图片，如logo等。

    components: 目录里面放了一个组件文件，可以不用。

    App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。

    main.js: 项目的核心文件。

static 静态资源目录，如图片、字体等。

test 初始测试目录，可删除

.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。

index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。

package.json 项目配置文件。

README.md 项目的说明文档，markdown 格式

 UserHome.vue解析

UserHome.vue是所有功能实现的组件.与后台跨域访问,分页显示数据,并实现增加,按主键删除,批量删除,更新,多条件查询等功能.


A.首先确定钩子函数中的启动访问函数
	  created() {
	    this.handlePageChange();           ===>分页
	    this.getRowCount();                ===>计算总行数
	  }
B.分页函数解析
		 handlePageChange() {
		 //定义变量,封装将要提交的数据
	     let postData=this.qs.stringify({
	        page:this.currentPage,
	        userName:this.formInline.search1,
	        userSex:this.formInline.search2
	      });
	      this.$axios({                    ==>发出跨域访问的请求,参考$.ajax();
	        method:'post',                 ==>请求提交的方式
	        url:'/api/user/selectUserPage',==>服务器的地址
	        data:postData  //this.qs.stringify==>{"page":1,"userName":"","userSex":""}                               ==>提交的数据
	      }).then(response=>{              ==>成功后进入到这里
	        this.tableData=response.data;  ==>数据绑定,返回的5个用户的json数据,一下子绑定给表格
	      }).catch(error=>{                ==>出错了进入到这里
	        console.log(error);
	      })
	    }
 C.计算总行数函数分析
	      getRowCount() {
	      //创建变量,提取文本框和下拉列表框中的数据
	      let postData=this.qs.stringify({
	        userName:this.formInline.search1,
	        userSex:this.formInline.search2
	      });
	      this.$axios({                  ==>发出跨域访问的请求,参考$.ajax();
	        method:'post',               ==>请求提交的方式
	        url:'/api/user/getRowCount', ==>服务器的地址
	        data:postData                ===>提交的数据
	      }).then(response=>{
	        this.total=response.data;    ==>返回的总行数赋值给变量total
	      }).catch(error=>{
	        console.log(error);
	      })
	    },
D.按主键删除分析
	  //弹出提示框,让用户确定是否删除 
      this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'                      ==>黄色的警告图标
      }).then(() => {                        ==>用户点击确定后进入到这里
        let postData = this.qs.stringify({   ==>封装成JSON数据格式
          userId: row.userId,                ==>将要提交的主键值
        });
        this.$axios({                      ==>发出跨域访问的请求,参考$.ajax();
          method: 'post',                    ==>请求提交的方式
          url: '/api/user/deleteUserById',
          data: postData  //{"userId":15968162893439470}
        }).then(response => {                ==>跨域请求成功后进入这里
          this.getRowCount();     ==>计算删除后的总行数,进行分页插件的页码变化
          ...
          this.handlePageChange();            ==>删除后重新分页
          this.$message({                     ==>删除成功后弹框
            type: 'success',
            message: '删除成功!'
          });          
        }).catch(error => {
          console.log(error);
        });

      }).catch(() => {                        ===>用户点击取消后进入到这里
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

安城倾目
关注
专栏目录
SpringMvc---ssm整合--接口测试（3）
PeterLee3333的博客
05-12 387
一 业务层测试 在test下建立一个和main方法中同样层级的service包，在service包下新建测试类 package com.service; import com.config.SpringConfig; import com.domain.Book; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.annotation.Autowired;
SpringMVC精品资源-- SSM框架——详细整合教程（Spring+SpringMVC+MyBatis）.zip
02-18
SSM框架，即Spring、SpringMVC和...这个"SpringMVC精品资源-- SSM框架——详细整合教程（Spring+SpringMVC+MyBatis）"压缩包可能包含了从基础概念到实战示例的全面教程，对于学习和提升SSM框架的整合应用大有裨益。
jackson 讲解
xuanmuzhao的专栏
05-05 1165
jackson-datebind： 依赖情况 &lt;properties&gt; ... &lt;!-- Use the latest version whenever possible. --&gt; &lt;jackson.version&gt;2.9.5&lt;/jackson.version&gt; ... &lt;/properties&gt; &lt;depe...
ASP.NET MVC 的自定义模型属性别名绑定
weixin_33979363的博客
01-11 873
最近在研究 ASP.NET MVC 模型绑定，发现 DefaultModelBinder 有一个弊端，就是无法实现对浏览器请求参数的自定义，最初的想法是想为实体模型的属性设置特性（Attribute），然后通过取得设置的特性值对属性进行赋值，研究了好久 MVC 源码之后发现可以通过重写 DefaultModelBinder 的 BindProperty 方法可以达到预期的目的。 ASP.NET ...
springmvc整合mybatis-plus
爱学习的大雄的博客
06-04 1692
最近在做项目，最初使用的框架是：spring+mybatis+springmvc+redis+jwt+jsp，后来发现项目中需要编写的sql语句大多重复且简单，为了简化开发，节省开发时间，决定将mybatis换为mybatis-plus进行开发导入依赖 更换spring的xml配置文件中对于mybatis的配置 项目中去使用mybatis-plus简化开发创建实体类创建mapper层（或者说dao层） 创建mapper.xml测试类测试 整合时遇到的问题 无法使用mybatis-pl
springMVC：整合SSM--狂神说Java
zhanghanhhh的博客
07-19 1199
控制层，负责请求转发，接收页面（前端orapp）传过来的参数，并调用service层中定义的方法进行业务操作，再将处理结果返回给前端。我们通过将dao层封装成Service层，让Service)层去调用dao层的接口，有利于业务逻辑的独立性。后端开发先数据库设计出所有的表，然后每一张表设计出DAO层，具体到对应某个表，某个实体类的增删改查，用于对数据库的增删改查，这是对SQL语句的封装。就可以调用service接口进行业务处理，具体要调用以及定义的dao接口。业务逻辑层，实现复杂的业务逻辑处理。
SpringMVC(三) --------- SSM 整合开发案例
在森林里麋了鹿
02-22 2690
目录前言一、搭建 SSM 开发环境Maven pom.xml配置 web.xml二、SSM 整合注解式开发建表定义包、组织程序的结构编写配置文件定义 web.xml实体类 Student定义 Dao 接口 与 sql 映射文件定义 Service 接口与实现类处理器定义 前言 SSM 编程，即 SpringMVC + Spring + MyBatis 整合，是当前最为流行的 JavaEE 开发技术架构。其实 SSM 整合的实质，仅仅就是将 MyBatis整合入 Spring。因为 SpringMVC原本就
SpringMVC--SSM整合
aruba的博客
05-23 183
上篇SpringMVC--请求和响应中，我们对SpringMVC的基本使用有了一定的了解，但对于后台开发还差点火候，即数据库交互，接下来通过整合Mybatis来完成SSM三大框架联合运用开发后台 一、项目配置 1. 导入依赖 <!--spring核心容器包--> <dependency> <groupId>org.spri...
SSM框架整合-404
qq_44985812的博客
05-29 1405
背景 今天在做SSM框架整合时，又遇到了404问题。这次不是因为自己的路径写错了，所以检查了好长时间路径，都没有发现问题。 原因 在整合SSM框架时，需要在web.xml文件中配置分发器。如果不配置分发器，就会导致请求无法找到对应的action，最终报404错误。 需要在web.xml文件中做如下配置： <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
springmvc-210805-02---ssm整合流程
白光一的博客
08-06 199
springmvc-210805-02—ssm整合流程 整合SSM 实现步骤 整合SSM SpringMVC：视图层，界面层，负责接受请求，显示处理结果。 Spring：业务层，管理service，dao，工具类对象的。 MyBatis：持久层，访问数据库 SpringMVC容器，管理Controller控制器对象。 Spring容器：管理Service，Dao，工具类对象。 我们要把使用的对象交给合适的容器创建和管理， 把Controller和web开发相关的对象交给SpringMVC容器，这些
SpringMVC-SSM整合
xiaoyixiao_的博客
05-16 312
目录SSM整合开发思路实现步骤 SSM整合开发思路 SSM整合代码仓库地址https://gitee.com/czshh0628/ssm_sample SSM即SpringMVC+Spring+Mybatis整合，SSM整合的实质，仅仅就是将Mybatis整合入Spring，因为SpringMVC原本就是Spring的一部分，不用专门整合 SSM整合的实现方式分为两种：基于XML配置方式，基于注解方式 分工 SpringMVC：视图层，负责接收请求，显示处理结果 Spring：业务层，管理service
SpringMVC精品资源--优雅整合SSM框架：SpringMVC + Spring + MyBatis（图书预约.zip
02-18
SpringMVC、Spring和MyBatis是Java Web开发中非常重要的三个框架，它们共同构建了SSM（Spring、SpringMVC、MyBatis）架构，为开发者提供了强大的后端服务支持。下面将详细介绍这三个框架以及如何优雅地整合它们。 1...
SpringMVC精品资源--SSM（spring+springmvc+mybatis）框架 Demo.zip
02-18
【标题】"SpringMVC精品资源--SSM（spring+springmvc+mybatis）框架 Demo.zip" 提供的是一份关于使用Spring、SpringMVC和MyBatis这三大开源框架集成开发的示例项目。这个压缩包可能包含了完整的源代码、配置文件、...
SpringMVC精品资源--SSM(Spring+SpringMVC+Mybatis)新闻管理系统.zip
02-18
【SpringMVC精品资源--SSM(Spring+SpringMVC+Mybatis)新闻管理系统】是一个集成性的项目，旨在帮助开发者理解并掌握SSM框架在实际应用中的整合与运用。这个资源包可能包含了一系列的代码示例、配置文件以及教程文档...
SpringMVC精品资源--基于SSM框架简单的后台权限管理系统，整合spring + springmvc + s.zip
02-18
【描述】中提到的“整合spring + springmvc + s”，这里的"s"可能是误打或者遗漏，一般SSM框架指的是Spring、SpringMVC和MyBatis。整合SSM意味着将这三个组件协同工作，创建一个可以处理业务逻辑、控制流程和数据...
spring中bean的四种创建方式
QQ903275718的博客
10-31 380
spring创建bean的四种方式
SpringSession源码分析
最新发布
lkr_lkr的博客
11-01 276
默认对常规Session的理解和使用，如何使用Set-Cookie。
基于SSM+VUE历史车轮网站JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解
卓越软件开发的博客
11-01 805
源代码+数据库+LW文档（1万字以上）+开题报告+答辩稿部署教程+代码讲解+代码时间修改教程。
Spring事件监听机制
mrguif的博客
10-31 880
在容器刷新的 initApplicationEventMulticaster(); 步骤中 会初始化一个事件多播器ApplicationEventMulticaster（默认为SimpleApplicationEventMulticaster） 赋值给 AbstractApplicationContext 所持有的多播器成员 applicationEventMulticaster
SSM到RBAC：MyBatis-Spring-SpringMVC-Hibernate-Shiro深度学习
"高级框架阶段教程，涵盖了MyBatis、Spring、SpringMVC、SSM、RBAC权限控制、Hibernate、Shiro等多个热门IT技术领域，包括视频讲解、源代码示例及学习笔记。" 在IT行业中，框架的使用是提升开发效率、保证项目稳定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值