網(wǎng)頁中數(shù)據(jù)庫查詢是非常常見的操作，在前端框架Vue中，我們可以使用Axios發(fā)送異步請求獲取數(shù)據(jù)，再利用Vue的數(shù)據(jù)綁定進(jìn)行展示，但當(dāng)數(shù)據(jù)量非常大時，我們需要進(jìn)行分頁，這就需要用到后端的分頁查詢了。

在后端我們可以根據(jù)前端傳過來的數(shù)據(jù)進(jìn)行分頁，比如當(dāng)前頁數(shù)、每頁顯示的數(shù)據(jù)數(shù)量等等，傳回分頁后的數(shù)據(jù)給前端進(jìn)行展示。

public function index(Request $request){
$currentPage = $request->input('currentPage',1); //獲取當(dāng)前頁數(shù)，默認(rèn)是第一頁
$pageSize = $request->input('pageSize',10); //每頁數(shù)據(jù)條數(shù)，默認(rèn)10條
$orderBy = $request->input('orderBy','created_at'); //排序方式
$order = $request->input('order','desc'); //排序順序
//根據(jù)條件查詢數(shù)據(jù)并按照要求進(jìn)行排序
$data = DB::table('employees')->orderBy($orderBy,$order)->forPage($currentPage,$pageSize)->get();
//獲取數(shù)據(jù)總數(shù)量
$total = DB::table('employees')->count();
//返回分頁后的數(shù)據(jù)和數(shù)據(jù)總量
return [
'data' =>$data,
'total' =>$total
];
}

在前端中我們需要引入一個分頁組件，常用的有ElementUI中的Pagination分頁組件和第三方的vue-pagination組件，我們以ElementUI為例。

<template>
<div>
<el-table :data="tableData"></el-table>
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
:total="total"
:page-size="pageSize"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
tableData:[],
total:0,
currentPage:1,
pageSize:10
}
},
mounted(){
this.getData()
},
methods:{
getData(){
axios.get('/api/employees',{
params:{
currentPage:this.currentPage,
pageSize:this.pageSize
}
})
.then(response =>{
this.tableData = response.data.data
this.total = response.data.total
})
},
handleSizeChange(val) {
this.pageSize = val
this.currentPage = 1
this.getData()
},
handleCurrentChange(val) {
this.currentPage = val
this.getData()
}
}
}
</script>

以上就是Vue中的分頁查詢操作，希望可以對你有所幫助。