vue+ springboot 分頁（兩種方式：sql分頁 & PageHelper 分頁）

方法一：sql分頁

思路：使用數據庫進行分頁

 

前端使用element-ui的分頁組件，往后台傳第幾頁的起始行offest 以及每頁多少行pageSize，后台根據起始行數和每頁的行數可以算出該頁的最后一行，隨后對數據庫中的數據先進行排序，算出總共多少行，然后使用 limit 關鍵字進行限定查詢所需要的數據，另外還要把總行數返回，不然前端頁面沒法顯示總條數；（注：下方方法中的file_type為業務參數，請忽略）

 

vue：

 

<template>:

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10,20,30,40]"
  :page-size="pageSize"
   layout="total, sizes, prev, pager, next, jumper"
   :total="totalSize">
</el-pagination>

 

data:

 

//總數據條數
totalSize: 0,
//當前頁碼
currentPage: 1,
//每頁條數
pageSize: 10,
//起始行數
offset: 0

 

methods:

 

//改變每頁顯示的數據條數
handleSizeChange(val) {
  //設置每頁顯示的條數
  this.pageSize = val;
  if(!this.currentType) {
    this.$message({
    showClose: true,
    message: '查詢失敗！',
    type: 'error'
    });
    return;
  }
  this.acquireInfo(this.currentType);
},
 
 
//改變頁碼
handleCurrentChange(val) {
  //offset為分頁后的起始頁碼
  this.offset = (val - 1) * this.pageSize;
  this.currentPage = val;
  if(!this.currentType) {
    this.$message({
    showClose: true,
    message: '查詢失敗！',
    type: 'error'
    });
    return;
  }
  this.acquireInfo(this.currentType);
 
},
 
//往后台傳offset，和每頁多少行，返回的是當前頁的pageSize行數據
let params = {
"offset": this.offset,
"pageSize": this.pageSize,
"file_type": type  //業務所需，ignore
};
resourcesApi.queryFileList(params).then(res =>{
  if(res.status === 200 && res.data) {
    this.fileInfoList = res.data;
 
    .....xxx.....
  }
}).catch(error => {
..............
});
});
},

 

api:

queryFileList(param) {
  return httpSender({
    url: '/resources/documentList/getFileListByFileType',
    method: 'get',
    params:param
  });
}

 

 

spring boot:

 

controller:

 

/**
* 根據文件類型查詢文件
* @param offset
* @param pageSize
* @param file_type
* @return
*/
@ApiOperation(value="/getFileListByFileType",notes = "根據文件類型獲取文件列表")
@GetMapping(value = "/getFileListByFileType")
public List<Map> queryFileListByFileType(@RequestParam("offset") @ApiParam(value = "當前頁顯示的起始數據") int offset,
                                                                 @RequestParam("pageSize") @ApiParam(value = "每頁顯示的條數") int pageSize,
                                                                 @RequestParam("file_type")  @ApiParam(value = "文件類型") String file_type) {
  try{
    int startRow = offset;
    return documentService.queryFileListByFileType(startRow,pageSize, file_type);
  }catch(Exception e) {
    throw e;                     
}
}

 

 

iservice:

 
/**
* 根據文件類型獲取分頁后的文件
* @param offest
* @param pageSize
* @param file_type
* @return
*/
List<Map> queryFileListByFileType(int startRow, int pageSize, String file_type);

 

 

impl:

 

/**
* 根據文件類型查詢文件
*
* @param startRow
* @param pageSize
* @param file_type
* @return
*/
@Override
public List<Map> queryFileListByFileType(int startRow, int pageSize, String file_type) {
    if (file_type == "" || file_type == null) {
    return null;
}
List<Map> list = resourceStorageMapper.queryFileListByFileType(startRow,pageSize, file_type);
//獲取該文件類型的總條數
int num = resourceStorageMapper.getCountByFileType(file_type);
for (Map i : list) {
    i.put("num", num);
}
 return list;
}

 

 

mapper:

 

