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

1. 实体类开发————使用Lombok快速制作实体类

   Lombok，一个Java类库，提供了一组注解，简化POJO实体类开发，SpringBoot目前默认 集成了lombok技术，并提供了对应的版本控制，所以只需要提供对应的坐标即可，在 pom.xml中添加lombok的坐标。使用lombok可以通过一个注解@Data完成一个实体类对应的getter，setter，toString， equals，hashCode等操作的快速添加

   <!--lombok--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency>

2. Dao开发————整合MyBatisPlus，制作数据层测试、分页功能制作

   1、导入依赖坐标、安装mybatisx插件
   2、修改配置文件、创建xml映射文件
   3、使用注解开发、xml映射文件自定义开发、继承BaseMapper<Book> 使用mp自带api开发

3. Service开发————基于MyBatisPlus进行增量开发，制作业务层测试类，是组织业务逻辑功 能，并根据业务需求，对数据持久层发起调用

   public Boolean save(Book book);
       public Boolean update(Book book);
       public Boolean delete(Integer id);
       public Book getById(Integer id);
       public List<Book> getAll();
       public IPage<Book> getPage(int currentPage, int pageSize);
   ​
   //分页查询
       @Override
       public IPage<Book> getPage(int currentPage, int pageSize) {
           IPage page = new Page(currentPage,pageSize);
           bookDao.selectPage(page,null);
           return page;
       }

4. Controller开发————基于Restful开发，使用PostMan测试接口功能 （SpringMVC中学到的技术）

5. Controller开发————前后端开发协议制作

6. 页面开发————基于VUE+ElementUI制作，前后端联调，页面数据处理，页面消 息处理 列表 新增 修改 删除 分页 查询

7. 项目异常处理

8. 按条件查询————页面功能调整、Controller修正功能、Service修正功能

分页总结 （极其重要）

1. 后端添加分页插件

2. 使用el分页组件

3. 定义分页组件绑定的数据模型

4. 异步调用获取分页数据

5. 分页数据页面回显

后端添加分页插件

@Configuration
public class MybatisPlusConfig {
    //如果你的mp是3.4.0及以后的版本，你要用这种写法；
    //1、定义MP拦截器并将其设置为Spring管控的bean
    //2、分页插件
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        //创建MP的拦截器栈
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        //初始化了分页拦截器，并添加到拦截器栈中
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return interceptor;
    }
}

使用el分页组件

<!--分页组件-->
<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>

为了配合分页组件，封装分页对应的数据模型

data:{
pagination: {
//分页相关模型数据
currentPage: 1, //当前页码
pageSize:10, //每页显示的记录数
total:0, //总记录数
}
},

修改查询全部功能为分页查询，通过路径变量传递页码信息参数，页面根据分页操作结果读取对应数据，并进行数据模型绑定

getAll() {
axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res) => {
     this.pagination.total = res.data.data.total;
     this.pagination.currentPage = res.data.data.current;
     this.pagination.pagesize = res.data.data.size;
     this.dataList = res.data.data.records;
  });
},

后台提供对应的分页功能

@GetMapping("/{currentPage}/{pageSize}")
public R getAll(@PathVariable Integer currentPage,@PathVariable
Integer pageSize){
IPage<Book> pageBook = bookService.getPage(currentPage,
pageSize);
return new R(null != pageBook ,pageBook);
}

对切换页码操作设置调用当前分页操作

//切换页码
handleCurrentChange(currentPage) {
   this.pagination.currentPage = currentPage;
   this.getAll();
},