springboot+Vue实现分页

文章目录

一、后端
二、前端

今天开发的有一个场景就是需要从远程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 keysession.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-columnprop="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>