springboot+vue实现分页操作 实现代码是什么

实现分页操作需要前后端配合完成，下面给出一个简单的示例代码，供参考。

后端代码（基于Spring Boot）：

@RestController
@RequestMapping("/api")
public class UserController {
 
    @Autowired
    private UserService userService;
 
    @GetMapping("/users")
    public Page<User> getUsers(@RequestParam(defaultValue = "0") int page,
                               @RequestParam(defaultValue = "10") int size) {
        return userService.getUsers(PageRequest.of(page, size));
    }
}

上述代码中，我们通过 `@GetMapping` 注解来映射请求路径 `/users`，并通过 `@RequestParam` 注解来接受前端传来的 `page` 和 `size` 参数，然后通过 `PageRequest` 对象来构建 `Pageable` 对象，最终返回一个 `Page<User>` 对象给前端。

前端代码（基于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>
    <nav>
      <ul class="pagination">
        <li class="page-item" v-bind:class="{ disabled: page === 0 }">
          <a class="page-link" href="#" @click.prevent="setPage(page - 1)">Previous</a>
        </li>
        <li class="page-item" v-for="pageNumber in totalPages" :key="pageNumber"
            v-bind:class="{ active: pageNumber === page }">
          <a class="page-link" href="#" @click.prevent="setPage(pageNumber)">{{ pageNumber + 1 }}</a>
        </li>
        <li class="page-item" v-bind:class="{ disabled: page === totalPages - 1 }">
          <a class="page-link" href="#" @click.prevent="setPage(page + 1)">Next</a>
        </li>
      </ul>
    </nav>
  </div>
</template>
 
<script>
import axios from 'axios'
 
export default {
  name: 'UserList',
  data() {
    return {
      users: [],
      page: 0,
      size: 10,
      totalPages: 0
    }
  },
  mounted() {
    this.getUsers()
  },
  methods: {
    getUsers() {
      axios.get(`/api/users?page=${this.page}&size=${this.size}`)
        .then(response => {
          this.users = response.data.content
          this.totalPages = response.data.totalPages
        })
        .catch(error => {
          console.log(error)
        })
    },
    setPage(pageNumber) {
      this.page = pageNumber
      this.getUsers()
    }
  }
}
</script>

上述代码中，我们通过 `axios` 库来发起后端的请求，然后将返回的数据渲染到页面上，同时也实现了分页功能。

需要注意的是，这里的 `totalPages` 是根据后端返回的数据计算得出的，因此需要先发起一次请求来获取总页数。另外，这里使用了 Bootstrap 的分页样式，所以需要在页面中引入 Bootstrap 相关的 CSS 和 JS 文件。