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为总页数；
效果图：
