PageHelper + Mybatis 搭配Vue-Element-UI
前端:使用分頁組件<el-pagination>
<template>
<el-table v-loading="loading" :data="tableData" highlight-current-row size="small" style="width: 100%;">
<el-table-column :label="$t('table.id')" type="index" min-width="5%" align="center" v-if="false"/>
<el-table-column width="120px" prop="subTime" label="統計日期" align="center"/>
<el-table-column v-for="item in columnOptions" :label="item.value" :key="item.id" :property="item.id"
align="center" width="65">
<el-table-column min-width="10%" v-for="ccitem in ccOptions" :label="ccitem.value"
:key="ccitem.id" :property="ccitem.id" align="center">
<template slot-scope="scope">
<span>{{ scope.row["data"][item.id][scope.column.property] }}</span>
</template>
</el-table-column>
</el-table-column>
</el-table>
<!--分頁組件-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handlePageChange"
:current-page="queryParams.pageNum"
:page-sizes="[10, 20, 30, 40, 50]"
:page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="queryParams.total">
</el-pagination>
</template>
<script>
export default {
data() {
return {
loading: false,
queryParams: {
groupCode: this.groupCode,
costDate: null,
groupId: this.groupId,
applicationCode: null,
startTime: null,
endTime: null,
pageNum: 0,
pageSize: 10,
total:null,
},
tableData: []}
},
created() {
this.$nextTick(() => {
})
},
computed: {
},
watch: {
//延時查詢
'queryParams.groupCode': debounce(function () {
//以下兩行解決結果表格數據不被刷新
this.columnOptions = []
this.tableData = []
this.init();
}, 500)},
methods: {
getData() {
this.loading = true
groupApi.getCost(this.queryParams).then(res => {
this.tableData = res.result.list
//設置total 確保分頁插件<el-pagination>能正確更新
this.queryParams.total = Number(res.result.total)
this.loading = false
}).catch(err => {
this.loading = false
})
},
//分頁
handleSizeChange(val) {
this.queryParams.pageSize = val;
this.getData();
},
handlePageChange(val) {
this.queryParams.pageNum = val;
this.getData();
}
}
}
</script>
後端:使用PageHelper + Mybatis做分頁查詢與封裝
單獨使用Mybatis分頁則查詢結果爲全部List以及詳細的分頁信息,
PageHelper + Mybatis搭配使用則只返回對應分頁區間段的數據以及詳細分頁信息
package com.example.demo.controller;
import com.example.demo.common.utils.PublicUtil;
import com.example.demo.common.wrapper.WrapMapper;
import com.example.demo.common.wrapper.Wrapper;
import com.example.demo.model.domain.AccountExpendDo;
import com.example.demo.model.dto.AccountExpendDto;
import com.example.demo.model.vo.AccountExpendVo;
import com.example.demo.service.AccountExpendService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.google.common.base.Preconditions;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
/**
* @Description 賬戶支出
* @Author Zxl
* @Date 2019/9/16
* @Version 1.0
**/
@RestController
@RequestMapping(value = "/accountExpend", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public class AccountExpendController {
@Resource
private AccountExpendService accountExpendService;
/**
* 查詢單個.
*
* @param accountExpendDto
* @return 單個DO(領域對象 , 在此也即爲持久化對象原型)
*/
@PostMapping(value = "/queryOne")
public Wrapper queryOne(@RequestBody AccountExpendDto accountExpendDto) {
Preconditions.checkArgument(PublicUtil.isNotEmpty(accountExpendDto.getOpenId()), "openId不能爲空");
AccountExpendDo accountExpendDo = accountExpendService.selectOne(accountExpendDto);
return WrapMapper.ok(accountExpendDo);
}
/**
* 查詢多個.(Page分頁封裝)
*
* @param accountExpendDto
* @return 多個VO(針對頁面的特殊封裝格式)
*/
@PostMapping(value = "/queryList")
public Wrapper queryList(@RequestBody AccountExpendDto accountExpendDto) {
////PageHelper + Mybatis實現分頁(如要取消分頁返回全部數據,請刪除當前PageHelper設置,同時把查詢參數的pageNum和pageSize屬性置爲null)
//PageHelper分頁:將作用於下面緊跟的第一條sql查詢語句
PageHelper.startPage(accountExpendDto.getPageNum(), accountExpendDto.getPageSize());
//Mybatis分頁:AccountExpendDto由於繼承了BaseQuery而含有了pageNum和pageSize屬性,擁有這兩個屬性後在Mybatis分頁插件作用下將返回分頁信息(如果查詢操作之前不設置PageHelper分頁,則查詢結果包括全部List以及分頁所需的total,pageNum,pageSize,startRow,endRow等等信息,也就是說返回的數據是完整的,只不過另外包含了詳細的分頁信息,然後根據分頁信息就可以靈活取用對應的數據),若查詢操作之前設置了PageHelper則只返回對應區間段的數據(不返回全部數據請注意,另外也不用擔心分頁信息,會自動設置)
List<AccountExpendVo> list = accountExpendService.queryList(accountExpendDto);
PageInfo<AccountExpendVo> pageInfo = new PageInfo<>(list);
return WrapMapper.ok(pageInfo);
}
/**
* 插入.
*
* @param accountExpendDto
* @return
*/
@PostMapping(value = "/save")
public Wrapper save(@RequestBody AccountExpendDto accountExpendDto) {
int state = accountExpendService.save(accountExpendDto);
return WrapMapper.ok(state);
}
}