基于SpringBoot实现SSMP整合_springboot 自带返回结果result怎么注入pom文件-CSDN博客

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example</groupId>
    <artifactId>springboot_08_ssmp</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot_08_ssmp</name>
    <description>springboot_08_ssmp</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.7.RELEASE</spring-boot.version>
    </properties>

    <dependencies>
<!--        手动添加mybatis-plus-->
        <!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
<!--手动添加德鲁伊-->
        <!-- https://mvnrepository.com/artifact/com.alibaba/druid-spring-boot-starter -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.8</version>
        </dependency>
<!--手动加入Lombook-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.7.RELEASE</version>
                <configuration>
                    <mainClass>com.company.Springboot08SsmpApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

2.application.yml配置文件

#第二种方法：Druid专用配置  推荐
spring:
  datasource:
    druid:
     driver-class-name: com.mysql.cj.jdbc.Driver
     url: jdbc:mysql://localhost:3306/user_db?serverTimezone=GMT
     username: root
     password: admin

#开启MP运行日志
mybatis-plus:
  configuration:
#    标准输出 打印到控制台上   以后我们就不用sout输出了，  这个东西会帮我们输出
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

3.数据库

三、代码

1.配置类---拦截器

import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

//拦截器
@Configuration  //第一步：配置类  交给Spring管理  确保在启动类的包或子包下，才能被扫描到
public class NPCConfig {
// 第二步：做对应Bean
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
//        第三步：创建拦截器（这只是一个壳子）
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
//        第四步：添加内部拦截器  (分页的）
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
//        可以添加多个内部拦截器
        return interceptor;
    }
}

2.controller层

①utils包下

首先说明一下下面的类ProjectExceptionAdvice（异常消息处理类）和类R（前后端消息统一类）为什么存在？

在上图中的“查单条”数据中，我们发现data属性值是null有两种情况，第一种情况是查询id不存在，返回null；第二种情况是查询过程中抛出了异常，catch中返回了null。但是我们收到的数据，只有 data=null，我们的前端人员并不能分辨我们是否查询成功。

所以，我们需要将R类改成下图这种类型：

flage属性代表查询是否成功，data属性代表查询的结果

但是！！！！上面的前后端统一格式，还不是很通透！！！！

比如，当后端的代码出现问题抛异常的时候，前端的工作人员就会收到另外的一种格式

这样就对前端工作人员造成的很大的麻烦

我们要保证就算后端代码出现问题，格式也要不改变！！！！！！！！！！！

则我们就要使用下面的格式

import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;

//作为springMVC的异常处理器
//数据层业务层的异常最终会抛的表现层
//@ControllerAdvice
@RestControllerAdvice   //里面还有一个bean
public class ProjectExceptionAdvice {

//    这个方法拦截所有的异常信息
    @ExceptionHandler  // 这个注解可以加参数：具体拦截什么异常   @ExceptionHandler(value = NullPointerException.class)
     public R doException(Exception e){   //模拟异常的发生
//  记录日志，通知运维，通知开发
        e.printStackTrace();  //出异常信息
        return new R(false,"服务器故障，请稍后再试");
     }


}

import lombok.Data;

@Data //get+set+toString+hashcode+equals  但是没有构造方法
public class R {
//    这个类的作用
//    前后端进行数据格式的统一，也称为 前后端数据协议

    private Boolean flag;
    private Object data;
    private  String msg;

    public R(){

    }
    public R(Boolean flag){
        this.flag = flag;
     }

    public R(Boolean flag,Object data){
        this.flag = flag;
        this.data = data;
    }
//处理异常使用
    public R(Boolean flag,String msg){
        this.flag = flag;
        this.msg = msg;
    }
    //处理异常使用
    public R(String msg){
        this.flag = flag;
        this.msg = msg;
    }

}

②controller包下

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.company.controller.utils.R;
import com.company.domain.Book;

import com.company.service.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.io.IOException;
import java.util.List;
//表现层开发：基于Restful进行开发
//使用REST风格对资源进行访问成为Restful
@RestController //这个注释的作用就是@Controller+@ResponseBody
@RequestMapping("/books")  //描述模块的名称通常使用复数
//这两个注释在类上写了之后，相同的部分下面就不用写了
public class BookController2 {
    /*
     *       http://localhost/books      查询全部用户信息  Get 查询
     *     * http://localhost/books/id   查询指定用户信息  Get 查询
     *     * http://localhost/books      添加某个用户信息  Post （新增、保存）
     *     * http://localhost/books      修改用户用户信息  Put （修改、更新）
     *     * http://localhost/books/id   删除某个用户信息  Delete
     * */


    //    我们要调用业务层，那就提前注入业务层
    @Autowired
    private IBookService iBookService;


//    return是return在页面上

    //请求方式是get请求
    @GetMapping
    public R getAll(){
        R r = new R(true,iBookService.list());
        return r;  //在快速开发业务层中，list（）方法表示得到全部的数据
//        这个最终会展示在页面上
    }

    //    post提交   保存一个Book对象(添加一个对象）
    @PostMapping
    public R save(@RequestBody Book book) throws IOException { //@RequestBody请求体参数  都是传JSON数据过来
        //    下面的对象 是为了前后端进行数据格式统一，也称为前后端数据协议
        if(book.getBookName().equals("123")) throw new IOException();
           Boolean flag = iBookService.save(book);
//        R r = new R(iBookService.save(book));
        return new R(flag, flag ? "添加成功" : "添加失败" );
    }

    //    put提交    修改一个Book对象
    @PutMapping
    public  R update(@RequestBody Book book){ //@RequestBody 请求体参数 都是传JSON数据过来，接受JSON数据
        R r = new R(iBookService.updateById(book));
        return r;
    }
    //    post请求    保存一个Book对象
    @DeleteMapping("{id}")  //上面的id（这个地方不加/也可以，会自动加）值最终会赋值给Integer id中的id
    public  R delete(@PathVariable Integer id){  //@PathVariable 这个注解表示形参注解，绑定路径参数与处理器方法形参减的关系；如果不写这个的话，获取不到网页传来的数据
        R r = new R(iBookService.removeById(id));
        return r;
    }

    //    查询单个
    @GetMapping("{id}")   //此id（这个地方不加/也可以，会自动加）  最终恢会赋值给Integer id中的id
    public R getById( @PathVariable Integer id){//@PathVariable 这个注解表示形参注解，绑定路径参数与处理器方法形参减的关系；如果不写这个的话，获取不到网页传来的数据
        R r = new R(true,iBookService.getById(id)); //如果id没有的话，返回null也是可以的
        return r;
    }

/*    //查询分页
    @GetMapping("{currentPage}/{pageSize}")
    public R getPage(@PathVariable int currentPage, @PathVariable int pageSize){
        IPage<Book> page = iBookService.getPage(currentPage,pageSize);
//        如果当前页码值大于总页码值，那么重新执行查询操作，使用最大页码值为当前页码值
        if(currentPage > page.getPages()){
            page = iBookService.getPage((int)page.getPages(),pageSize);
        }
        R r = new R(true,page);
        return r;
    }*/

    //查询分页   有这个分页之后  就查不出来
    @GetMapping("{currentPage}/{pageSize}")
    public R getPage(@PathVariable int currentPage, @PathVariable int pageSize,Book book){
        IPage<Book> page = iBookService.getPage(currentPage,pageSize,book);

//        如果当前页码值大于总页码值，那么重新执行查询操作，使用最大页码值为当前页码值
        if(currentPage > page.getPages()){
            page = iBookService.getPage((int)page.getPages(),pageSize,book);
        }
        R r = new R(true,page);
        return r;
    }
}

3.dao层

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.company.domain.Book;
import org.apache.ibatis.annotations.Mapper;

@Mapper //通过这个实现数据库的操作  里面有数据库中各种各样的操作
public interface BookDao  extends BaseMapper<Book> {//指定泛型才能知道操作谁

}

4.domain层

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.*;

//@Getter所有的get方法
//@Setter所有的set方法
//@NoArgsConstructor 无参构造
//@AllArgsConstructor//全部的构造

@Data  //get+set+toString+hashcode+equals  但是没有构造方法
@TableName(value = "t_book")
public class Book {
    //    这里的属性名 要和数据库表中的属性名一致，要不然最终的查询结果是null
//    将数据库中的结果对此变量名进行注入
    @TableId(value="id",type = IdType.AUTO)  //代表自增算法
    @TableField(value = "id")
    private int id;

    @TableField(value = "bookName")
    private String bookName;

    @TableField(value = "statue")
    private String statue;

    @TableField(value="type")
    private  String type;

}

5.service层

①impl包下

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.company.dao.BookDao;
import com.company.domain.Book;
import com.company.service.IBookService;
import org.apache.logging.log4j.util.Strings;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

//业务层快速开发
@Service  //定义bean   ； BookDao是通过这个实现数据库的操作  里面有数据库中各种各样的操作；Book是实体类
//IBookService 是提供的业务层接口
public class IBookServiceImpl extends ServiceImpl<BookDao, Book> implements IBookService {
   @Autowired
   private BookDao bookDao;
    @Override
    public IPage<Book> getPage(int currentPage, int pageSize) {
        IPage<Book> page = new Page<>(currentPage,pageSize);  //这个地方不能写死了
        bookDao.selectPage(page,null);
        return page;
    }

    @Override
    public IPage getPage(int currentPage, int pageSize, Book book) {
        IPage<Book> page = new Page<Book>(currentPage,pageSize);

       LambdaQueryWrapper<Book> lqw = new  LambdaQueryWrapper<Book>();
        System.out.println(book);
        lqw.like(Strings.isNotEmpty(book.getType())    , Book::getType       , book.getType());
        lqw.like(Strings.isNotEmpty(book.getBookName()) , Book::getBookName , book.getBookName());
        lqw.like(Strings.isNotEmpty(book.getStatue())   , Book::getStatue   , book.getStatue());


        return bookDao.selectPage(page,lqw);
    }


//    先比较与标准开发，这里不需要自己写基本的增删改查了（这就是一个优势，提高了效率）
//    如果我们需要的方法他们没有，我们仍然要在接口中定义，然后自己写
//    具体怎么写，就是回归到我们上面的标准开发了
//    但是这些方法要在接口中进行实现！！！！！否则就会报错！！！！！
//    @Autowired
//    private BookDao bookDao;
//    @Override
//    public Boolean save(Book book) {
//        //bookDao.insert(book)返回的是影响的行计数  我们让他>0,就说明有影响的数据，就返回true
//        return bookDao.insert(book) >0;
//    }
//
//    @Override
//    public Boolean update(Book book) {
//        return bookDao.updateById(book) >0;
//    }
//
//    @Override
//    public Boolean delete(Integer id) {
//        return bookDao.deleteById(id) >0;
//    }
//
//    @Override
//    public Book getById(Integer id) {
//        return bookDao.selectById(id);
//    }
//
//    @Override
//    public List<Book> getAll() {
//        return bookDao.selectList(null);// null说明查询的时候没有条件，那这就是 查询全部数据
//    }
//
//    @Override //分页操作
//    public IPage<Book> getPage(int currentPage, int pageSize) {
//        IPage iPage = new Page(currentPage,pageSize);
//        return bookDao.selectPage(iPage,null);  //null是查询条件
//    }

}

②service包下

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.service.IService;
import com.company.domain.Book;

//业务层快速开发
public interface IBookService extends IService<Book> {
//我们在数据层是extends BaseMapper<Book> 和这里不太一样 不要混了
//    如果我们需要的方法他们没有提供，我们可以自己在这里写，之后再IBookServiceImpl中进行实现
//    @Override
//  Boolean save(Book book);   如果这个地方报错了，就说明重名了，我们就换一个名字
//    这样就避免了我们手写方法和他们的方法重合了
    IPage<Book> getPage(int currentPage, int pageSize);
    IPage<Book> getPage(int currentPage, int pageSize,Book book);
}

