springboot+Vue实现分页的示例代码
作者：牛右刀薛面
本文主要介绍了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 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>到此这篇关于springboot+Vue实现分页的示例代码的文章就介绍到这了,更多相关springboot Vue分页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！