SSM整合（单元测试、结果封装、异常处理）

雨点打透心脏的1/2处 2024-03-22 19:06 78阅读 0赞

#### 文章目录 ####

*   *  1，SSM整合
     *   *  1.1 流程分析
         *  1.2 整合配置
         *   *  步骤1：创建Maven的web项目
             *  步骤2:添加依赖
             *  步骤3:创建项目包结构
             *  步骤4:创建SpringConfig配置类
             *  步骤5:创建JdbcConfig配置类
             *  步骤6:创建MybatisConfig配置类
             *  步骤7:创建jdbc.properties
             *  步骤8:创建SpringMVC配置类
             *  步骤9:创建Web项目入口配置类
         *  1.3 功能模块开发
         *   *  步骤1:创建数据库及表
             *  步骤2:编写模型类
             *  步骤3:编写Dao接口
             *  步骤4:编写Service接口和实现类
             *  步骤5:编写Contorller类
         *  1.4 单元测试
         *   *  步骤1:新建测试类
             *  步骤2:注入Service类
             *  步骤3:编写测试方法
         *  1.5 PostMan测试
         *   *  新增
             *  修改
             *  删除
             *  查询单个
             *  查询所有
     *  2，统一结果封装
     *   *  2.1 表现层与前端数据传输协议定义
         *  2.2 表现层与前端数据传输协议实现
         *   *  2.2.1 环境准备
             *  2.2.2 结果封装
             *   *  步骤1:创建Result类
                 *  步骤2:定义返回码Code类
                 *  步骤3:修改Controller类的返回值
                 *  步骤4:启动服务测试
     *  3，统一异常处理
     *   *  3.1 问题描述
         *  3.2 异常处理器的使用
         *   *  3.2.1 环境准备
             *  3.2.2 使用步骤
             *   *  步骤1:创建异常处理器类
                 *  步骤2:让程序抛出异常
                 *  步骤3:运行程序，测试
                 *  异常处理器类返回结果给前端
             *  知识点1：@RestControllerAdvice
             *  知识点2：@ExceptionHandler
         *  3.3 项目异常处理方案
         *   *  3.3.1 异常分类
             *  3.3.2 异常解决方案
             *  3.3.3 异常解决方案的具体实现
             *   *  步骤1:自定义异常类
                 *  步骤2:将其他异常包成自定义异常
                 *  步骤3:处理器类中处理自定义异常
                 *  步骤4:运行程序
     *  4，前后台协议联调
     *   *  4.1 环境准备
         *  4.2 列表功能
         *  4.3 添加功能
         *  4.4 添加功能状态处理
         *  4.5 修改功能
         *  4.6 删除功能

**内容**

>  *  完成SSM的整合开发
>  *  能够理解并实现统一结果封装与统一异常处理
>  *  能够完成前后台功能整合开发

### 1，SSM整合 ###

前面我们已经把`Mybatis`、`Spring`和`SpringMVC`三个框架进行了学习，今天主要的内容就是把这三个框架整合在一起完成我们的业务功能开发，具体如何来整合，我们一步步来学习。

#### 1.1 流程分析 ####

(1) 创建工程

*  创建一个Maven的web工程
 *  pom.xml添加SSM需要的依赖jar包
 *  编写Web项目的入口配置类，实现`AbstractAnnotationConfigDispatcherServletInitializer`重写以下方法
    
     *  getRootConfigClasses() ：返回Spring的配置类->需要SpringConfig配置类
     *  getServletConfigClasses() ：返回SpringMVC的配置类->需要SpringMvcConfig配置类
     *  getServletMappings() : 设置SpringMVC请求拦截路径规则
     *  getServletFilters() ：设置过滤器，解决POST请求中文乱码问题

(2)SSM整合\[重点是各个配置的编写\]

*  SpringConfig
    
     *  标识该类为配置类 @Configuration
     *  扫描Service所在的包 @ComponentScan
     *  在Service层要管理事务 @EnableTransactionManagement
     *  读取外部的properties配置文件 @PropertySource
     *  整合Mybatis需要引入Mybatis相关配置类 @Import
        
         *  第三方数据源配置类 JdbcConfig
            
             *  构建DataSource数据源，DruidDataSouroce,需要注入数据库连接四要素， @Bean @Value
             *  构建平台事务管理器，DataSourceTransactionManager,@Bean
         *  Mybatis配置类 MybatisConfig
            
             *  构建SqlSessionFactoryBean并设置别名扫描与数据源，@Bean
             *  构建MapperScannerConfigurer并设置DAO层的包扫描
 *  SpringMvcConfig
    
     *  标识该类为配置类 @Configuration
     *  扫描Controller所在的包 @ComponentScan
     *  开启SpringMVC注解支持 @EnableWebMvc

(3)功能模块\[与具体的业务模块有关\]

*  创建数据库表
 *  根据数据库表创建对应的模型类
 *  通过Dao层完成数据库表的增删改查(接口+自动代理)
 *  编写Service层\[Service接口+实现类\]
    
     *  @Service
     *  @Transactional
     *  整合Junit对业务层进行单元测试
        
         *  @RunWith
         *  @ContextConfiguration
         *  @Test
 *  编写Controller层
    
     *  接收请求 @RequestMapping @GetMapping @PostMapping @PutMapping @DeleteMapping
     *  接收数据 简单、POJO、嵌套POJO、集合、数组、JSON数据类型
        
         *  @RequestParam
         *  @PathVariable
         *  @RequestBody
     *  转发业务层
        
         *  @Autowired
     *  响应结果
        
         *  @ResponseBody

#### 1.2 整合配置 ####

掌握上述的知识点后，接下来，我们就可以按照上述的步骤一步步的来完成SSM的整合。

##### 步骤1：创建Maven的web项目 #####

可以使用Maven的骨架创建

![1630561266760][]

##### 步骤2:添加依赖 #####

pom.xml添加SSM所需要的依赖jar包

<?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.itheima</groupId>
      <artifactId>springmvc_08_ssm</artifactId>
      <version>1.0-SNAPSHOT</version>
      <packaging>war</packaging>
    
      <dependencies>
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-webmvc</artifactId>
          <version>5.2.10.RELEASE</version>
        </dependency>
    
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-jdbc</artifactId>
          <version>5.2.10.RELEASE</version>
        </dependency>
    
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-test</artifactId>
          <version>5.2.10.RELEASE</version>
        </dependency>
    
        <dependency>
          <groupId>org.mybatis</groupId>
          <artifactId>mybatis</artifactId>
          <version>3.5.6</version>
        </dependency>
    
        <dependency>
          <groupId>org.mybatis</groupId>
          <artifactId>mybatis-spring</artifactId>
          <version>1.3.0</version>
        </dependency>
    
        <dependency>
          <groupId>mysql</groupId>
          <artifactId>mysql-connector-java</artifactId>
          <version>5.1.47</version>
        </dependency>
    
        <dependency>
          <groupId>com.alibaba</groupId>
          <artifactId>druid</artifactId>
          <version>1.1.16</version>
        </dependency>
    
        <dependency>
          <groupId>junit</groupId>
          <artifactId>junit</artifactId>
          <version>4.12</version>
          <scope>test</scope>
        </dependency>
    
        <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>javax.servlet-api</artifactId>
          <version>3.1.0</version>
          <scope>provided</scope>
        </dependency>
    
        <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.9.0</version>
        </dependency>
      </dependencies>
    
      <build>
        <plugins>
          <plugin>
            <groupId>org.apache.tomcat.maven</groupId>
            <artifactId>tomcat7-maven-plugin</artifactId>
            <version>2.1</version>
            <configuration>
              <port>80</port>
              <path>/</path>
            </configuration>
          </plugin>
        </plugins>
      </build>
    </project>

