系列文章目录
基于注解式开发Springboot-Vue3整合Mybatis-plus实现分页查询(二)——前端el-pagination实现
文章目录
- 系列文章目录
- 系统版本
- 实现功能
- 操作步骤
- 1. 新建Mybatis的全局分页配置文件
- 2. 编写OrderMapper :继承Mybatis-plus提供的BaseMapper
- 3. 编写OrderServiceImpl,实现OrderService
- 4. 编写OrdersController 控制类
- 发送接口请求测试
系统版本
后端: Springboot 2.7、 Mybatis-plus
数据库:MySQL 8.0
前端:Vue3、Axois 1.6.0 、Vite 4.5.0、Element-Plus、Router-v4
实现功能
本文主要从后端,借助Mybatis-plus提供的方法,实现分页功能。url中需要传入当前页,和每页显示多少条数据。下篇文章将结合Element-plus的el-pagination组件,调用后台数据,实现分页效果。
下面演示一个功能,比如分页查询订单(Orders)记录。读者可以根据自己的实体类,自行修改。
数据库数据如下:
操作步骤
1. 新建Mybatis的全局分页配置文件
Mybatis配置全局配置文件:MybatisPageConfig
/*** @author hspcadmin*/
@Configuration
@MapperScan("your mapper address")//设置mapper接口的扫描public class MyBatisPageConfig {@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();//添加分页插件interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}
2. 编写OrderMapper :继承Mybatis-plus提供的BaseMapper
public interface OrderMapper extends BaseMapper<Orders> {
}
在Service中编写具体业务方法,IPage <Orders>
getAllOrders 是返回IPage类型,IPage类型已经将数据分页好了。
在OrderService中编写具体的业务。
public interface OrderService {/*** 获得所有的订单信息,使用IPage分页* @param page* @return*/IPage<Orders> getAllOrders(Page page);/*** 获取所有订单数据,不分页* @return*/List<Orders> getAllList();
}
3. 编写OrderServiceImpl,实现OrderService
package com.fy36.hotelmanage.service.impl;import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.fy36.hotelmanage.entity.Orders;
import com.fy36.hotelmanage.mapper.OrderMapper;
import com.fy36.hotelmanage.service.OrderService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;/*** @author hspcadmin*/
@Service
public class OrderServiceImpl implements OrderService {@Autowiredprivate OrderMapper orderMapper;@Overridepublic IPage getAllOrders(Page page) {return orderMapper.selectPage(page, null);}@Overridepublic List<Orders> getAllList() {return orderMapper.selectList(null);}
}
上面实际使用Mybatis-plus方法的是getAllOrders方法,实际调用的是Mybatis-plus源码里面的下面的这个方法:
4. 编写OrdersController 控制类
@RestController
public class OrderController {@Autowiredprivate OrderServiceImpl orderService;/*** 不带分页查询** @return 返回List数组*/@GetMapping("/get-all")public ApiResult getAllOrderList() {System.out.println("get-all.....");return ApiResultHandler.buildApiResult(200, "获取信息", orderService.getAllList());}/*** 带分页的查询** @param page,代表当前的页数* @param size,代表当前每页显示多少内容* @return 返回IPage类型*/@GetMapping("/get-page/{page}/{size}")public IPage<Orders> queryUserForPage(@PathVariable("page") Integer page, @PathVariable("size") Integer size) {Page<Orders> ordersPage = new Page<>(page, size);IPage<Orders> logsIPage = orderService.getAllOrders(ordersPage);return logsIPage;}
}
发送接口请求测试
数据库中数据一共有7条。
localhost:8081/get-page/1/4
,即查询第1页,并规定每页4条数据。
localhost:8081/get-page/2/4
,即查询第2页,并规定每页4条数据。
再比如更改每页的页面大小为3,发送请求:localhost:8081/get-page/1/3
前端axois获取后端数据就是分好页的:
前端效果如下: