SpringBoot和Vue.js都是當前非常熱門的技術，而且往往會一起使用在開發Web應用中。在Web應用中，分頁是一個非常常見的需求，因為用戶往往只需要在第一頁或幾頁中瀏覽數據，而不是把所有數據都顯示在一頁上。下面我們就來介紹如何在SpringBoot和Vue.js中實現分頁功能。

首先，在SpringBoot中我們可以使用Spring Data JPA來進行數據訪問操作。在項目中引入JPA之后，我們可以直接繼承JpaRepository或其它Repository接口來操作數據庫。例如，我們可以在Repository接口中定義一個findPage()方法，用來查詢指定頁碼和每頁大小的數據：

public interface UserRepository extends JpaRepository{
@Query("SELECT u FROM User u")
PagefindPage(Pageable pageable);
}

在Vue.js中，我們可以使用element-ui組件庫來實現分頁功能。為了實現分頁，我們需要引入el-pagination組件，并且指定頁碼、每頁條數和總條數等參數：

<template>
<div>
<el-pagination
v-model="currentPage"
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange">
</el-pagination>
<div v-for="item in userList" :key="item.id">
{{item.name}}
</div>
</div>
</template>
<script>
import { getUserList } from '@/api/user'
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 0,
userList: []
}
},
methods: {
handleCurrentChange(val) {
this.currentPage = val
this.getUserList()
},
getUserList() {
getUserList({ pageNum: this.currentPage, pageSize: this.pageSize }).then(response =>{
this.userList = response.data.list
this.total = response.data.total
})
}
},
mounted() {
this.getUserList()
}
}
</script>

在代碼中，我們先引入了element-ui組件庫，并使用v-model指令綁定currentPage變量，這樣我們就可以通過currentPage來控制當前頁碼。同時，我們定義了pageSize和total變量，它們分別代表每頁大小和總條數，這些參數都可以從后端接口獲取。接著，在el-pagination組件中，我們傳入currentPage、pageSize和total參數，并綁定current-change事件，當頁碼發生變化時，我們就可以調用getUSerList()方法來重新獲取數據。最后，在getUserList()方法中，我們使用axios來請求后端接口，返回的數據中包含了用戶列表和總條數，我們將它們分別賦值給userList和total變量，即可實現前端分頁功能。