##### 步骤3:创建项目包结构 #####

[Masked5 / heima\_springmvc\_codes · GitCode][Masked5 _ heima_springmvc_codes _ GitCode]

![1630561591931][]

*  config目录存放的是相关的配置类
 *  controller编写的是Controller类
 *  dao存放的是Dao接口，因为使用的是Mapper接口代理方式，所以没有实现类包
 *  service存的是Service接口，impl存放的是Service实现类
 *  resources:存入的是配置文件，如Jdbc.properties
 *  webapp:目录可以存放静态资源
 *  test/java:存放的是测试类

##### 步骤4:创建SpringConfig配置类 #####

@Configuration
    @ComponentScan({
        "com.itheima.service"})
    @PropertySource("classpath:jdbc.properties")
    @Import({
        JdbcConfig.class,MyBatisConfig.class})
    @EnableTransactionManagement
    public class SpringConfig {
        
    }

##### 步骤5:创建JdbcConfig配置类 #####

public class JdbcConfig {
        
        @Value("${jdbc.driver}")
        private String driver;
        @Value("${jdbc.url}")
        private String url;
        @Value("${jdbc.username}")
        private String username;
        @Value("${jdbc.password}")
        private String password;
    
        @Bean
        public DataSource dataSource(){
        
            DruidDataSource dataSource = new DruidDataSource();
            dataSource.setDriverClassName(driver);
            dataSource.setUrl(url);
            dataSource.setUsername(username);
            dataSource.setPassword(password);
            return dataSource;
        }
    
        @Bean
        public PlatformTransactionManager transactionManager(DataSource dataSource){
        
            DataSourceTransactionManager ds = new DataSourceTransactionManager();
            ds.setDataSource(dataSource);
            return ds;
        }
    }

##### 步骤6:创建MybatisConfig配置类 #####

public class MyBatisConfig {
        
        @Bean
        public SqlSessionFactoryBean sqlSessionFactory(DataSource dataSource){
        
            SqlSessionFactoryBean factoryBean = new SqlSessionFactoryBean();
            factoryBean.setDataSource(dataSource);
            factoryBean.setTypeAliasesPackage("com.itheima.domain");
            return factoryBean;
        }
    
        @Bean
        public MapperScannerConfigurer mapperScannerConfigurer(){
        
            MapperScannerConfigurer msc = new MapperScannerConfigurer();
            msc.setBasePackage("com.itheima.dao");
            return msc;
        }
    }

##### 步骤7:创建jdbc.properties #####

在resources下提供jdbc.properties,设置数据库连接四要素

jdbc.driver=com.mysql.jdbc.Driver
    jdbc.url=jdbc:mysql://localhost:3306/ssm_db
    jdbc.username=root
    jdbc.password=root

##### 步骤8:创建SpringMVC配置类 #####

@Configuration
    @ComponentScan("com.itheima.controller")
    @EnableWebMvc
    public class SpringMvcConfig {
        
    }

##### 步骤9:创建Web项目入口配置类 #####

public class ServletConfig extends AbstractAnnotationConfigDispatcherServletInitializer {
        
        //加载Spring配置类
        protected Class<?>[] getRootConfigClasses() {
        
            return new Class[]{
        SpringConfig.class};
        }
        //加载SpringMVC配置类
        protected Class<?>[] getServletConfigClasses() {
        
            return new Class[]{
        SpringMvcConfig.class};
        }
        //设置SpringMVC请求地址拦截规则
        protected String[] getServletMappings() {
        
            return new String[]{
        "/"};
        }
        //设置post请求中文乱码过滤器
        @Override
        protected Filter[] getServletFilters() {
        
            CharacterEncodingFilter filter = new CharacterEncodingFilter();
            filter.setEncoding("utf-8");
            return new Filter[]{
        filter};
        }
    }

至此SSM整合的环境就已经搭建好了。在这个环境上，我们如何进行功能模块的开发呢?

#### 1.3 功能模块开发 ####

> 需求:对表tbl\_book进行新增、修改、删除、根据ID查询和查询所有

##### 步骤1:创建数据库及表 #####

create database ssm_db character set utf8;
    use ssm_db;
    create table tbl_book(
      id int primary key auto_increment,
      type varchar(20),
      name varchar(50),
      description varchar(255)
    )
    
    insert  into `tbl_book`(`id`,`type`,`name`,`description`) values (1,'计算机理论','Spring实战 第五版','Spring入门经典教程，深入理解Spring原理技术内幕'),(2,'计算机理论','Spring 5核心原理与30个类手写实践','十年沉淀之作，手写Spring精华思想'),(3,'计算机理论','Spring 5设计模式','深入Spring源码刨析Spring源码中蕴含的10大设计模式'),(4,'计算机理论','Spring MVC+Mybatis开发从入门到项目实战','全方位解析面向Web应用的轻量级框架，带你成为Spring MVC开发高手'),(5,'计算机理论','轻量级Java Web企业应用实战','源码级刨析Spring框架，适合已掌握Java基础的读者'),(6,'计算机理论','Java核心技术 卷Ⅰ 基础知识(原书第11版)','Core Java第11版，Jolt大奖获奖作品，针对Java SE9、10、11全面更新'),(7,'计算机理论','深入理解Java虚拟机','5个纬度全面刨析JVM,大厂面试知识点全覆盖'),(8,'计算机理论','Java编程思想(第4版)','Java学习必读经典，殿堂级著作！赢得了全球程序员的广泛赞誉'),(9,'计算机理论','零基础学Java(全彩版)','零基础自学编程的入门图书，由浅入深，详解Java语言的编程思想和核心技术'),(10,'市场营销','直播就这么做:主播高效沟通实战指南','李子柒、李佳奇、薇娅成长为网红的秘密都在书中'),(11,'市场营销','直播销讲实战一本通','和秋叶一起学系列网络营销书籍'),(12,'市场营销','直播带货:淘宝、天猫直播从新手到高手','一本教你如何玩转直播的书，10堂课轻松实现带货月入3W+');

##### 步骤2:编写模型类 #####

public class Book {
        
        private Integer id;
        private String type;
        private String name;
        private String description;
        //getter...setter...toString省略
    }

##### 步骤3:编写Dao接口 #####

public interface BookDao {
        
    
    //    @Insert("insert into tbl_book values(null,#{type},#{name},#{description})")
        @Insert("insert into tbl_book (type,name,description) values(#{type},#{name},#{description})")
        public void save(Book book);
    