/**
* 根據文件類型、分頁條件查詢文件列表
* @param startRow
* @param endRow
* @param file_type
* @return
*/
@Select("SELECT a.file_name,DATE_FORMAT(a.update_datetime,'%Y-%m-%d %T') " +
"as update_datetime,a.file_size,a.file_path FROM (SELECT * FROM " +
"tab_resources_storage WHERE file_type = #{file_type}) a " +
"Left JOIN tab_resources_filetype b ON a.file_type = b.code " +
"ORDER BY a.update_datetime DESC LIMIT #{startRow}, #{pageSize};")
List<Map> queryFileListByFileType(@Param("startRow") int startRow,@Param("pageSize") intpageSize,@Param("file_type") String file_type);
 
/**
* 獲取該文件類型的總條數
* @param file_type
* @return
*/
@Select("SELECT COUNT(*) FROM tab_resources_storage WHERE file_type = #{file_type}")
int getCountByFileType(@Param("file_type") String file_type);

 

方法二：PageHelper 分頁

 

思路：使用PageInfo 方法，一步到位，簡單粗暴

 

前端使用element-ui的分頁組件，往后台傳當前頁碼currentPage以及每頁顯示的行數pageSize，后台使用 PageHelper 分頁插件實現分頁（注：下放代碼中的queryCondition為業務數據，請忽略）

 

vue：

 

<template>:

 

<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10,20,30,40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalSize">
</el-pagination>

 

 

data:

 

//總數據條數
totalSize: 0,
//當前頁碼
currentPage: 1,
//每頁條數
pageSize: 10,

 

 

methods:

 

let params = {
"currentPage": this.currentPage,
"pageSize": this.pageSize,
"queryCondition": this.dictfilterstr
};
//發起請求
dictApi.getDict(params).then(res =>{
  let data = res.data;
 
  if(data.total) {
    this.totalSize = data.total;
  }
    this.tableData = tData;
  }
}).catch(error =>{})

 

 

api:

 

getDict(param) {
  return httpSender({
    url: '/dict/list',
    method: 'get',
    params: param
  });
},

 

spring boot:

 

controller:

 

@ApiOperation(value = "獲取項信息", notes = "獲取項信息")
@GetMapping(value = "/list")
@ResponseBody
public PageInfo dictList(@RequestParam("currentPage") @ApiParam(value = "當前頁碼") int currentPage,
                         @RequestParam("pageSize") @ApiParam(value = "每頁顯示的條數") int pageSize,
                         @RequestParam(value = "queryCondition", required = false) @ApiParam(value = "查詢條件") String queryCondition){
 
if(StringUtils.isBlank(queryCondition)) {
  queryCondition = "";
}
PageInfo page = null;
try{
  page = dictService.list(currentPage, pageSize, queryCondition);
}catch (Exception e) {
  logger.error(e.getMessage(), e);
  throw new DictException(GET_DATA_INFO_FAILED);
}
  return page;
}

 

 

iservice:

 

**
* 獲取項信息並分頁
* @param currentPage
* @param
* @param queryCondition
* @return
*/
PageInfo list(int currentPage, int pageSize, String queryCondition);

 

impl:

 

/**
* 查詢所有字典項信息
* @return
*/
@Override
public PageInfo list(int currentPage, int pageSize, String queryCondition) {
PageInfo page = PageHelper.startPage(currentPage, pageSize).doSelectPageInfo(()-> dictMapper.selectDict(queryCondition));
return page;
} 

 

mapper:

 

/**
* 根據查詢條件查詢列表
* 
* @param queryCondition
* @return
*/
 
@Select("<script>" +
"SELECT * FROM vsai_dict <if test='queryCondition != null and queryCondition != \"\"'> " +
"WHERE dict_code LIKE concat(concat(\'%\',#{queryCondition}),\'%\')</if><if test='queryCondition == null or queryCondition == \"\"'>" +
"WHERE pid = '0'</if> ORDER BY update_time DESC " +
"</script>")
List<DictEntity> selectDict(@Param("queryCondition") String queryCondition);

 

 

page的返回值：

其中list是查詢的參數列表；total為總條數；pages為總頁數；

 

效果圖：