黑马程序员SpringBoot基础篇SSMP整合案例

╰+哭是因爲堅強的太久メ 2023-09-28 14:18 46阅读 0赞

SSMP整合案例

学习视频链接: 黑马程序员SpringBoot2全套视频教程，springboot零基础到项目实战
完整代码链接： https://github.com/HaiLei-Fly/SpringBoot_ssmp

1、功能介绍

1.1 案例功能

  1. 实体类开发— —使用Lombok快速制作实体类
  2. Dao开发— —整合MyBatisPlus，制作数据层测试
  3. Service开发— —基于MyBatisPlus进行增量开发，制作业务层测试类
  4. Controller开发— —基于Restful开发
  5. Controller开发— —前后端开发协议制作

  6. 页面开发— —基于VUE+ElementUI制作，前后端联调，页面数据处理，页面消息处理

    • 列表
    • 新增
    • 修改
    • 删除
    • 分页
    • 查询
  7. 项目异常处理
  8. 按条件查询

1.2 案例效果

主页面

在这里插入图片描述
添加功能

在这里插入图片描述
删除功能

在这里插入图片描述
条件查询

在这里插入图片描述

2、工程准备

2.1 所需环境

MySQL 8.0.22
JDK 11.0.10
MAVEN 3.6.0
Navicat 16
IDEA 2021.3.3

2.2 新建SpringBoot工程

选择Spring Initializr

在这里插入图片描述
选择需要导入的技术集

在这里插入图片描述

3、数据库