        @Update("update tbl_book set type = #{type}, name = #{name}, description = #{description} where id = #{id}")
        public void update(Book book);
    
        @Delete("delete from tbl_book where id = #{id}")
        public void delete(Integer id);
    
        @Select("select * from tbl_book where id = #{id}")
        public Book getById(Integer id);
    
        @Select("select * from tbl_book")
        public List<Book> getAll();
    }

##### 步骤4:编写Service接口和实现类 #####

@Transactional
    public interface BookService {
        
        /**
         * 保存
         * @param book
         * @return
         */
        public boolean save(Book book);
    
        /**
         * 修改
         * @param book
         * @return
         */
        public boolean update(Book book);
    
        /**
         * 按id删除
         * @param id
         * @return
         */
        public boolean delete(Integer id);
    
        /**
         * 按id查询
         * @param id
         * @return
         */
        public Book getById(Integer id);
    
        /**
         * 查询全部
         * @return
         */
        public List<Book> getAll();
    }

@Service
    public class BookServiceImpl implements BookService {
        
        @Autowired
        private BookDao bookDao;
    
        public boolean save(Book book) {
        
            bookDao.save(book);
            return true;
        }
    
        public boolean update(Book book) {
        
            bookDao.update(book);
            return true;
        }
    
        public boolean delete(Integer id) {
        
            bookDao.delete(id);
            return true;
        }
    
        public Book getById(Integer id) {
        
            return bookDao.getById(id);
        }
    
        public List<Book> getAll() {
        
            return bookDao.getAll();
        }
    }

**说明:**

*  bookDao在Service中注入的会提示一个红线提示，为什么呢?
    
     *  BookDao是一个接口，没有实现类，接口是不能创建对象的，所以最终注入的应该是代理对象
     *  代理对象是由Spring的IOC容器来创建管理的
     *  IOC容器又是在Web服务器启动的时候才会创建
     *  IDEA在检测依赖关系的时候，没有找到适合的类注入，所以会提示错误提示
     *  但是程序运行的时候，代理对象就会被创建，框架会使用DI进行注入，所以程序运行无影响。
 *  如何解决上述问题?
    
     *  可以不用理会，因为运行是正常的
     *  设置错误提示级别
        
        ![0b827f9235be94f0eca3a236d92e5d08.png][]

##### 步骤5:编写Contorller类 #####

@RestController
    @RequestMapping("/books")
    public class BookController {
        
    
        @Autowired
        private BookService bookService;
    
        @PostMapping
        public boolean save(@RequestBody Book book) {
        
            return bookService.save(book);
        }
    
        @PutMapping
        public boolean update(@RequestBody Book book) {
        
            return bookService.update(book);
        }
    
        @DeleteMapping("/{id}")
        public boolean delete(@PathVariable Integer id) {
        
            return bookService.delete(id);
        }
    
        @GetMapping("/{id}")
        public Book getById(@PathVariable Integer id) {
        
            return bookService.getById(id);
        }
    
        @GetMapping
        public List<Book> getAll() {
        
            return bookService.getAll();
        }
    }

对于图书模块的增删改查就已经完成了编写，我们可以从后往前写也可以从前往后写，最终只需要能把功能实现即可。

接下来我们就先把业务层的代码使用`Spring整合Junit`的知识点进行单元测试:

#### 1.4 单元测试 ####

##### 步骤1:新建测试类 #####

@RunWith(SpringJUnit4ClassRunner.class)
    @ContextConfiguration(classes = SpringConfig.class)
    public class BookServiceTest {
        
    
    }

##### 步骤2:注入Service类 #####

##### 步骤3:编写测试方法 #####

我们先来对查询进行单元测试。

@RunWith(SpringJUnit4ClassRunner.class)
    @ContextConfiguration(classes = SpringConfig.class)
    public class BookServiceTest {
        
    
        @Autowired
        private BookService bookService;
    
        @Test
        public void testGetById(){
        
            Book book = bookService.getById(1);
            System.out.println(book);
        }
    
        @Test
        public void testGetAll(){
        
            List<Book> all = bookService.getAll();
            System.out.println(all);
        }
    
    }

根据ID查询，测试的结果为:

![1630600844191][]

查询所有，测试的结果为:

![1630600927486][]

#### 1.5 PostMan测试 ####

##### 新增 #####

`http://localhost/books`

{
        
    	"type":"类别测试数据",
        "name":"书名测试数据",
        "description":"描述测试数据"
    }

![1630652582425][]

##### 修改 #####

`http://localhost/books`

{
        
        "id":13,
    	"type":"类别测试数据",
        "name":"书名测试数据",
        "description":"描述测试数据"
    }

![1630652758221][]

##### 删除 #####

`http://localhost/books/14`

![1630652796605][]

##### 查询单个 #####

`http://localhost/books/1`

![1630652837682][]

##### 查询所有 #####

`http://localhost/books`

![1630652867493][]

### 2，统一结果封装 ###

#### 2.1 表现层与前端数据传输协议定义 ####

SSM整合以及功能模块开发完成后，接下来，我们在上述案例的基础上分析下有哪些问题需要我们去解决下。首先第一个问题是:

*  在Controller层增删改返回给前端的是boolean类型数据
    
    ![1630653359533][]
 *  在Controller层查询单个返回给前端的是对象
    
    ![1630653385377][]
 *  在Controller层查询所有返回给前端的是集合对象
    
    ![1630653468887][]

目前我们就已经有三种数据类型返回给前端，如果随着业务的增长，我们需要返回的数据类型会越来越多。对于前端开发人员在解析数据的时候就比较凌乱了，所以对于前端来说，如果后台能够返回一个统一的数据结果，前端在解析的时候就可以按照一种方式进行解析。开发就会变得更加简单。

所以我们就想能不能将返回结果的数据进行统一，具体如何来做，大体的思路为:

*  为了封装返回的结果数据:创建结果模型类，封装数据到data属性中
 *  为了封装返回的数据是何种操作及是否操作成功:封装操作结果到code属性中
 *  操作失败后为了封装返回的错误信息:封装特殊消息到message(msg)属性中

![1630654293972][]

根据分析，我们可以设置统一数据返回结果类

public class Result{
        
    	private Object data;
    	private Integer code;
    	private String msg;
    }

**注意** ： Result类名及类中的字段并不是固定的，可以根据需要自行增减提供若干个构造方法，方便操作。

#### 2.2 表现层与前端数据传输协议实现 ####

前面我们已经分析了如何封装返回结果数据，具体在项目中该如何实现，我们通过个例子来操作一把

##### 2.2.1 环境准备 #####

*  创建一个Web的Maven项目
 *  pom.xml添加SSM整合所需jar包
 *  创建对应的配置类
 *  编写Controller、Service接口、Service实现类、Dao接口和模型类
 *  resources下提供jdbc.properties配置文件

因为这个项目环境的内容和SSM整合的内容是一致的，所以我们就不在把代码粘出来了，大家在练习的时候可以在前面整合的例子案例环境下，进行本节内容的开发。

最终创建好的项目结构如下:

![1630654870632][]

##### 2.2.2 结果封装 #####

对于结果封装，我们应该是在表现层进行处理，所以我们把结果类放在controller包下，当然你也可以放在domain包，这个都是可以的，具体如何实现结果封装，具体的步骤为:

###### 步骤1:创建Result类 ######

public class Result {
        
        //描述统一格式中的数据
        private Object data;
        //描述统一格式中的编码，用于区分操作，可以简化配置0或1表示成功失败
        private Integer code;
        //描述统一格式中的消息，可选属性
        private String msg;
    
        public Result() {
        
        }
    	//构造方法是方便对象的创建
        public Result(Integer code,Object data) {
        
            this.data = data;
            this.code = code;
        }
    	//构造方法是方便对象的创建
        public Result(Integer code, Object data, String msg) {
        
            this.data = data;
            this.code = code;
            this.msg = msg;
        }
    	//setter...getter...省略
    }

###### 步骤2:定义返回码Code类 ######

\*\*注意:\*\*code类中的常量设计也不是固定的，可以根据需要自行增减，例如将查询再进行细分为GET\_OK,GET\_ALL\_OK,GET\_PAGE\_OK等。

###### 步骤3:修改Controller类的返回值 ######

//统一每一个控制器方法返回值
    @RestController
    @RequestMapping("/books")
    public class BookController {
        
    
        @Autowired
        private BookService bookService;
    
        @PostMapping
        public Result save(@RequestBody Book book) {
        
            boolean flag = bookService.save(book);
            return new Result(flag ? Code.SAVE_OK:Code.SAVE_ERR,flag);
        }
    
        @PutMapping
        public Result update(@RequestBody Book book) {
        
            boolean flag = bookService.update(book);
            return new Result(flag ? Code.UPDATE_OK:Code.UPDATE_ERR,flag);
        }
    
        @DeleteMapping("/{id}")
        public Result delete(@PathVariable Integer id) {
        
            boolean flag = bookService.delete(id);
            return new Result(flag ? Code.DELETE_OK:Code.DELETE_ERR,flag);
        }
    
        @GetMapping("/{id}")
        public Result getById(@PathVariable Integer id) {
        
            Book book = bookService.getById(id);
            Integer code = book != null ? Code.GET_OK : Code.GET_ERR;
            String msg = book != null ? "" : "数据查询失败，请重试！";
            return new Result(code,book,msg);
        }
    
        @GetMapping
        public Result getAll() {
        
            List<Book> bookList = bookService.getAll();
            Integer code = bookList != null ? Code.GET_OK : Code.GET_ERR;
            String msg = bookList != null ? "" : "数据查询失败，请重试！";
            return new Result(code,bookList,msg);
        }
    }

###### 步骤4:启动服务测试 ######

![1630656326477][]

至此，我们的返回结果就已经能以一种统一的格式返回给前端。前端根据返回的结果，先从中获取`code`,根据code判断，如果成功则取`data`属性的值，如果失败，则取`msg`中的值做提示。

### 3，统一异常处理 ###

#### 3.1 问题描述 ####

在讲解这一部分知识点之前，我们先来演示个效果，修改BookController类的`getById`方法

@GetMapping("/{id}")
    public Result getById(@PathVariable Integer id) {
        
        //手动添加一个错误信息
        if(id==1){
        
            int i = 1/0;
        }
        Book book = bookService.getById(id);
        Integer code = book != null ? Code.GET_OK : Code.GET_ERR;
        String msg = book != null ? "" : "数据查询失败，请重试！";
        return new Result(code,book,msg);
    }

重新启动运行项目，使用PostMan发送请求，当传入的id为1，则会出现如下效果：

![1630656982337][]

前端接收到这个信息后和之前我们约定的格式不一致，这个问题该如何解决?

在解决问题之前，我们先来看下异常的种类及出现异常的原因:

*  框架内部抛出的异常：因使用不合规导致
 *  数据层抛出的异常：因外部服务器故障导致（例如：服务器访问超时）
 *  业务层抛出的异常：因业务逻辑书写错误导致（例如：遍历业务书写操作，导致索引异常等）
 *  表现层抛出的异常：因数据收集、校验等规则导致（例如：不匹配的数据类型间导致异常）
 *  工具类抛出的异常：因工具类书写不严谨不够健壮导致（例如：必要释放的连接长期未释放等）

看完上面这些出现异常的位置，你会发现，在我们开发的任何一个位置都有可能出现异常，而且这些异常是不能避免的。所以我们就得将异常进行处理。

**思考**

1.  各个层级均出现异常，异常处理代码书写在哪一层?
    
    所有的异常均抛出到表现层进行处理
2.  异常的种类很多，表现层如何将所有的异常都处理到呢?
    
    异常分类
3.  表现层处理异常，每个方法中单独书写，代码书写量巨大且意义不强，如何解决?
    
    AOP

对于上面这些问题及解决方案，SpringMVC已经为我们提供了一套解决方案:

*  异常处理器:
    
     *  集中的、统一的处理项目中出现的异常。
        
        ![1630657791653][]

#### 3.2 异常处理器的使用 ####

##### 3.2.1 环境准备 #####

内容参考前面的项目或者直接使用前面的项目进行本节内容的学习。

最终创建好的项目结构如下:

![1630657972564][]

##### 3.2.2 使用步骤 #####

###### 步骤1:创建异常处理器类 ######

//@RestControllerAdvice用于标识当前类为REST风格对应的异常处理器
    @RestControllerAdvice
    public class ProjectExceptionAdvice {
        
        //除了自定义的异常处理器，保留对Exception类型的异常处理，用于处理非预期的异常
        @ExceptionHandler(Exception.class)
        public void doException(Exception ex){
        
          	System.out.println("嘿嘿,异常你哪里跑！")
        }
    }

确保SpringMvcConfig能够扫描到异常处理器类

###### 步骤2:让程序抛出异常 ######

修改`BookController`的getById方法，添加`int i = 1/0`.

@GetMapping("/{id}")
    public Result getById(@PathVariable Integer id) {
        
      	int i = 1/0;
        Book book = bookService.getById(id);
        Integer code = book != null ? Code.GET_OK : Code.GET_ERR;
        String msg = book != null ? "" : "数据查询失败，请重试！";
        return new Result(code,book,msg);
    }

###### 步骤3:运行程序，测试 ######

![1630658350945][]

说明异常已经被拦截并执行了`doException`方法。

###### 异常处理器类返回结果给前端 ######

//@RestControllerAdvice用于标识当前类为REST风格对应的异常处理器
    @RestControllerAdvice
    public class ProjectExceptionAdvice {
        
        //除了自定义的异常处理器，保留对Exception类型的异常处理，用于处理非预期的异常
        @ExceptionHandler(Exception.class)
        public Result doException(Exception ex){
        
          	System.out.println("嘿嘿,异常你哪里跑！")
            return new Result(666,null,"嘿嘿,异常你哪里跑！");
        }
    }

启动运行程序，测试

![1630658606549][]

至此，就算后台执行的过程中抛出异常，最终也能按照我们和前端约定好的格式返回给前端。

