分页功能的实现
下面将给出一个示例,这个示例演示了前后端分页的实现方式,集成了MyBatis-Plus以在服务器端进行员工信息的分页,并利用Vue.js结合Element UI分页组件在客户端进行分页。前端和后端之间的通信通过Axios处理异步请求。
-
MybatisPlusConfig配置类:
/** * 配置MP的分页插件 */ @Configuration public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor(); mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor()); return mybatisPlusInterceptor; } }
该配置类配置了MyBatis Plus的分页插件,使用
PaginationInnerInterceptor
作为分页的内部拦截器。该函数的功能和实现过程:
-
@Configuration
: 这个注解表明这是一个配置类,Spring Boot 在应用启动时会加载它,用于配置一些相关的 bean。 -
@Bean
: 这个注解用于声明一个 bean,该方法返回的对象将被 Spring 容器管理。 -
public MybatisPlusInterceptor mybatisPlusInterceptor()
: 这个方法,返回一个MybatisPlusInterceptor
对象。该对象是 MyBatis-Plus 提供的分页插件的核心配置类。 -
MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
: 创建一个MybatisPlusInterceptor
对象。 -
mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
: 向MybatisPlusInterceptor
对象中添加一个内部拦截器,这里使用的是PaginationInnerInterceptor
。这个内部拦截器是 MyBatis-Plus 分页插件的具体实现,它会拦截 SQL 查询,并在查询中添加分页的相关逻辑。 -
return mybatisPlusInterceptor;
: 将配置好的MybatisPlusInterceptor
对象返回,以便被 Spring 容器管理。
-
-
前端Vue组件:
<el-pagination class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="counts" :current-page.sync="page" @size-change="handleSizeChange" @current-change="handleCurrentChange" ></el-pagination>
前端使用Element UI的el-pagination组件进行分页展示,通过
page-size
、counts
、page
等属性来控制分页状态,同时监听size-change
和current-change
事件来处理分页大小和当前页码的变化。 -
前端事件处理方法:
handleSizeChange (val) { this.pageSize = val this.init() }, handleCurrentChange (val) { this.page = val this.init() }
前端定义了处理分页大小变化和当前页码变化的事件方法,分别调用
init
方法进行数据重新加载。 -
前端数据初始化方法:
async init () { const params = { page: this.page, pageSize: this.pageSize, name: this.input ? this.input : undefined } await getMemberList(params).then(res => { if (String(res.code) === '1') { this.tableData = res.data.records || [] this.counts = res.data.total } }).catch(err => { this.$message.error('请求出错了:' + err) }) }
init
方法负责调用后端接口获取分页数据,并更新前端展示的数据和分页信息。这个函数的功能是通过调用
getMemberList
函数获取成员列表的数据,并根据响应结果更新组件的状态,包括this.tableData
和this.counts
。如果请求出错,会显示错误消息。这样的初始化函数通常用于在组件加载时获取初始数据。 -
前端异步请求函数
function getMemberList (params) { return $axios({ url: '/employee/page', method: 'get', params }) }
用于向后端请求员工信息的分页数据。该函数使用axios库发送HTTP GET请求到指定的后端接口
/employee/page
,并携带了前端传递的参数params
,包括page
(当前页码)、pageSize
(每页数据量)和name
(可能的员工姓名过滤条件)。 -
后端Spring Boot Controller方法:
/** * 员工信息分页查询 * @param page * @param pageSize * @param name * @return */ @GetMapping("/page") public R<Page> page(int page, int pageSize, String name){ //Page是MP封装好的类 log.info("page = {}, pageSize = {}, name = {}", page, pageSize, name); //构造分页构造器 Page pageInfo = new Page<>(page, pageSize); //构造条件构造器 LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper(); //添加过滤条件 queryWrapper.like(StringUtils.isNotEmpty(name), Employee::getName, name); //添加排序条件 queryWrapper.orderByDesc(Employee::getUpdateTime); //执行查询 employeeService.page(pageInfo, queryWrapper); return R.success(pageInfo); }
后端Controller定义了一个分页查询接口,接收前端传递的分页参数和查询条件,构造MyBatis Plus的
Page
对象和LambdaQueryWrapper
条件构造器,然后调用Service层的page
方法执行查询,并将查询结果返回给前端。该函数的功能和实现过程:
-
@GetMapping("/page")
: 这是一个处理 HTTP GET 请求的注解,映射到路径 “/page”。表示该方法用于处理获取分页数据的请求。 -
public R<Page> page(int page, int pageSize, String name)
: 方法声明,接受三个参数,分别是页码page
、每页大小pageSize
和员工名字name
。返回类型是一个泛型R
,其中包装了一个Page
对象。R
可能是一个自定义的响应类,用于封装接口返回结果。 -
Page pageInfo = new Page<>(page, pageSize)
: 创建一个 MyBatis-Plus 提供的Page
对象,用于封装分页信息,包括页码和每页大小。 -
LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper();
: 创建一个 MyBatis-Plus 提供的 LambdaQueryWrapper 对象,用于构造查询条件。 -
queryWrapper.like(StringUtils.isNotEmpty(name), Employee::getName, name)
: 添加一个条件,如果员工名字不为空,则添加一个模糊查询条件,根据名字过滤员工信息。 -
queryWrapper.orderByDesc(Employee::getUpdateTime)
: 添加排序条件,按照员工信息的更新时间降序排序。 -
employeeService.page(pageInfo, queryWrapper)
: 调用employeeService
的page
方法执行分页查询,将查询结果封装到pageInfo
对象中。
-