建立表的sql语句

  1. DROP TABLE IF EXISTS `tbl_book`;
  2. CREATE TABLE `tbl_book`  (
  3.   `id` int(11) NOT NULL AUTO_INCREMENT,
  4.   `type` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  5.   `name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  6.   `description` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  7.   PRIMARY KEY (`id`) USING BTREE
  8. ) ENGINE = InnoDB AUTO_INCREMENT = 13 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
  10. -- ----------------------------
  11. -- Records of tbl_book
  12. -- ----------------------------
  13. INSERT INTO `tbl_book` VALUES (1, '计算机理论', 'Spring实战 第5版', 'Spring入门经典教程，深入理解Spring原理技术内幕');
  14. INSERT INTO `tbl_book` VALUES (2, '计算机理论', 'Spring 5核心原理与30个类手写实战', '十年沉淀之作，手写Spring精华思想');
  15. INSERT INTO `tbl_book` VALUES (3, '计算机理论', 'Spring 5设计模式', '全方位解析面向Web应用的轻量级框架，带你成为Spring MVC开发高手');
  16. INSERT INTO `tbl_book` VALUES (4, '计算机理论', 'Spring MVC+MyBatis开发从入门到项目实战', '源码级剖析Spring框架，适合已掌握Java基础的读者');
  17. INSERT INTO `tbl_book` VALUES (5, '计算机理论', '轻量级Java Web企业应用实战', '源码级剖析Spring框架，适合已掌握Java基础的读者');
  18. INSERT INTO `tbl_book` VALUES (6, '计算机理论', 'Java核心技术卷I基础知识(原书第11版)', 'Core Java第11版，Jolt大奖获奖作品，针对Java SE9、10、11全面更新');
  19. INSERT INTO `tbl_book` VALUES (7, '计算机理论', '深入理解Java虚拟机', '5个维度全面剖析JVM，大厂面试知识点全覆盖');
  20. INSERT INTO `tbl_book` VALUES (8, '计算机理论', 'Java编程思想(第4版)', 'Java学习必读经典,殿堂级著作!赢得了全球程序员的广泛赞誉');
  21. INSERT INTO `tbl_book` VALUES (9, '计算机理论', '零基础学Java(全彩版)', '零基础自学编程的入门图书，由浅入深，详解Java语言的编程思想和核心技术');
  22. INSERT INTO `tbl_book` VALUES (10, '市场营销', '直播就该这么做:主播高效沟通实战指南', '李子染、李佳琦、薇娅成长为网红的秘密都在书中');
  23. INSERT INTO `tbl_book` VALUES (11, '市场营销', '直播销讲实战—本通', '和秋叶—起学系列网络营销书籍');
  24. INSERT INTO `tbl_book` VALUES (12, '市场营销', '直播带货:淘宝、天猫直播从新手到高手', '—本教你如何玩转直播的书，10堂课轻松实现带货月入3W+');
  26. SET FOREIGN_KEY_CHECKS = 1;

tbl_book表

在这里插入图片描述

4、工程结构

项目整体结构

在这里插入图片描述
详细结构

在这里插入图片描述

配置pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.7.1</version>
  9.         <relativePath/>
  10.     </parent>
  12.     <groupId>com.hailei</groupId>
  13.     <artifactId>springboot_ssmp</artifactId>
  14.     <version>0.0.1-SNAPSHOT</version>
  16.     <properties>
  17.         <java.version>11</java.version>
  18.     </properties>
  19.     <dependencies>
  20.         <dependency>
  21.             <groupId>org.springframework.boot</groupId>
  22.             <artifactId>spring-boot-starter-web</artifactId>
  23.         </dependency>
  25.         <dependency>
  26.             <groupId>com.baomidou</groupId>
  27.             <artifactId>mybatis-plus-boot-starter</artifactId>
  28.             <version>3.4.3</version>
  29.         </dependency>
  31.         <dependency>
  32.             <groupId>com.alibaba</groupId>
  33.             <artifactId>druid-spring-boot-starter</artifactId>
  34.             <version>1.2.6</version>
  35.         </dependency>
  37.         <dependency>
  38.             <groupId>mysql</groupId>
  39.             <artifactId>mysql-connector-java</artifactId>
  40.             <scope>runtime</scope>
  41.         </dependency>
  43.         <dependency>
  44.             <groupId>org.projectlombok</groupId>
  45.             <artifactId>lombok</artifactId>
  46.         </dependency>
  48.         <dependency>
  49.             <groupId>org.springframework.boot</groupId>
  50.             <artifactId>spring-boot-starter-test</artifactId>
  51.             <scope>test</scope>
  52.         </dependency>
  53.     </dependencies>
  55.     <build>
  56.         <plugins>
  57.             <plugin>
  58.                 <groupId>org.springframework.boot</groupId>
  59.                 <artifactId>spring-boot-maven-plugin</artifactId>
  60.             </plugin>
  61.         </plugins>
  62.     </build>
  64. </project>

配置application.yml

  1. server:
  2.   port: 80
  4. spring:
  5.   datasource:
  6.     druid:
  7.       driver-class-name: com.mysql.cj.jdbc.Driver
  8.       url: jdbc:mysql://localhost:3306/ssm_db?serverTimezone=UTC
  9.       username: root
  10.       password: 12345678
  12. mybatis-plus:
  13.   global-config:
  14.     db-config:
  15.       table-prefix: tbl_
  16.       id-type: auto
  17.   configuration:
  18.     log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

5、功能实现(后端)

定义MP拦截器并将其设置为Spring管控的bean
MPConfig

  1. package com.hailei.config;
  3. import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
  4. import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
  5. import org.springframework.context.annotation.Bean;
  6. import org.springframework.context.annotation.Configuration;
  8. @Configuration
  9. public class MPConfig {
  11.     @Bean
  12.     public MybatisPlusInterceptor mybatisPlusInterceptor(){
  14.         MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
  15.         interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
  16.         return interceptor;
  17.     }
  18. }

在表现层做统一的异常处理，使用SpringMVC提供的异常处理器做统一的异常处理
ProjectExceptionAdvice

  1. package com.hailei.controller.utils;
  3. import org.springframework.web.bind.annotation.ExceptionHandler;
  4. import org.springframework.web.bind.annotation.RestControllerAdvice;
  6. //@ControllerAdvice
  7. @RestControllerAdvice
  8. public class ProjectExceptionAdvice {
  10.     //拦截所有的异常信息
  11.     @ExceptionHandler(Exception.class)
  12.     public R doException(Exception ex){
  14.         //记录日志
  15.         //通知运维
  16.         //通知开发
  17.         ex.printStackTrace();
  18.         return new R("服务器故障，请稍后再试！");
  19.     }
  20. }

将所有操作的操作结果数据格式统一起来，需要设计表现层返回结果的模型类，用于后端与前端进行数据格式统一，也称为前后端数据协议
R

  1. package com.hailei.controller.utils;
  3. import lombok.Data;
  5. @Data
  6. public class R {
  8.     private Boolean flag;
  9.     private Object data;
  10.     private String msg;
  12.     public R(){
  13.     }
  15.     public R(Boolean flag){
  17.         this.flag = flag;
  18.     }
  20.     public R(Boolean flag,Object data){
  22.         this.flag = flag;
  23.         this.data = data;
  24.     }
  26.     public R(Boolean flag,String msg){
  28.         this.flag = flag;
  29.         this.msg = msg;
  30.     }
  32.     public R(String msg){
  34.         this.flag = false;
  35.         this.msg = msg;
  36.     }
  37. }

表现层实现类如下
BookController

  1. package com.hailei.controller;
  3. import com.baomidou.mybatisplus.core.metadata.IPage;
  4. import com.hailei.controller.utils.R;
  5. import com.hailei.domain.Book;
  6. import com.hailei.service.BookService;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.web.bind.annotation.*;
  10. import java.io.IOException;
  12. @RestController
  13. @RequestMapping("/books")
  14. public class BookController {
  17.     @Autowired
  18.     private BookService bookService;
  20.     @GetMapping
  21.     public R getAll(){
  23.         return new R(true, bookService.list());
  24.     }
  26.     @PostMapping
  27.     public R save(@RequestBody Book book) throws IOException {
  30.         if (book.getName().equals("123") ) throw new IOException();
  31.         boolean flag = bookService.save(book);
  32.         return new R(flag, flag ? "添加成功^_^" : "添加失败-_-!");
  33.     }
  35.     @PutMapping
  36.     public R update(@RequestBody Book book) throws IOException {
  38.         if (book.getName().equals("123") ) throw new IOException();
  39.         boolean flag = bookService.modify(book);
  40.         return new R(flag, flag ? "修改成功^_^" : "修改失败-_-!");
  41.     }
  43.     @DeleteMapping("{id}")
  44.     public R delete(@PathVariable Integer id){
  46.         return new R(bookService.delete(id));
  47.     }
  49.     @GetMapping("{id}")
  50.     public R getById(@PathVariable Integer id){
  52.         return new R(true, bookService.getById(id));
  53.     }
  55.     @GetMapping("{currentPage}/{pageSize}")
  56.     public R getPage(@PathVariable int currentPage,@PathVariable int pageSize,Book book){
  59.         IPage<Book> page = bookService.getPage(currentPage, pageSize,book);
  60.         //如果当前页码值大于了总页码值，那么重新执行查询操作，使用最大页码值作为当前页码值
  61.         if( currentPage > page.getPages()){
  63.             page = bookService.getPage((int)page.getPages(), pageSize,book);
  64.         }
  65.         return new R(true, page);
  66.     }
  67. }

数据层开发本次使用MyBatisPlus技术，数据源使用Druid
BookDao

  1. package com.hailei.dao;
  3. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  4. import com.hailei.domain.Book;
  5. import org.apache.ibatis.annotations.Mapper;
  7. @Mapper
  8. public interface BookDao extends BaseMapper<Book> {
  11. }

实体类的开发可以自动通过工具手工生成get/set方法。Lombok，一个Java类库，提供了一组注解，简化POJO实体类开发
Book

  1. package com.hailei.domain;
  3. import lombok.Data;
  5. @Data
  6. public class Book {
  8.     private Integer id;
  9.     private String type;
  10.     private String name;
  11.     private String description;
  12. }

业务层实现类如下，转调数据层即可
BookServiceImpl

  1. package com.hailei.service.impl;
  3. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
  4. import com.baomidou.mybatisplus.core.metadata.IPage;
  5. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  6. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  7. import com.hailei.dao.BookDao;
  8. import com.hailei.domain.Book;
  9. import com.hailei.service.BookService;
  10. import org.apache.logging.log4j.util.Strings;
  11. import org.springframework.beans.factory.annotation.Autowired;
  12. import org.springframework.stereotype.Service;
  14. @Service
  15. public class BookServiceImpl extends ServiceImpl<BookDao, Book> implements BookService {
  18.     @Autowired
  19.     private BookDao bookDao;
  21.     @Override
  22.     public boolean saveBook(Book book) {
  24.         return bookDao.insert(book) > 0;
  25.     }
  27.     @Override
  28.     public boolean modify(Book book) {
  30.         return bookDao.updateById(book) > 0;
  31.     }
  33.     @Override
  34.     public boolean delete(Integer id) {
  36.         return bookDao.deleteById(id) > 0;
  37.     }
  39.     @Override
  40.     public IPage<Book> getPage(int currentPage, int pageSize) {
  42.         IPage page = new Page(currentPage,pageSize);
  43.         bookDao.selectPage(page,null);
  44.         return page;
  45.     }
  47.     @Override
  48.     public IPage<Book> getPage(int currentPage, int pageSize, Book book) {
  50.         LambdaQueryWrapper<Book> lqw = new LambdaQueryWrapper<Book>();
  51.         lqw.like(Strings.isNotEmpty(book.getType()),Book::getType,book.getType());
  52.         lqw.like(Strings.isNotEmpty(book.getName()),Book::getName,book.getName());
  53.         lqw.like(Strings.isNotEmpty(book.getDescription()),Book::getDescription,book.getDescription());
  54.         IPage page = new Page(currentPage,pageSize);
  55.         bookDao.selectPage(page,lqw);
  56.         return page;
  57.     }
  58. }

业务层接口定义如下
BookService

  1. package com.hailei.service;
  3. import com.baomidou.mybatisplus.core.metadata.IPage;
  4. import com.baomidou.mybatisplus.extension.service.IService;
  5. import com.hailei.domain.Book;
  7. public interface BookService extends IService<Book> {
  10.     boolean saveBook(Book book);
  11.     boolean modify(Book book);
  12.     boolean delete(Integer id);
  13.     IPage<Book> getPage(int currentPage, int pageSize);
  14.     IPage<Book> getPage(int currentPage,int pageSize,Book book);
  15. }

SSMPApplication

  1. package com.hailei;
  3. import org.springframework.boot.SpringApplication;
  4. import org.springframework.boot.autoconfigure.SpringBootApplication;
  6. @SpringBootApplication
  7. public class SSMPApplication {
  10.     public static void main(String[] args) {
  12.         SpringApplication.run(SSMPApplication.class);
  13.     }
  15. }

6、功能实现(前端)

books

  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <!-- 页面meta -->
  9.     <meta charset="utf-8">
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  13.     <title>基于SpringBoot整合SSM案例</title>
  15.     <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  17.     <!-- 引入样式 -->
  19.     <link rel="stylesheet" href="../plugins/elementui/index.css">
  21.     <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  23.     <link rel="stylesheet" href="../css/style.css">
  25. </head>
  27. <body class="hold-transition">
  29. <div id="app">
  31.     <div class="content-header">
  33.         <h1>图书管理</h1>
  35.     </div>
  37.     <div class="app-container">
  39.         <div class="box">
  41.             <div class="filter-container">
  42.                 <el-input placeholder="图书类别" v-model="pagination.type" style="width: 200px;" class="filter-item"></el-input>
  43.                 <el-input placeholder="图书名称" v-model="pagination.name" style="width: 200px;" class="filter-item"></el-input>
  44.                 <el-input placeholder="图书描述" v-model="pagination.description" style="width: 200px;" class="filter-item"></el-input>
  45.                 <el-button @click="getAll()" class="dalfBut">查询</el-button>
  46.                 <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
  47.             </div>
  49.             <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
  51.                 <el-table-column type="index" align="center" label="序号"></el-table-column>
  53.                 <el-table-column prop="type" label="图书类别" align="center"></el-table-column>
  55.                 <el-table-column prop="name" label="图书名称" align="center"></el-table-column>
  57.                 <el-table-column prop="description" label="描述" align="center"></el-table-column>
  59.                 <el-table-column label="操作" align="center">
  61.                     <template slot-scope="scope">
  63.                         <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
  65.                         <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
  67.                     </template>
  69.                 </el-table-column>
  71.             </el-table>
  73.             <!--分页组件-->
  74.             <div class="pagination-container">
  76.                 <el-pagination
  77.                         class="pagiantion"
  79.                         @current-change="handleCurrentChange"
  81.                         :current-page="pagination.currentPage"
  83.                         :page-size="pagination.pageSize"
  85.                         layout="total, prev, pager, next, jumper"
  87.                         :total="pagination.total">
  89.                 </el-pagination>
  91.             </div>
  93.             <!-- 新增标签弹层 -->
  95.             <div class="add-form">
  97.                 <el-dialog title="新增图书" :visible.sync="dialogFormVisible">
  99.                     <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
  101.                         <el-row>
  103.                             <el-col :span="12">
  105.                                 <el-form-item label="图书类别" prop="type">
  107.                                     <el-input v-model="formData.type"/>
  109.                                 </el-form-item>
  111.                             </el-col>
  113.                             <el-col :span="12">
  115.                                 <el-form-item label="图书名称" prop="name">
  117.                                     <el-input v-model="formData.name"/>
  119.                                 </el-form-item>
  121.                             </el-col>
  123.                         </el-row>
  126.                         <el-row>
  128.                             <el-col :span="24">
  130.                                 <el-form-item label="描述">
  132.                                     <el-input v-model="formData.description" type="textarea"></el-input>
  134.                                 </el-form-item>
  136.                             </el-col>
  138.                         </el-row>
  140.                     </el-form>
  142.                     <div slot="footer" class="dialog-footer">
  144.                         <el-button @click="cancel()">取消</el-button>
  146.                         <el-button type="primary" @click="handleAdd()">确定</el-button>
  148.                     </div>
  150.                 </el-dialog>
  152.             </div>
  154.             <!-- 编辑标签弹层 -->
  156.             <div class="add-form">
  158.                 <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
  160.                     <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
  162.                         <el-row>
  164.                             <el-col :span="12">
  166.                                 <el-form-item label="图书类别" prop="type">
  168.                                     <el-input v-model="formData.type"/>
  170.                                 </el-form-item>
  172.                             </el-col>
  174.                             <el-col :span="12">
  176.                                 <el-form-item label="图书名称" prop="name">
  178.                                     <el-input v-model="formData.name"/>
  180.                                 </el-form-item>
  182.                             </el-col>
  184.                         </el-row>
  186.                         <el-row>
  188.                             <el-col :span="24">
  190.                                 <el-form-item label="描述">
  192.                                     <el-input v-model="formData.description" type="textarea"></el-input>
  194.                                 </el-form-item>
  196.                             </el-col>
  198.                         </el-row>
  200.                     </el-form>
  202.                     <div slot="footer" class="dialog-footer">
  204.                         <el-button @click="cancel()">取消</el-button>
  206.                         <el-button type="primary" @click="handleEdit()">确定</el-button>
  208.                     </div>
  210.                 </el-dialog>
  212.             </div>
  214.         </div>
  216.     </div>
  218. </div>
  220. </body>
  222. <!-- 引入组件库 -->
  224. <script src="../js/vue.js"></script>
  226. <script src="../plugins/elementui/index.js"></script>
  228. <script type="text/javascript" src="../js/jquery.min.js"></script>
  230. <script src="../js/axios-0.18.0.js"></script>
  232. <script>
  233.     var vue = new Vue({
  235.         el: '#app',
  236.         data:{
  238.             dataList: [],//当前页要展示的列表数据
  239.             dialogFormVisible: false,//添加表单是否可见
  240.             dialogFormVisible4Edit:false,//编辑表单是否可见
  241.             formData: {
  242.       },//表单数据
  243.             rules: {
  244.       //校验规则
  245.                 type: [{
  246.        required: true, message: '图书类别为必填项', trigger: 'blur' }],
  247.                 name: [{
  248.        required: true, message: '图书名称为必填项', trigger: 'blur' }]
  249.             },
  250.             pagination: {
  251.       //分页相关模型数据
  252.                 currentPage: 1,//当前页码
  253.                 pageSize:10,//每页显示的记录数
  254.                 total:0,//总记录数
  255.                 type: "",
  256.                 name: "",
  257.                 description: ""
  258.             }
  259.         },
  261.         //钩子函数，VUE对象初始化完成后自动执行
  262.         created() {
  264.             //调用查询全部数据的操作
  265.             this.getAll();
  266.         },
  268.         methods: {
  270.             //分页查询
  271.             getAll() {
  273.                 //组织参数，拼接url请求地址
  274.                 param = "?type="+this.pagination.type;
  275.                 param +="&name="+this.pagination.name;
  276.                 param +="&description="+this.pagination.description;
  277.                 //发送异步请求
  278.                 axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param).then((res)=>{
  280.                     this.pagination.pageSize = res.data.data.size;
  281.                     this.pagination.currentPage = res.data.data.current;
  282.                     this.pagination.total = res.data.data.total;
  284.                     this.dataList = res.data.data.records;
  285.                 });
  286.             },
  288.             //切换页码
  289.             handleCurrentChange(currentPage) {
  291.                 //修改页码值为当前选中的页码值
  292.                 this.pagination.currentPage = currentPage;
  293.                 //执行查询
  294.                 this.getAll();
  295.             },
  297.             //弹出添加窗口
  298.             handleCreate() {
  300.                 this.dialogFormVisible = true;
  301.                 this.resetForm();
  302.             },
  304.             //重置表单
  305.             resetForm() {
  307.                 this.formData = {
  308.       };
  309.             },
  311.             //添加
  312.             handleAdd () {
  314.                 axios.post("/books",this.formData).then((res)=>{
  316.                     //判断当前操作是否成功
  317.                     if(res.data.flag){
  319.                         //1.关闭弹层
  320.                         this.dialogFormVisible = false;
  321.                         this.$message.success(res.data.msg);
  322.                     }else{
  324.                         this.$message.error(res.data.msg);
  325.                     }
  326.                 }).finally(()=>{
  328.                     //2.重新加载数据
  329.                     this.getAll();
  330.                 });
  331.             },
  333.             //取消
  334.             cancel(){
  336.                 this.dialogFormVisible = false;
  337.                 this.dialogFormVisible4Edit = false;
  338.                 this.$message.info("当前操作取消");
  339.             },
  341.             // 删除
  342.             handleDelete(row) {
  344.                 // console.log(row);
  345.                 this.$confirm("此操作永久删除当前信息，是否继续？","提示",{
  346.       type:"info"}).then(()=>{
  348.                     axios.delete("/books/"+row.id).then((res)=>{
  350.                         if(res.data.flag){
  352.                             this.$message.success("删除成功");
  353.                         }else{
  355.                             this.$message.error("数据同步失败，自动刷新");
  356.                         }
  357.                     }).finally(()=>{
  359.                         //2.重新加载数据
  360.                         this.getAll();
  361.                     });
  362.                 }).catch(()=>{
  364.                     this.$message.info("取消操作");
  365.                 });
  366.             },
  368.             //弹出编辑窗口
  369.             handleUpdate(row) {
  371.                 axios.get("/books/"+row.id).then((res)=>{
  373.                     if(res.data.flag && res.data.data != null ){
  375.                         this.dialogFormVisible4Edit = true;
  376.                         this.formData = res.data.data;
  377.                     }else{
  379.                         this.$message.error("数据同步失败，自动刷新");
  380.                     }
  381.                 }).finally(()=>{
  383.                     //2.重新加载数据
  384.                     this.getAll();
  385.                 });
  386.             },
  388.             //修改
  389.             handleEdit() {
  391.                 axios.put("/books",this.formData).then((res)=>{
  393.                     //判断当前操作是否成功
  394.                     if(res.data.flag){
  396.                         //1.关闭弹层
  397.                         this.dialogFormVisible4Edit = false;
  398.                         this.$message.success("修改成功");
  399.                     }else{
  401.                         this.$message.error("修改失败");
  402.                     }
  403.                 }).finally(()=>{
  405.                     //2.重新加载数据
  406.                     this.getAll();
  407.                 });
  408.             },
  410.             //条件查询
  411.         }
  412.     })
  414. </script>
  416. </html>

7、工程打包

跳过Test

在这里插入图片描述
clean命令

在这里插入图片描述
package命令

在这里插入图片描述
打包完成

在这里插入图片描述
终端运行

在这里插入图片描述
希望本文对大家有帮助，上文若有不妥之处，欢迎指正

分享决定高度，学习拉开差距

发表评论

表情：
评论列表 （有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读