##### 知识点1：@RestControllerAdvice #####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>@RestControllerAdvice</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>类型</td> 
   <td>类注解</td> 
  </tr> 
  <tr> 
   <td>位置</td> 
   <td>Rest风格开发的控制器增强类定义上方</td> 
  </tr> 
  <tr> 
   <td>作用</td> 
   <td>为Rest风格开发的控制器类做增强</td> 
  </tr> 
 </tbody> 
</table>

\*\*说明:\*\*此注解自带@ResponseBody注解与@Component注解，具备对应的功能

![1630659060451][]

##### 知识点2：@ExceptionHandler #####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>@ExceptionHandler</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>类型</td> 
   <td>方法注解</td> 
  </tr> 
  <tr> 
   <td>位置</td> 
   <td>专用于异常处理的控制器方法上方</td> 
  </tr> 
  <tr> 
   <td>作用</td> 
   <td>设置指定异常的处理方案，功能等同于控制器方法，<br>出现异常后终止原始控制器执行,并转入当前方法执行</td> 
  </tr> 
 </tbody> 
</table>

\*\*说明：\*\*此类方法可以根据处理的异常不同，制作多个方法分别处理对应的异常

#### 3.3 项目异常处理方案 ####

##### 3.3.1 异常分类 #####

异常处理器我们已经能够使用了，那么在咱们的项目中该如何来处理异常呢?

因为异常的种类有很多，如果每一个异常都对应一个@ExceptionHandler，那得写多少个方法来处理各自的异常，所以我们在处理异常之前，需要对异常进行一个分类:

*  业务异常（BusinessException）
    
     *  规范的用户行为产生的异常
        
         *  用户在页面输入内容的时候未按照指定格式进行数据填写，如在年龄框输入的是字符串
            
            ![1630659599983][]
     *  不规范的用户行为操作产生的异常
        
         *  如用户故意传递错误数据
            
            ![1630659622958][]
 *  系统异常（SystemException）
    
     *  项目运行过程中可预计但无法避免的异常
        
         *  比如数据库或服务器宕机
 *  其他异常（Exception）
    
     *  编程人员未预期到的异常，如:用到的文件不存在- -
        
        ![1630659690341][]

将异常分类以后，针对不同类型的异常，要提供具体的解决方案:

##### 3.3.2 异常解决方案 #####

*  业务异常（BusinessException）
    
     *  发送对应消息传递给用户，提醒规范操作
        
         *  大家常见的就是提示用户名已存在或密码格式不正确等
 *  系统异常（SystemException）
    
     *  发送固定消息传递给用户，安抚用户
        
         *  系统繁忙，请稍后再试
         *  系统正在维护升级，请稍后再试
         *  系统出问题，请联系系统管理员等
     *  发送特定消息给运维人员，提醒维护
        
         *  可以发送短信、邮箱或者是公司内部通信软件
     *  记录日志
        
         *  发消息和记录日志对用户来说是不可见的，属于后台程序
 *  其他异常（Exception）
    
     *  发送固定消息传递给用户，安抚用户
     *  发送特定消息给编程人员，提醒维护（纳入预期范围内）
        
         *  一般是程序没有考虑全，比如未做非空校验等
     *  记录日志

##### 3.3.3 异常解决方案的具体实现 #####

> 思路:
> 
> 1.先通过自定义异常，完成BusinessException和SystemException的定义
> 
> 2.将其他异常包装成自定义异常类型
> 
> 3.在异常处理器类中对不同的异常进行处理

###### 步骤1:自定义异常类 ######

// 自定义异常处理器，用于封装异常信息，对异常进行分类
    public class SystemException extends RuntimeException{
        
        private Integer code;
    
        public Integer getCode() {
        
            return code;
        }
    
        public void setCode(Integer code) {
        
            this.code = code;
        }
    
        public SystemException(Integer code, String message) {
        
            super(message);
            this.code = code;
        }
    
        public SystemException(Integer code, String message, Throwable cause) {
        
            super(message, cause);
            this.code = code;
        }
    
    }
    
    //自定义异常处理器，用于封装异常信息，对异常进行分类
    public class BusinessException extends RuntimeException{
        
        private Integer code;
    
        public Integer getCode() {
        
            return code;
        }
    
        public void setCode(Integer code) {
        
            this.code = code;
        }
    
        public BusinessException(Integer code, String message) {
        
            super(message);
            this.code = code;
        }
    
        public BusinessException(Integer code, String message, Throwable cause) {
        
            super(message, cause);
            this.code = code;
        }
    
    }

**说明:**

*  让自定义异常类继承`RuntimeException`的好处是，后期在抛出这两个异常的时候，就不用在try…catch…或throws了
 *  自定义异常类中添加`code`属性的原因是为了更好的区分异常是来自哪个业务的

###### 步骤2:将其他异常包成自定义异常 ######

假如在BookServiceImpl的getById方法抛异常了，该如何来包装呢?

public Book getById(Integer id) {
        
        //模拟业务异常，包装成自定义异常
        if(id == 1){
        
            throw new BusinessException(Code.BUSINESS_ERR,"请不要使用你的技术挑战我的耐性!");
        }
        //模拟系统异常，将可能出现的异常进行包装，转换成自定义异常
        try{
        
            int i = 1/0;
        }catch (Exception e){
        
            throw new SystemException(Code.SYSTEM_TIMEOUT_ERR,"服务器访问超时，请重试!",e);
        }
        return bookDao.getById(id);
    }

具体的包装方式有：

*  方式一:`try{}catch(){}`在catch中重新throw我们自定义异常即可。
 *  方式二:直接throw自定义异常即可

上面为了使`code`看着更专业些，我们在Code类中再新增需要的属性

//状态码
    public class Code {
        
        public static final Integer SAVE_OK = 20011;
        public static final Integer DELETE_OK = 20021;
        public static final Integer UPDATE_OK = 20031;
        public static final Integer GET_OK = 20041;
    
        public static final Integer SAVE_ERR = 20010;
        public static final Integer DELETE_ERR = 20020;
        public static final Integer UPDATE_ERR = 20030;
        public static final Integer GET_ERR = 20040;
        public static final Integer SYSTEM_ERR = 50001;
        public static final Integer SYSTEM_TIMEOUT_ERR = 50002;
        public static final Integer SYSTEM_UNKNOW_ERR = 59999;
    
        public static final Integer BUSINESS_ERR = 60002;
    }

###### 步骤3:处理器类中处理自定义异常 ######

//@RestControllerAdvice用于标识当前类为REST风格对应的异常处理器
    @RestControllerAdvice
    public class ProjectExceptionAdvice {
        
        //@ExceptionHandler用于设置当前处理器类对应的异常类型
        @ExceptionHandler(SystemException.class)
        public Result doSystemException(SystemException ex){
        
            //记录日志
            //发送消息给运维
            //发送邮件给开发人员,ex对象发送给开发人员
            return new Result(ex.getCode(),null,ex.getMessage());
        }
    
        @ExceptionHandler(BusinessException.class)
        public Result doBusinessException(BusinessException ex){
        
            return new Result(ex.getCode(),null,ex.getMessage());
        }
    
        //除了自定义的异常处理器，保留对Exception类型的异常处理，用于处理非预期的异常
        @ExceptionHandler(Exception.class)
        public Result doOtherException(Exception ex){
        
            //记录日志
            //发送消息给运维
            //发送邮件给开发人员,ex对象发送给开发人员
            return new Result(Code.SYSTEM_UNKNOW_ERR,null,"系统繁忙，请稍后再试！");
        }
    }

