vue加springboot分页查询代码

以下是一个简单的 Vue.js 和 Spring Boot 分页查询的示例代码：

Vue.js 代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="prevPage">Previous</button>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      currentPage: 1,
      pageSize: 10,
      totalPages: 0,
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get(`/api/users?page=${this.currentPage}&size=${this.pageSize}`)
        .then((response) => {
          this.users = response.data.content;
          this.totalPages = response.data.totalPages;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.getUsers();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.getUsers();
      }
    },
  },
};
</script>

Spring Boot 代码：

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

请注意，这只是一个简单的示例代码，实际应用中可能需要更多的错误处理和安全性措施。