多语种多场景的的分页详解
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>- 原生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组件安装组件：bashnpm 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
四、核心公式与协议分页计算公式javascriptoffset = (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示例仓库