###### 步骤4:运行程序 ######

根据ID查询，

如果传入的参数为1，会报`BusinessException`

![1630661162758][]

如果传入的是其他参数，会报`SystemException`

![1630661192383][]

对于异常我们就已经处理完成了，不管后台哪一层抛出异常，都会以我们与前端约定好的方式进行返回，前端只需要把信息获取到，根据返回的正确与否来展示不同的内容即可。

**小结**

以后项目中的异常处理方式为:

![1630658821746][]

### 4，前后台协议联调 ###

#### 4.1 环境准备 ####

内容参考前面的项目或者直接使用前面的项目进行本节内容的学习。

最终创建好的项目结构如下:

![1630661781776][]

1.  将`资料\SSM功能页面`下面的静态资源拷贝到webapp下。  
    [Masked5 / heima\_springmvc\_codes · GitCode][Masked5 _ heima_springmvc_codes _ GitCode]

![1630663662691][]

1.  因为添加了静态资源，SpringMVC会拦截，所有需要在SpringConfig的配置类中将静态资源进行放行。

*  新建SpringMvcSupport
    
        @Configuration
        public class SpringMvcSupport extends WebMvcConfigurationSupport {
              
            @Override
            protected void addResourceHandlers(ResourceHandlerRegistry registry) {
              
                registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
                registry.addResourceHandler("/css/**").addResourceLocations("/css/");
                registry.addResourceHandler("/js/**").addResourceLocations("/js/");
                registry.addResourceHandler("/plugins/**").addResourceLocations("/plugins/");
            }
        }
 *  在SpringMvcConfig中扫描SpringMvcSupport
    
        @Configuration
        @ComponentScan({
              "com.itheima.controller","com.itheima.config"})
        @EnableWebMvc
        public class SpringMvcConfig {
              
        }

接下来我们就需要将所有的列表查询、新增、修改、删除等功能一个个来实现下。

#### 4.2 列表功能 ####

![1630670317859][]

> 需求:页面加载完后发送异步请求到后台获取列表数据进行展示。
> 
> 1.找到页面的钩子函数，`created()`
> 
> 2.`created()`方法中调用了`this.getAll()`方法
> 
> 3.在getAll()方法中使用axios发送异步请求从后台获取数据
> 
> 4.访问的路径为`http://localhost/books`
> 
> 5.返回数据

返回数据res.data的内容如下:

{
        
        "data": [
            {
        
                "id": 1,
                "type": "计算机理论",
                "name": "Spring实战 第五版",
                "description": "Spring入门经典教程，深入理解Spring原理技术内幕"
            },
            {
        
                "id": 2,
                "type": "计算机理论",
                "name": "Spring 5核心原理与30个类手写实践",
                "description": "十年沉淀之作，手写Spring精华思想"
            },...
        ],
        "code": 20041,
        "msg": ""
    }

发送方式:

getAll() {
        
        //发送ajax请求
        axios.get("/books").then((res)=>{
        
            this.dataList = res.data.data;
        });
    }

![1630666787456][]

#### 4.3 添加功能 ####

![1630670332168][]

> 需求:完成图片的新增功能模块
> 
> 1.找到页面上的`新建`按钮，按钮上绑定了`@click="handleCreate()"`方法
> 
> 2.在method中找到`handleCreate`方法，方法中打开新增面板
> 
> 3.新增面板中找到`确定`按钮,按钮上绑定了`@click="handleAdd()"`方法
> 
> 4.在method中找到`handleAdd`方法
> 
> 5.在方法中发送请求和数据，响应成功后将新增面板关闭并重新查询数据

`handleCreate`打开新增面板

handleCreate() {
        
        this.dialogFormVisible = true;
    },

`handleAdd`方法发送异步请求并携带数据

handleAdd () {
        
        //发送ajax请求
        //this.formData是表单中的数据，最后是一个json数据
        axios.post("/books",this.formData).then((res)=>{
        
            this.dialogFormVisible = false;
            this.getAll();
        });
    }

#### 4.4 添加功能状态处理 ####

基础的新增功能已经完成，但是还有一些问题需要解决下:

> 需求:新增成功是关闭面板，重新查询数据，那么新增失败以后该如何处理?
> 
> 1.在handlerAdd方法中根据后台返回的数据来进行不同的处理
> 
> 2.如果后台返回的是成功，则提示成功信息，并关闭面板
> 
> 3.如果后台返回的是失败，则提示错误信息

(1)修改前端页面

handleAdd () {
        
        //发送ajax请求
        axios.post("/books",this.formData).then((res)=>{
        
            //如果操作成功，关闭弹层，显示数据
            if(res.data.code == 20011){
        
                this.dialogFormVisible = false;
                this.$message.success("添加成功");
            }else if(res.data.code == 20010){
        
                this.$message.error("添加失败");
            }else{
        
                this.$message.error(res.data.msg);
            }
        }).finally(()=>{
        
            this.getAll();
        });
    }

(2)后台返回操作结果，将Dao层的增删改方法返回值从`void`改成`int`

public interface BookDao {
        
    
    //    @Insert("insert into tbl_book values(null,#{type},#{name},#{description})")
        @Insert("insert into tbl_book (type,name,description) values(#{type},#{name},#{description})")
        public int save(Book book);
    
        @Update("update tbl_book set type = #{type}, name = #{name}, description = #{description} where id = #{id}")
        public int update(Book book);
    
        @Delete("delete from tbl_book where id = #{id}")
        public int delete(Integer id);
    
        @Select("select * from tbl_book where id = #{id}")
        public Book getById(Integer id);
    
        @Select("select * from tbl_book")
        public List<Book> getAll();
    }

(3)在BookServiceImpl中，增删改方法根据DAO的返回值来决定返回true/false

@Service
    public class BookServiceImpl implements BookService {
        
        @Autowired
        private BookDao bookDao;
    
        public boolean save(Book book) {
        
            return bookDao.save(book) > 0;
        }
    
        public boolean update(Book book) {
        
            return bookDao.update(book) > 0;
        }
    
        public boolean delete(Integer id) {
        
            return bookDao.delete(id) > 0;
        }
    
        public Book getById(Integer id) {
        
            if(id == 1){
        
                throw new BusinessException(Code.BUSINESS_ERR,"请不要使用你的技术挑战我的耐性!");
            }
    //        //将可能出现的异常进行包装，转换成自定义异常
    //        try{
        
    //            int i = 1/0;
    //        }catch (Exception e){
        
    //            throw new SystemException(Code.SYSTEM_TIMEOUT_ERR,"服务器访问超时，请重试!",e);
    //        }
            return bookDao.getById(id);
        }
    
        public List<Book> getAll() {
        
            return bookDao.getAll();
        }
    }

