工控做网站网络软营销

markdown

前后端分页实现全面指南

本指南详细讲解Java后端与Vue前端的分页实现方案，涵盖框架集成和原生实现两种方式。

---

一、后端Java分页实现

1. 使用MyBatis + PageHelper插件

**依赖配置**：
```xml
<!-- pom.xml -->
<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.6</version>
</dependency>
代码实现：java
// Controller层
@GetMapping("/users")
public PageInfo<User> getUsers(@RequestParam int pageNum, @RequestParam int pageSize) {return userService.getUsers(pageNum, pageSize);
}// Service层
public PageInfo<User> getUsers(int pageNum, int pageSize) {PageHelper.startPage(pageNum, pageSize);  // 自动拦截SQLList<User> users = userMapper.selectAll();return new PageInfo<>(users);  // 包含分页元数据
}// Mapper XML（无需分页SQL）
<select id="selectAll" resultType="User">SELECT * FROM users  <!-- 原始SQL -->
</select>

2. 原生JDBC分页实现.

核心逻辑：

java
public PageResult manualPagination(int pageNum, int pageSize) throws SQLException {
int offset = (pageNum - 1) * pageSize;
String dataSql = “SELECT * FROM users LIMIT ? OFFSET ?”;
String countSql = “SELECT COUNT(*) FROM users”;

try (Connection conn = dataSource.getConnection();PreparedStatement dataStmt = conn.prepareStatement(dataSql);PreparedStatement countStmt = conn.prepareStatement(countSql)) {// 分页数据查询dataStmt.setInt(1, pageSize);dataStmt.setInt(2, offset);ResultSet rs = dataStmt.executeQuery();List<User> users = new ArrayList<>();while (rs.next()) {users.add(new User(rs.getInt("id"), rs.getString("name")));}// 总数查询ResultSet countRs = countStmt.executeQuery();int total = countRs.next() ? countRs.getInt(1) : 0;return new PageResult<>(users, total);
}

}

二、前端Vue分页实现1. 使用Element UI组件安装组件：bash

npm install element-ui

模板与逻辑：vue

<el-pagination:current-page="currentPage":page-sizes="[5, 10, 20]":page-size="pageSize":total="total"layout="total, sizes, prev, pager, next"@size-change="handleSizeChange"@current-change="handlePageChange"
/>

2. 自定义分页组件

组件实现：

vue

三、数据库分页SQL
数据库	SQL语句示例
MySQL	

SELECT * FROM users ORDER BY id LIMIT #{pageSize} OFFSET #{offset}

Oracle	

SELECT * FROM (SELECT t.*, ROWNUM rn FROM users t WHERE ROWNUM <= #{end}) WHERE rn >= #{start}

SQL Server	

SELECT * FROM users ORDER BY id OFFSET #{offset} ROWS FETCH NEXT #{pageSize} ROWS ONLY

四、核心公式与协议分页计算公式javascript

offset = (currentPage - 1) * pageSize
totalPages = Math.ceil(totalItems / pageSize)

接口协议规范请求参数：

json
{
“pageNum”: 1, // 当前页码
“pageSize”: 10 // 每页数据量
}

响应格式：json

{
“list”: [], // 当前页数据
“total”: 100 // 总数据量
}

五、性能优化建议
索引优化排序字段必须建立索引（如ORDER BY create_time DESC）组合查询时使用复合索引深度分页处理sql

– MySQL优化方案
SELECT * FROM users
WHERE id > #{lastId} – 使用游标分页
ORDER BY id
LIMIT #{pageSize}

缓存策略热点数据使用Redis缓存分页结果使用Elasticsearch进行复杂分页查询六、方案选型指南
场景	推荐方案
快速开发常规项目	PageHelper + Element UI
高并发海量数据	游标分页 + 前端无限滚动
需要深度定制分页逻辑	原生JDBC + 自定义Vue组件
复杂多条件查询	Elasticsearch分页
完整示例代码参考：GitHub示例仓库