springboot axios封装分页

对于前后端分离的项目，通常可以使用 Axios 发送 HTTP 请求获取数据并实现分页。下面是一个简单的 Axios 封装分页的实现：

1. 后端实现分页查询接口，返回分页数据

@GetMapping("/users")
public Page<User> getUsers(@RequestParam(name = "page", defaultValue = "0") int page,
                           @RequestParam(name = "size", defaultValue = "10") int size) {
    Pageable pageable = PageRequest.of(page, size);
    return userRepository.findAll(pageable);
}

2. 前端使用 Axios 发送分页查询请求

import axios from 'axios';

const BASE_URL = 'http://localhost:8080';

export function getUsers(page, size) {
  const url = `${BASE_URL}/users?page=${page}&size=${size}`;
  return axios.get(url);
}

3. 前端解析分页数据

import { getUsers } from './api';

export default {
  data() {
    return {
      page: 0,
      size: 10,
      total: 0,
      users: [],
    };
  },
  async mounted() {
    await this.loadUsers();
  },
  methods: {
    async loadUsers() {
      const res = await getUsers(this.page, this.size);
      this.users = res.data.content;
      this.total = res.data.totalElements;
    },
    handlePageChange(page) {
      this.page = page - 1;
      this.loadUsers();
    },
  },
};

在以上代码中，`getUsers` 函数中的 `page` 和 `size` 参数用于指定当前页码和每页数据量。前端通过 `loadUsers` 方法发送分页查询请求，并更新 `users` 和 `total` 数据。`handlePageChange` 方法用于监听页码变化事件，实现页面跳转。

希望以上代码可以对你有所帮助。