(4)测试错误情况，将图书类别长度设置超出范围即可

![1630668954348][]

处理完新增后，会发现新增还存在一个问题，

新增成功后，再次点击`新增`按钮会发现之前的数据还存在，这个时候就需要在新增的时候将表单内容清空。

resetForm(){
        
    	this.formData = {
        };
    }
    handleCreate() {
        
        this.dialogFormVisible = true;
        this.resetForm();
    }

#### 4.5 修改功能 ####

![1630670367812][]

> 需求:完成图书信息的修改功能
> 
> 1.找到页面中的`编辑`按钮，该按钮绑定了`@click="handleUpdate(scope.row)"`
> 
> 2.在method的`handleUpdate`方法中发送异步请求根据ID查询图书信息
> 
> 3.根据后台返回的结果，判断是否查询成功
> 
> 如果查询成功打开修改面板回显数据，如果失败提示错误信息
> 
> 4.修改完成后找到修改面板的`确定`按钮，该按钮绑定了`@click="handleEdit()"`
> 
> 5.在method的`handleEdit`方法中发送异步请求提交修改数据
> 
> 6.根据后台返回的结果，判断是否修改成功
> 
> 如果成功提示错误信息，关闭修改面板，重新查询数据，如果失败提示错误信息

scope.row代表的是当前行的行数据，也就是说,scope.row就是选中行对应的json数据，如下:

{
        
        "id": 1,
        "type": "计算机理论",
        "name": "Spring实战 第五版",
        "description": "Spring入门经典教程，深入理解Spring原理技术内幕"
    }

修改`handleUpdate`方法

//弹出编辑窗口
    handleUpdate(row) {
        
        // console.log(row);   //row.id 查询条件
        //查询数据，根据id查询
        axios.get("/books/"+row.id).then((res)=>{
        
            if(res.data.code == 20041){
        
                //展示弹层，加载数据
                this.formData = res.data.data;
                this.dialogFormVisible4Edit = true;
            }else{
        
                this.$message.error(res.data.msg);
            }
        });
    }

修改`handleEdit`方法

handleEdit() {
        
        //发送ajax请求
        axios.put("/books",this.formData).then((res)=>{
        
            //如果操作成功，关闭弹层，显示数据
            if(res.data.code == 20031){
        
                this.dialogFormVisible4Edit = false;
                this.$message.success("修改成功");
            }else if(res.data.code == 20030){
        
                this.$message.error("修改失败");
            }else{
        
                this.$message.error(res.data.msg);
            }
        }).finally(()=>{
        
            this.getAll();
        });
    }

至此修改功能就已经完成。

#### 4.6 删除功能 ####

> 需求:完成页面的删除功能。
> 
> 1.找到页面的删除按钮，按钮上绑定了`@click="handleDelete(scope.row)"`
> 
> 2.method的`handleDelete`方法弹出提示框
> 
> 3.用户点击取消,提示操作已经被取消。
> 
> 4.用户点击确定，发送异步请求并携带需要删除数据的主键ID
> 
> 5.根据后台返回结果做不同的操作
> 
> 如果返回成功，提示成功信息，并重新查询数据
> 
> 如果返回失败，提示错误信息，并重新查询数据

修改`handleDelete`方法

handleDelete(row) {
        
        //1.弹出提示框
        this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
        
            type:'info'
        }).then(()=>{
        
            //2.做删除业务
            axios.delete("/books/"+row.id).then((res)=>{
        
                if(res.data.code == 20021){
        
                    this.$message.success("删除成功");
                }else{
        
                    this.$message.error("删除失败");
                }
            }).finally(()=>{
        
                this.getAll();
            });
        }).catch(()=>{
        
            //3.取消删除
            this.$message.info("取消删除操作");
        });
    }

接下来，下面是一个完整页面