6.resources包下的book.html

<!DOCTYPE html>

<html>

<head>

    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>基于SpringBoot整合SSM案例</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">
<!--                 v-model这个属性的值要对应起来   -->
                <el-input placeholder="图书类别" v-model="pagination.type" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="图书名称" v-model="pagination.bookName" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="图书描述" v-model="pagination.statue"  style="width: 200px;" class="filter-item"></el-input>
                <el-button @click="getAll()" class="dalfBut">查询</el-button>
                               <!--已经设置了事件的绑定handleCreate()-->
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
            </div>
                  <!--数据来源于dataList    只要dataList中有数据，这些数据就能在页面上展示出来-->
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                     <!--加载索引，从1到2到3..... -->
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                 <!-- 下面表格的属性，加载id属性    下面的三个属性，都要和数据控中的字段名一直（或者说和实体类的属性名一致，才可以完成加载）-->
                <el-table-column prop="type" label="图书类别" align="center"></el-table-column>
                <!-- 下面表格的属性，加载bookName属性-->
                <el-table-column prop="bookName" label="图书名称" align="center"></el-table-column>
                <!-- 下面表格的属性，加载statue属性-->
                <el-table-column prop="statue" label="描述" align="center"></el-table-column>

                <el-table-column label="操作" align="center">

                    <template slot-scope="scope">
                        <!--将整个行对象封装成scope对象-->
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <!--将整个行对象封装成scope.row表示一整行的数据-->
                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>

                    </template>

                </el-table-column>

            </el-table>

            <!--分页组件-->
            <div class="pagination-container">

                <el-pagination
                        class="pagiantion"

                        @current-change="handleCurrentChange"

                        :current-page="pagination.currentPage"

                        :page-size="pagination.pageSize"

                        layout="total, prev, pager, next, jumper"

                        :total="pagination.total">

                </el-pagination>

            </div>

            <!-- 新增标签弹层 -->
            <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="bookName">
                                    <el-input v-model="formData.bookName"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="描述">
                                    <el-input v-model="formData.statue" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</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-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="图书名称" prop="bookName">
                                    <el-input v-model="formData.bookName"></el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="描述" >
                                    <el-input v-model="formData.statue" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</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:{
            //只要dataList中有数据，页面就能展示内容
            dataList: [],//当前页要展示的列表数据
            dialogFormVisible: false,//添加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            formData: {
                bookName: '',
                statue: ''
            },//表单数据
            rules: {//校验规则
                type: [{ required: true, message: '图书类别为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '图书名称为必填项', trigger: 'blur' }]
            },
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
                //将下面这三个模型绑定到 filter-container 这个类的 el-input标签上
                type:"",
                bookName:"",
                statue:""
            }
        },

        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.getAll();
        },

        methods: {
            //列表
/*
            getAll() {
                // console.log("run");  调试
            //    这个getAll方法 发送异步请求  then是为了取数据
                axios.get("/books").then((res)=> {
                    // console.log(res.data);  //调试

                    //只要dataList中有数据，页面就能展示内容
                    //但是res.data中，有两部分数据，一部分数据是data，一部分数据是flag，显然我们这里是需要data数据
                    this.dataList = res.data.data; //第一个data是在本文件中定义的，第二个data是我们自定义的data，在R类中

                });  //axios.get("/books")相当于访问这个 http://localhost:8080/books
            },
*/

            //分页查询
            getAll(){
            //    组织参数，拼接URL请求地址
            //     console.log(this.pagination.id);
                param = "?type="+this.pagination.type;
                param += "&bookName="+this.pagination.bookName;
                param += "&statue="+this.pagination.statue;
                console.log(param)


            //    发送异步请求
            //     this.pagination.currentPage当前页码值  this.pagination.pageSize这一页显示多少条数据
                axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param).then( (res)=>{
                    this.pagination.pageSize = res.data.data.size;
                    this.pagination.currentPage = res.data.data.current;
                    this.pagination.total = res.data.data.total;

                    this.dataList = res.data.data.records;
                });
            },

            //切换页码
            handleCurrentChange(currentPage) {
            //    修改页码值为当前选中的页码值
                this.pagination.currentPage = currentPage;
            //    执行查询
                this.getAll();

            },

            //弹出添加窗口
            handleCreate() {
            //    这是我们在前面设置的事件的绑定
               this.dialogFormVisible = true;  //弹窗就可见了   dialogFormVisible属性是在前面设置的
                //    当我们打开formData表单的时候，我们要让formData表单是空的，不能留下我们上次输入的数据
                this.resetForm();
            },

            //重置表单
            resetForm() {
            //    当我们打开formData表单的时候，我们要让formData表单是空的，不能留下我们上次输入的数据
                this.formData={};
            },

            //添加
            //添加数据，发送请求  新增是post请求
            handleAdd () {
                axios.post("/books",this.formData).then( (res)=>{
                //    判断是否成功，如果成功的话，就关闭弹层
                    if(res.data.flag){
                        //    发送完请求后，将  弹出的添加框关闭
                        this.dialogFormVisible = false;
                        // this.$message.success("添加成功");
                        this.$message.success(res.data.msg); //使用这种形式加载后台数据，通知用户是否成功
                    }else{
                        this.$message.error(res.data.msg);  //使用这种形式加载后台数据，通知用户是否成功
                    }
                }).finally(()=>{
                    //    关闭完 添加框  之后  ， 新添加的数据也应该在页面上显示出来
                    //如果添加也失败了 ，也要重新显示一个内容
                    this.getAll();
                });
            },

            //取消
            cancel(){
            //    表单的取消按钮
                this.dialogFormVisible = false;
                this.dialogFormVisible4Edit = false;
                this.$message.info("取消成功");
            },
            // 删除
            handleDelete(row) {
                this.$confirm("此操作将永久删除当前信息，是否继续？","提示",{type: "info"}).then(()=>{
                    //    将存有的数据删除
                    //row.id  将id取出来，作为后续的参数
                    axios.delete("/books/"+row.id).then( (res)=>{
                        //    判断是否成功
                        if(res.data.flag){
                            this.$message.success("删除成功");
                        }else{
                            this.$message.error("数据同步失败，自动刷新");
                        }
                    }).finally(()=>{
                        //  不论成功与否，都需要重新加载一下页面的数据
                        //如果添加也失败了 ，也要重新显示一个内容
                        this.getAll();
                    });
                }).catch(()=>{
                    this.$message.info("取消操作成功");
                })
            },

            //弹出编辑窗口
            //点击“编辑”按钮出现的操作
            handleUpdate(row) {
                axios.get("/books/"+row.id).then((res)=>{
                    if(res.data.flag && res.data.data!=null){
                        //下面这条语句是开启  编辑的表单
                        this.dialogFormVisible4Edit = true;
                        this.formData = res.data.data;
                    }else{
                        this.$message.error("数据同步失败，自动刷新");

                    }

                }).finally(()=>{
                    //  不论成功与否，都需要重新加载一下页面的数据
                    //如果编辑也失败了 ，也要重新显示一个内容
                    this.getAll();
                });
            },

            //修改
            handleEdit() {
                axios.put("/books",this.formData).then( (res)=>{
                    //    判断是否成功，如果成功的话，就关闭弹层
                    if(res.data.flag){
                        //    发送完请求后，将  弹出的添加框关闭
                        this.dialogFormVisible4Edit = false;
                        this.$message.success("修改成功");
                    }else{
                        this.$message.error("修改失败");
                    }
                }).finally(()=>{
                    //    关闭完 添加框  之后  ， 新添加的数据也应该在页面上显示出来
                    //如果添加也失败了 ，也要重新显示一个内容
                    this.getAll();
                });
            },



            //条件查询
        }
    })

</script>

</html>