java前后端分离分页查询列表前端代码

以下是一个使用Vue.js实现的前端分页查询列表的示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.description }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button :disabled="pageNum === 1" @click="getPageData(pageNum - 1)">上一页</button>
      <button v-for="index in pages" :key="index" :class="{active: pageNum === index}" @click="getPageData(index)">{{ index }}</button>
      <button :disabled="pageNum === totalPage" @click="getPageData(pageNum + 1)">下一页</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
      totalPage: 0,
    }
  },
  created() {
    this.getPageData(this.pageNum)
  },
  methods: {
    getPageData(pageNum) {
      axios.get('/api/list', {
        params: {
          pageNum: pageNum,
          pageSize: this.pageSize,
        },
      }).then(res => {
        this.list = res.data.list
        this.pageNum = res.data.pageNum
        this.totalPage = res.data.totalPage
      })
    },
    getPages() {
      const pages = []
      if (this.totalPage <= 5) {
        for (let i = 1; i <= this.totalPage; i++) {
          pages.push(i)
        }
      } else {
        if (this.pageNum <= 3) {
          for (let i = 1; i <= 5; i++) {
            pages.push(i)
          }
        } else if (this.pageNum >= this.totalPage - 2) {
          for (let i = this.totalPage - 4; i <= this.totalPage; i++) {
            pages.push(i)
          }
        } else {
          for (let i = this.pageNum - 2; i <= this.pageNum + 2; i++) {
            pages.push(i)
          }
        }
      }
      return pages
    },
  },
  computed: {
    pages() {
      return this.getPages()
    },
  },
}
</script>

该代码通过Vue.js实现了前端分页查询功能，其中getPageData方法发送分页查询请求，通过axios库向后端发送GET请求获取数据。页面展示使用了一个表格，以及一个分页组件，通过计算属性pages实现了分页数字按钮的展示逻辑。