<!DOCTYPE html>
    
    <html>
    
        <head>
    
            
    
            <meta charset="utf-8">
    
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
            <title>SpringMVC案例</title>
    
            <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    
            
    
            <link rel="stylesheet" href="../plugins/elementui/index.css">
    
            <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    
            <link rel="stylesheet" href="../css/style.css">
    
        </head>
    
        <body class="hold-transition">
    
            <div id="app">
    
                <div class="content-header">
    
                    <h1>图书管理</h1>
    
                </div>
    
                <div class="app-container">
    
                    <div class="box">
    
                        <div class="filter-container">
    
                            <el-input placeholder="图书名称" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
    
                            <el-button @click="getAll()" class="dalfBut">查询</el-button>
    
                            <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
    
                        </div>
    
                        <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
    
                            <el-table-column type="index" align="center" label="序号"></el-table-column>
    
                            <el-table-column prop="type" label="图书类别" align="center"></el-table-column>
    
                            <el-table-column prop="name" label="图书名称" align="center"></el-table-column>
    
                            <el-table-column prop="description" label="描述" align="center"></el-table-column>
    
                            <el-table-column label="操作" align="center">
    
                                <template slot-scope="scope">
    
                                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
    
                                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
    
                                </template>
    
                            </el-table-column>
    
                        </el-table>
    
                        
    
                        <div class="add-form">
    
                            <el-dialog title="新增图书" :visible.sync="dialogFormVisible">
    
                                <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
    
                                    <el-row>
    
                                        <el-col :span="12">
    
                                            <el-form-item label="图书类别" prop="type">
    
                                                <el-input v-model="formData.type"/>
    
                                            </el-form-item>
    
                                        </el-col>
    
                                        <el-col :span="12">
    
                                            <el-form-item label="图书名称" prop="name">
    
                                                <el-input v-model="formData.name"/>
    
                                            </el-form-item>
    
                                        </el-col>
    
                                    </el-row>
    
    
                                    <el-row>
    
                                        <el-col :span="24">
    
                                            <el-form-item label="描述">
    
                                                <el-input v-model="formData.description" type="textarea"></el-input>
    
                                            </el-form-item>
    
                                        </el-col>
    
                                    </el-row>
    
                                </el-form>
    
                                <div slot="footer" class="dialog-footer">
    
                                    <el-button @click="dialogFormVisible = false">取消</el-button>
    
                                    <el-button type="primary" @click="handleAdd()">确定</el-button>
    
                                </div>
    
                            </el-dialog>
    
                        </div>
    
                        
    
                        <div class="add-form">
    
                            <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
    
                                <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
    
                                    <el-row>
    
                                        <el-col :span="12">
    
                                            <el-form-item label="图书类别" prop="type">
    
                                                <el-input v-model="formData.type"/>
    
                                            </el-form-item>
    
                                        </el-col>
    
                                        <el-col :span="12">
    
                                            <el-form-item label="图书名称" prop="name">
    
                                                <el-input v-model="formData.name"/>
    
                                            </el-form-item>
    
                                        </el-col>
    
                                    </el-row>
    
                                    <el-row>
    
                                        <el-col :span="24">
    
                                            <el-form-item label="描述">
    
                                                <el-input v-model="formData.description" type="textarea"></el-input>
    
                                            </el-form-item>
    
                                        </el-col>
    
                                    </el-row>
    
                                </el-form>
    
                                <div slot="footer" class="dialog-footer">
    
                                    <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
    
                                    <el-button type="primary" @click="handleEdit()">确定</el-button>
    
                                </div>
    
                            </el-dialog>
    
                        </div>
    
                    </div>
    
                </div>
    
            </div>
    
        </body>
    
        
    
        <script src="../js/vue.js"></script>
    
        <script src="../plugins/elementui/index.js"></script>
    
        <script type="text/javascript" src="../js/jquery.min.js"></script>
    
        <script src="../js/axios-0.18.0.js"></script>
    
        <script>
            var vue = new Vue({
          
    
                el: '#app',
                data:{
          
                    pagination: {
          },
    				dataList: [],//当前页要展示的列表数据
                    formData: {
          },//表单数据
                    dialogFormVisible: false,//控制表单是否可见
                    dialogFormVisible4Edit:false,//编辑表单是否可见
                    rules: {
          //校验规则
                        type: [{
           required: true, message: '图书类别为必填项', trigger: 'blur' }],
                        name: [{
           required: true, message: '图书名称为必填项', trigger: 'blur' }]
                    }
                },
    
                //钩子函数，VUE对象初始化完成后自动执行
                created() {
          
                    this.getAll();
                },
    
                methods: {
          
                    //列表
                    getAll() {
          
                        //发送ajax请求
                        axios.get("/books").then((res)=>{
          
                            this.dataList = res.data.data;
                        });
                    },
    
                    //弹出添加窗口
                    handleCreate() {
          
                        this.dialogFormVisible = true;
                        this.resetForm();
                    },
    
                    //重置表单
                    resetForm() {
          
                        this.formData = {
          };
                    },
    
                    //添加
                    handleAdd () {
          
                        //发送ajax请求
                        axios.post("/books",this.formData).then((res)=>{
          
                            console.log(res.data);
                            //如果操作成功，关闭弹层，显示数据
                            if(res.data.code == 20011){
          
                                this.dialogFormVisible = false;
                                this.$message.success("添加成功");
                            }else if(res.data.code == 20010){
          
                                this.$message.error("添加失败");
                            }else{
          
                                this.$message.error(res.data.msg);
                            }
                        }).finally(()=>{
          
                            this.getAll();
                        });
                    },
    
                    //弹出编辑窗口
                    handleUpdate(row) {
          
                        // console.log(row);   //row.id 查询条件
                        //查询数据，根据id查询
                        axios.get("/books/"+row.id).then((res)=>{
          
                            // console.log(res.data.data);
                            if(res.data.code == 20041){
          
                                //展示弹层，加载数据
                                this.formData = res.data.data;
                                this.dialogFormVisible4Edit = true;
                            }else{
          
                                this.$message.error(res.data.msg);
                            }
                        });
                    },
    
                    //编辑
                    handleEdit() {
          
                        //发送ajax请求
                        axios.put("/books",this.formData).then((res)=>{
          
                            //如果操作成功，关闭弹层，显示数据
                            if(res.data.code == 20031){
          
                                this.dialogFormVisible4Edit = false;
                                this.$message.success("修改成功");
                            }else if(res.data.code == 20030){
          
                                this.$message.error("修改失败");
                            }else{
          
                                this.$message.error(res.data.msg);
                            }
                        }).finally(()=>{
          
                            this.getAll();
                        });
                    },
    
                    // 删除
                    handleDelete(row) {
          
                        //1.弹出提示框
                        this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
          
                            type:'info'
                        }).then(()=>{
          
                            //2.做删除业务
                            axios.delete("/books/"+row.id).then((res)=>{
          
                                if(res.data.code == 20021){
          
                                    this.$message.success("删除成功");
                                }else{
          
                                    this.$message.error("删除失败");
                                }
                            }).finally(()=>{
          
                                this.getAll();
                            });
                        }).catch(()=>{
          
                            //3.取消删除
                            this.$message.info("取消删除操作");
                        });
                    }
                }
            })
    
        </script>
    
    </html>
    ``

[1630561266760]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/609d7f8fbcda476b9ce01e313e674c1d.png
[Masked5 _ heima_springmvc_codes _ GitCode]: https://gitcode.net/Drifter_Galaxy/heima_springmvc_codes
[1630561591931]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/0f0a3d68cc9f4841b90290d428416584.png
[0b827f9235be94f0eca3a236d92e5d08.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b3f75fdd078541c88fb446cdebb9c08f.png
[1630600844191]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/708f758af0a746dc80d26d461f79a48f.png
[1630600927486]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/acd0b4f154ad497f9a3e6dd64a7e6bef.png
[1630652582425]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f014e834b86a43f596ac8e0ad04e93a3.png
[1630652758221]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6d38537e645f44879a8b1705ba6e2674.png
[1630652796605]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cf5da77de0814b338855d91fb13b51bf.png
[1630652837682]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/0f4b461c55a04f5cadab99593f309392.png
[1630652867493]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e5f55d0df91a479abef64393bfa268cb.png
[1630653359533]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c3b7627a10ea42e2b8eee06a31eef2ee.png
[1630653385377]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8b6f6cefe462465292d76dc3b6dc9665.png
[1630653468887]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a0890712ba504e5f89aeb85b64fbdab4.png
[1630654293972]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3ba0340f1ae442f282dd554b1f3c60e1.png
[1630654870632]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/fc99085e0d0f4e3a8a4019e382e8a61d.png
[1630656326477]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a5bf2c5b356d4eeb983eece2df93e150.png
[1630656982337]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/31de9e3fc05542188de62c55ed73ba83.png
[1630657791653]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ebc5c30876f4481bb913783cdc144700.png
[1630657972564]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2e0178621ed74bbbaefd221205e18da1.png
[1630658350945]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9ec8147665fe4f07b692dacb20c6b606.png
[1630658606549]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6bbb9a661c3748c1a30023ea4f9bf032.png
[1630659060451]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8578afd6e1374e4c9b640aa4d1f73725.png
[1630659599983]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cb7358c68bd3455d882fa9b3e8e70b73.png
[1630659622958]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c47672701fe448d3b9b9c337ef37cba1.png
[1630659690341]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a8a833f9288e4dd0a1fdf35a5ab838d2.png
[1630661162758]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/39f97a5c02744acfbe332b75445b0bdb.png
[1630661192383]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/927d512327c8461488ea5790d5d2ed00.png
[1630658821746]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/043e64ccfc7448108f882c84260ef0b0.png
[1630661781776]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c9f3fc44b9ea4ab081bd317b4fe48c17.png
[1630663662691]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/23d6b4115d7349aba2ea321056508221.png
[1630670317859]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7b06cb51ac6f4b6e9f2b2993b89f5c48.png
[1630666787456]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/104732fc426f42d9a6a6badfa4d725e1.png
[1630670332168]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c597f6364b364a0ba35069249017e8ba.png
[1630668954348]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6eda89f4fd0347df8820eae76217a516.png
[1630670367812]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a93413c86496496e84181ceae62c1d03.png