mybatisPlus分页查询前端代码

以下是一个示例前端代码，使用了Vue.js和Axios库来向后端发送分页查询请求：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="prevPage">Prev</button>
      <span>{{ currentPage }}/{{ totalPages }}</span>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      pageSize: 10,
      totalPages: 0,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/api/user', {
        params: {
          current: this.currentPage,
          size: this.pageSize,
        },
      }).then((response) => {
        this.items = response.data.records;
        this.totalPages = response.data.pages;
      });
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchData();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchData();
      }
    },
  },
};
</script>

在上面的代码中，我们定义了一个基本的Vue组件，它包含一个表格和分页控件。在组件创建时，我们调用`fetchData`方法来获取第一页的数据。在`fetchData`方法中，我们使用Axios库发送一个GET请求到后端的`/api/user`接口，并传入当前页码和页面大小作为参数。在接收到响应后，我们将响应中的记录和总页数存储在组件的状态中，并重新渲染表格和分页控件。

在分页控件中，我们提供了`prevPage`和`nextPage`方法来切换到上一页和下一页。在这些方法中，我们检查当前页码是否可以减少或增加，并在需要时更新当前页码并重新获取数据。

需要注意的是，这里的请求地址`/api/user`应该替换为后端实际的接口地址。另外，如果后端接口返回的数据格式与示例不同，那么前端代码也需要相应地进行调整。