springboot+Vue实现分页

今天开发的有一个场景就是需要从远程ssh服务器上加载一个文件展示到前端，但是一次性拉过来有几万条数据，一下载加载整个文件会导致前端非常非常的卡，于是要使用分页解决，我之前看过的有mybatis的分页查询解决方案，哪个是封装好的，但是我的场景是查询文件实现分页展示，因此需要写一个个性化的分页逻辑。

一、后端

我后端使用的是springboot，用的是java连接远程服务器读取文件然后返回一个list列表。

用到了依赖

<dependency>
            <groupId>io.jsonwebtokengroupId>
            <artifactId>jjwtartifactId>
            <version>0.9.1version>
dependency>
1
2
3
4
5

大致的逻辑就是说后端先通过你自己的方式获取到文件，有一个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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

二、前端

前端使用的是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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125