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为总页数；

效果图：

巴特西

vue+ springboot 分页（两种方式：sql分页 & PageHelper 分页）

最新文章

热门文章