springboot+Vue實現(xiàn)分頁的示例代碼
今天開發(fā)的有一個場景就是需要從遠程ssh服務(wù)器上加載一個文件展示到前端,但是一次性拉過來有幾萬條數(shù)據(jù),一下載加載整個文件會導致前端非常非常的卡,于是要使用分頁解決,我之前看過的有mybatis的分頁查詢解決方案,哪個是封裝好的,但是我的場景是查詢文件實現(xiàn)分頁展示,因此需要寫一個個性化的分頁邏輯。
一、后端
我后端使用的是springboot,用的是java連接遠程服務(wù)器讀取文件然后返回一個list列表。
用到了依賴
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.1</version>
</dependency>
大致的邏輯就是說后端先通過你自己的方式獲取到文件,有一個page,pagesize這兩個參數(shù)控制要讀取的內(nèi)容從哪到哪。返回這一小段即可。前端每次點擊上一頁,下一頁,頁面大小實際上就是控制這兩個參數(shù)進行數(shù)據(jù)讀取。
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"); // 注意:生產(chǎn)環(huán)境中應(yīng)該使用更安全的方式處理host key
session.connect();
ChannelSftp channelSftp = (ChannelSftp) session.openChannel("sftp");
channelSftp.connect();
// 計算跳過的行數(shù)
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) {
// 跳過指定數(shù)量的行
if (currentLine < skipLines) {
currentLine++;
continue;
}
// 讀取指定數(shù)量的行
if (loglist.size() < pageSize) {
loglist.add(new SyslogMessage(line));
} else {
break; // 達到每頁大小,退出循環(huán)
}
}
}
channelSftp.disconnect();
session.disconnect();
return loglist;
}
二、前端
前端使用的是Vue,主要就是用到了element中的el-pagination組件,使用handleSizeChange和handleCurrentChange控制頁面大小以及當前頁數(shù)。每次切換時都是用axios用這兩個參數(shù)像后端請求數(shù)據(jù),很方便,注意url要用` `而不是單引號
<template>
<div>
<div class="pagination-container">
<h1 class="server-log-title">133服務(wù)器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 // 當每頁條數(shù)改變時,重置頁碼為第一頁
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; /* 使用視口高度來垂直居中,或者根據(jù)需要調(diào)整 */
margin: 0; /* 移除默認的外邊距 */
padding: 20px; /* 添加一些內(nèi)邊距 */
background-color: #f5f5f5; /* 添加背景色 */
}
.server-log-title {
font-family: 'Arial', sans-serif; /* 使用一個常見的無襯線字體 */
color: #333; /* 字體顏色 */
font-size: 2em; /* 字體大小 */
text-align: center; /* 文本居中 */
margin: 0; /* 移除默認的外邊距 */
padding: 0; /* 移除默認的內(nèi)邊距 */
letter-spacing: 1px; /* 字母間距 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 文本陰影,增加立體感 */
}
</style>到此這篇關(guān)于springboot+Vue實現(xiàn)分頁的示例代碼的文章就介紹到這了,更多相關(guān)springboot Vue分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Java Druid連接池與Apache的DBUtils使用教程
這篇文章主要介紹了Java Druid連接池與Apache的DBUtils使用方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-12-12
Java中l(wèi)ist集合的clear方法及空字符串的區(qū)別
這篇文章主要介紹了Java中l(wèi)ist集合的clear方法及空字符串的區(qū)別,在使用list?結(jié)合的時候習慣了?list=null?;在創(chuàng)建這樣的方式,但是發(fā)現(xiàn)使用list的clear?方法很不錯,尤其是有大量循環(huán)的時候<BR>list.clear()與list?=?null?區(qū)別,需要的朋友可以參考下2023-08-08
Maven配置文件修改及導入第三方j(luò)ar包的實現(xiàn)
本文主要介紹了Maven配置文件修改及導入第三方j(luò)ar包的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08
SpringCloud Finchley+Spring Boot 2.0 集成Consul的方法示例(1.2版本)
這篇文章主要介紹了SpringCloud Finchley+Spring Boot 2.0 集成Consul的方法示例(1.2版本),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08

