springboot+Vue實(shí)現(xiàn)分頁(yè)的示例代碼
今天開發(fā)的有一個(gè)場(chǎng)景就是需要從遠(yuǎn)程ssh服務(wù)器上加載一個(gè)文件展示到前端,但是一次性拉過(guò)來(lái)有幾萬(wàn)條數(shù)據(jù),一下載加載整個(gè)文件會(huì)導(dǎo)致前端非常非常的卡,于是要使用分頁(yè)解決,我之前看過(guò)的有mybatis的分頁(yè)查詢解決方案,哪個(gè)是封裝好的,但是我的場(chǎng)景是查詢文件實(shí)現(xiàn)分頁(yè)展示,因此需要寫一個(gè)個(gè)性化的分頁(yè)邏輯。
一、后端
我后端使用的是springboot,用的是java連接遠(yuǎn)程服務(wù)器讀取文件然后返回一個(gè)list列表。
用到了依賴
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.1</version>
</dependency>
大致的邏輯就是說(shuō)后端先通過(guò)你自己的方式獲取到文件,有一個(gè)page,pagesize這兩個(gè)參數(shù)控制要讀取的內(nèi)容從哪到哪。返回這一小段即可。前端每次點(diǎn)擊上一頁(yè),下一頁(yè),頁(yè)面大小實(shí)際上就是控制這兩個(gè)參數(shù)進(jìn)行數(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();
// 計(jì)算跳過(guò)的行數(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) {
// 跳過(guò)指定數(shù)量的行
if (currentLine < skipLines) {
currentLine++;
continue;
}
// 讀取指定數(shù)量的行
if (loglist.size() < pageSize) {
loglist.add(new SyslogMessage(line));
} else {
break; // 達(dá)到每頁(yè)大小,退出循環(huán)
}
}
}
channelSftp.disconnect();
session.disconnect();
return loglist;
}
二、前端
前端使用的是Vue,主要就是用到了element中的el-pagination組件,使用handleSizeChange和handleCurrentChange控制頁(yè)面大小以及當(dāng)前頁(yè)數(shù)。每次切換時(shí)都是用axios用這兩個(gè)參數(shù)像后端請(qǐng)求數(shù)據(jù),很方便,注意url要用` `而不是單引號(hào)
<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 // 當(dāng)每頁(yè)條數(shù)改變時(shí),重置頁(yè)碼為第一頁(yè)
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; /* 使用視口高度來(lái)垂直居中,或者根據(jù)需要調(diào)整 */
margin: 0; /* 移除默認(rèn)的外邊距 */
padding: 20px; /* 添加一些內(nèi)邊距 */
background-color: #f5f5f5; /* 添加背景色 */
}
.server-log-title {
font-family: 'Arial', sans-serif; /* 使用一個(gè)常見的無(wú)襯線字體 */
color: #333; /* 字體顏色 */
font-size: 2em; /* 字體大小 */
text-align: center; /* 文本居中 */
margin: 0; /* 移除默認(rèn)的外邊距 */
padding: 0; /* 移除默認(rèn)的內(nèi)邊距 */
letter-spacing: 1px; /* 字母間距 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 文本陰影,增加立體感 */
}
</style>到此這篇關(guān)于springboot+Vue實(shí)現(xiàn)分頁(yè)的示例代碼的文章就介紹到這了,更多相關(guān)springboot Vue分頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Java代碼實(shí)現(xiàn)循環(huán)隊(duì)列的示例代碼
隊(duì)列作為基礎(chǔ)的數(shù)據(jù)結(jié)構(gòu),是程序員的入門課。也是所有程序員必須掌握的一種數(shù)據(jù)結(jié)構(gòu),隊(duì)列在程序中廣泛應(yīng)用,因此我們應(yīng)該對(duì)隊(duì)列有深入的了解,接下來(lái)我們通過(guò)代碼來(lái)對(duì)隊(duì)列這種數(shù)據(jù)結(jié)構(gòu)進(jìn)行深度解析,感興趣的朋友一起看看吧2021-09-09
java實(shí)現(xiàn)抽獎(jiǎng)功能解析
這篇文章主要為大家詳細(xì)介紹了java實(shí)現(xiàn)抽獎(jiǎng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03
Java如何利用線程池和Redis實(shí)現(xiàn)高效數(shù)據(jù)入庫(kù)
文章介紹了如何利用線程池和Redis在高并發(fā)環(huán)境中實(shí)現(xiàn)高效的數(shù)據(jù)入庫(kù),通過(guò)將數(shù)據(jù)首先存儲(chǔ)在Redis緩存中,然后利用線程池定期批量入庫(kù)處理,確保系統(tǒng)的性能和穩(wěn)定性,主要組件包括BatchDataStorageService、CacheService和RedisUtils等2025-02-02
Java編寫時(shí)間工具類ZTDateTimeUtil的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Java編寫時(shí)間工具類ZTDateTimeUtil,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
Nacos服務(wù)注冊(cè)客戶端服務(wù)端原理分析
這篇文章主要為大家介紹了Nacos服務(wù)注冊(cè)客戶端服務(wù)端原理分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
基于UDP協(xié)議實(shí)現(xiàn)聊天系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了基于UDP協(xié)議實(shí)現(xiàn)聊天系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04

