【SpringBoot+Vue实现书籍管理系统--下篇】整合MyBatisPlus完成分页功能的开发并部署到docker容器中

本专栏将从基础开始，循序渐进，以实战为线索，逐步深入SpringBoot相关知识相关知识，打造完整的云原生学习步骤，提升工程化编码能力和思维能力，写出高质量代码。希望大家都能够从中有所收获，也请大家多多支持。
专栏地址:SpringBoot专栏
本文涉及的代码都已放在gitee上：gitee地址
如果文章知识点有错误的地方，请指正！大家一起学习，一起进步。

本文所涉及的代码已经编译打包到我的云服务器中：http://47.106.176.37:8080/pages/books.html 欢迎大家测试访问。

文章目录

• 1.页面基础功能开发
• • 1.1 列表功能（非分页版）
  • 1.2 添加功能
  • 1.3 删除功能
  • 1.4 修改功能
• 2.业务消息一致性处理
• 3.页面功能开发
• • 3.1 分页功能
  • 3.2 删除功能维护
  • 3.3 条件查询功能
• 4. springboot项目打包并部署到docker中

先看一下这个案例的最终效果

主页面

添加

删除

修改

分页

条件查询

整体案例中需要采用的技术如下

1. 实体类开发————使用Lombok快速制作实体类
2. Dao开发————整合MyBatisPlus，制作数据层测试
3. Service开发————基于MyBatisPlus进行增量开发，制作业务层测试类
4. Controller开发————基于Restful开发，使用PostMan测试接口功能
5. Controller开发————前后端开发协议制作
6. 页面开发————基于VUE+ElementUI制作，前后端联调，页面数据处理，页面消息处理

• 列表
• 新增
• 修改
• 删除
• 分页
• 查询

7. 项目异常处理
8. 按条件查询————页面功能调整、Controller修正功能、Service修正功能

希望通过这个案例，各位小伙伴能够完成基础开发的技能训练。整体开发过程采用做一层测一层的形式进行，过程完整。

1.页面基础功能开发

1.1 列表功能（非分页版）

列表功能主要操作就是加载完数据，将数据展示到页面上，此处要利用VUE的数据模型绑定，发送请求得到数据，然后页面上读取指定数据即可。

页面数据模型定义

data:{
	dataList: [],		//当前页要展示的列表数据
	...
},

异步请求获取数据

//列表
getAll() {
    axios.get("/books").then((res)=>{
        this.dataList = res.data.data;
    });
},

这样在页面加载时就可以获取到数据，并且由VUE将数据展示到页面上了。

1.2 添加功能

添加功能用于收集数据的表单是通过一个弹窗展示的，因此在添加操作前首先要进行弹窗的展示，添加后隐藏弹窗即可。因为这个弹窗一直存在，因此当页面加载时首先设置这个弹窗为不可显示状态，需要展示，切换状态即可。

默认状态

data:{
	dialogFormVisible: false,	//添加表单是否可见
	...
},

切换为显示状态

//弹出添加窗口
handleCreate() {
	this.dialogFormVisible = true;
},

由于每次添加数据都是使用同一个弹窗录入数据，所以每次操作的痕迹将在下一次操作时展示出来࿰