springboot+Vue實現(xiàn)分頁的示例代碼
今天開發(fā)的有一個場景就是需要從遠程ssh服務(wù)器上加載一個文件展示到前端,但是一次性拉過來有幾萬條數(shù)據(jù),一下載加載整個文件會導(dǎo)致前端非常非常的卡,于是要使用分頁解決,我之前看過的有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控制頁面大小以及當(dāng)前頁數(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 // 當(dāng)每頁條數(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使用方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-12-12Java中l(wèi)ist集合的clear方法及空字符串的區(qū)別
這篇文章主要介紹了Java中l(wèi)ist集合的clear方法及空字符串的區(qū)別,在使用list?結(jié)合的時候習(xí)慣了?list=null?;在創(chuàng)建這樣的方式,但是發(fā)現(xiàn)使用list的clear?方法很不錯,尤其是有大量循環(huán)的時候<BR>list.clear()與list?=?null?區(qū)別,需要的朋友可以參考下2023-08-08Maven配置文件修改及導(dǎo)入第三方j(luò)ar包的實現(xiàn)
本文主要介紹了Maven配置文件修改及導(dǎo)入第三方j(luò)ar包的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08SpringCloud Finchley+Spring Boot 2.0 集成Consul的方法示例(1.2版本)
這篇文章主要介紹了SpringCloud Finchley+Spring Boot 2.0 集成Consul的方法示例(1.2版本),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08