今天开发的有一个场景就是需要从远程ssh服务器上加载一个文件展示到前端，但是一次性拉过来有几万条数据，一下载加载整个文件会导致前端非常非常的卡，于是要使用分页解决，我之前看过的有mybatis的分页查询解决方案，哪个是封装好的，但是我的场景是查询文件实现分页展示，因此需要写一个个性化的分页逻辑。
一、后端
我后端使用的是springboot，用的是java连接远程服务器读取文件然后返回一个list列表。
用到了依赖
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.1</version>
</dependency>
大致的逻辑就是说后端先通过你自己的方式获取到文件，有一个page，pagesize这两个参数控制要读取的内容从哪到哪。返回这一小段即可。前端每次点击上一页，下一页，页面大小实际上就是控制这两个参数进行数据读取。
public List<SyslogMessage> readRemoteFilePaged(int page, int pageSize) throws JSchException, SftpException, IOException {
JSch jsch = new JSch();
Session session = jsch.getSession(user, host, port);
session.setPassword(password);
session.setConfig("StrictHostKeyChecking", "no"); // 注意：生产环境中应该使用更安全的方式处理host key
session.connect();
ChannelSftp channelSftp = (ChannelSftp) session.openChannel("sftp");
channelSftp.connect();
// 计算跳过的行数
int skipLines = (page - 1) * pageSize;
int currentLine = 0;
List<SyslogMessage> loglist = new ArrayList<>();
InputStream inputStream = channelSftp.get(remoteFilePath);
try (BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream))) {
String line;
while ((line = reader.readLine()) != null) {
// 跳过指定数量的行
if (currentLine < skipLines) {
currentLine++;
continue;
}
// 读取指定数量的行
if (loglist.size() < pageSize) {
loglist.add(new SyslogMessage(line));
} else {
break; // 达到每页大小，退出循环
}
}
}
channelSftp.disconnect();
session.disconnect();
return loglist;
}
二、前端
前端使用的是Vue,主要就是用到了element中的el-pagination组件，使用handleSizeChange和handleCurrentChange控制页面大小以及当前页数。每次切换时都是用axios用这两个参数像后端请求数据，很方便，注意url要用` `而不是单引号
<template>
<div>
<div class="pagination-container">
<h1 class="server-log-title">133服务器sys日志</h1>
</div>
<el-table :data="syslog" style="width: 100%" :row-class-name="tableRowClassName">
<el-table-column
prop="log"
label="日志"
width="auto">
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[50, 100, 150, 200]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="1000000">
</el-pagination>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
name: 'Ecust',
syslog: [],
currentPage:10,
pageSize:50,
totalLogCount:0
}
},
methods:{
tableRowClassName({row, rowIndex}) {
if (row.log && row.log.includes('高资源')) {
console.log()
return 'warning-row';
} else{
return 'success-row';
}
},
async fetchLogs(){
try {
let url=`http://localhost:5678/syslog/page?page=${this.currentPage}&pageSize=${this.pageSize}`
await axios.get(url).then((response)=>{
this.syslog = response.data
// console.log(response)
})
} catch (error) {
console.log('Error:', error)
}
},
handleSizeChange(val) {
this.pageSize = val
this.currentPage = 1 // 当每页条数改变时，重置页码为第一页
this.fetchLogs()
},
handleCurrentChange(val) {
this.currentPage = val
this.fetchLogs()
}
},
created() {
this.fetchLogs()
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<style scoped>
.pagination-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中，如果需要的话 */
height: 100px; /* 或者其他你需要的高度 */
}
.pagination-container2 {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 使用视口高度来垂直居中，或者根据需要调整 */
margin: 0; /* 移除默认的外边距 */
padding: 20px; /* 添加一些内边距 */
background-color: #f5f5f5; /* 添加背景色 */
}
.server-log-title {
font-family: 'Arial', sans-serif; /* 使用一个常见的无衬线字体 */
color: #333; /* 字体颜色 */
font-size: 2em; /* 字体大小 */
text-align: center; /* 文本居中 */
margin: 0; /* 移除默认的外边距 */
padding: 0; /* 移除默认的内边距 */
letter-spacing: 1px; /* 字母间距 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 文本阴影，增加立体感 */
}
</style>