系列文章目录
基于注解式开发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 {
@Bean
public 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 {
@Autowired
private OrderMapper orderMapper;
@Override
public IPage getAllOrders(Page page) {
return orderMapper.selectPage(page, null);
}
@Override
public List<Orders> getAllList() {
return orderMapper.selectList(null);
}
}
上面实际使用Mybatis-plus方法的是getAllOrders方法,实际调用的是Mybatis-plus源码里面的下面的这个方法:
4. 编写OrdersController 控制类
@RestController
public class OrderController {
@Autowired
private 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获取后端数据就是分好页的:
前端效果如下: