springboot和vue分页功能是怎么实现的
时间: 2024-05-07 16:23:18 浏览: 9
Spring Boot 和 Vue.js 分别负责后端和前端的业务逻辑,分页功能的实现需要两者配合完成。
1. 后端 Spring Boot 实现分页
Spring Boot 可以使用 MyBatis 或 JPA 等 ORM 框架来访问数据库,实现分页功能可以使用框架提供的分页插件或自己实现分页逻辑。以 MyBatis 为例,可以使用 PageHelper 插件来实现分页功能。
具体步骤如下:
- 在 pom.xml 文件中添加 PageHelper 依赖:
```
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.10</version>
</dependency>
```
- 在 MyBatis 的 Mapper.xml 文件中配置分页查询:
```
<select id="findUserList" parameterType="map" resultMap="userMap">
SELECT * FROM user WHERE 1=1
<if test="username != null and username != ''">
AND username LIKE CONCAT('%',#{username},'%')
</if>
<if test="age != null">
AND age = #{age}
</if>
ORDER BY create_time DESC
</select>
```
- 在 Spring Boot 中定义控制器方法,使用 PageHelper 插件实现分页逻辑:
```
@GetMapping("/userList")
public PageInfo<User> findUserList(@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
String username, Integer age) {
PageHelper.startPage(pageNum, pageSize);
List<User> userList = userService.findUserList(username, age);
return new PageInfo<>(userList);
}
```
2. 前端 Vue.js 实现分页
Vue.js 可以使用 Element UI 等 UI 框架来实现分页功能,也可以自己编写分页组件。以 Element UI 为例,可以使用 el-pagination 组件来实现分页功能。
具体步骤如下:
- 在 Vue.js 的模板文件中引入 el-pagination 组件:
```
<template>
<div>
<el-table :data="tableData">
<!-- 表格列定义 -->
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
```
- 在 Vue.js 的脚本文件中定义分页相关变量和方法:
```
<script>
export default {
data() {
return {
tableData: [], // 表格数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示条数
total: 0 // 总条数
};
},
methods: {
// 处理每页显示条数变化
handleSizeChange(val) {
this.pageSize = val;
this.loadData();
},
// 处理当前页码变化
handleCurrentChange(val) {
this.currentPage = val;
this.loadData();
},
// 加载表格数据
loadData() {
// 调用后端接口获取分页数据
// ...
// 更新表格数据和总条数
this.tableData = res.data.list;
this.total = res.data.total;
}
}
};
</script>
```
以上就是 Spring Boot 和 Vue.js 实现分页功能的基本步骤,具体实现还需要根据实际业务场景进行调整。