java项目
导包
<!--springboot整合pagehelper-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.3.1</version>
</dependency>
前端
vue项目
<template>
<div>
<el-row>
<el-col :span="24">
<!-- 数据部分(el-table) -->
<el-table :data="tableDate" border style="width: 100%">
<el-table-column type="index" label="序号" width="80"> </el-table-column>
<el-table-column prop="time" label="时间" width="180"> </el-table-column>
<el-table-column prop="ip" label="IP" width="180"> </el-table-column>
<el-table-column prop="location" label="地区" width="180"> </el-table-column>
<el-table-column prop="browser" label="浏览器" width="180"> </el-table-column>
</el-table>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<!-- 分页部分 -->
<el-pagination
background
layout="total,sizes,prev, pager, next"
:total="total"
:page-sizes="[ 5, 10, 15]"
:page-size="pageSize"
:current-page="pageNum"
@next-click="nextPage"
@prev-click="prevPage"
@size-change="sizeChange"
@current-change="currentChange">
</el-pagination>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
total: 10, //总条数
pageSize: 10, //每页多少条
pageNum: 1, //当前页,
tableDate: [],
};
},
methods: {
//下一页
nextPage(val) {
this.pageNum = val;
this.queryAllPcLoginLog();
},
//上一页
prevPage(val) {
this.pageNum = val;
this.queryAllPcLoginLog();
},
//当每页条数改变时触发
sizeChange(val) {
this.pageNum = 1;
this.pageSize = val;
this.queryAllPcLoginLog();
},
//点击第几页时触发
currentChange(val) {
this.pageNum = val;
this.queryAllPcLoginLog();
},
queryAllPcLoginLog() {
let params = {};
params.pageNum = this.pageNum;
params.pageSize = this.pageSize;
this.$axios.post("api/pcLoginLog/queryAllPcLoginLog", params).then((res) => {
let pageDate = res.data.data;
this.tableDate = pageDate.list;
this.pageNum = pageDate.pageNum;
this.pageSize = pageDate.pageSize;
this.total = pageDate.total;
});
},
},
created() {
this.queryAllPcLoginLog();
},
};
</script>
<style></style>
后端
实体类
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class PcLoginLog {
//对应数据库
private Integer id;
private String time;
private String ip;
private String location;
private String browser;
}
实体类Vo
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class ParamData<T> {
// 统一接收类
private Integer pageNum;
private Integer pageSize;
private T data;
}
mapper层 方法
ResponseDate<?> queryAllPcLoginLog(ParamData<PcLoginLog> paramData);
Service层 实现
@Override
public ResponseDate<?> queryAllPcLoginLog(ParamData<PcLoginLog> paramData) {
PageHelper.startPage(paramData.getPageNum(),paramData.getPageSize());
List<PcLoginLog> pcLoginLogs = pcLoginLogMapper.queryAllPcLoginLog();
PageInfo pageInfo = new PageInfo(pcLoginLogs);
return new ResponseDate<>().ok(pageInfo);
}
上面的顺序不能乱
- 第一步:PageHelper.startPage…
- 第二步:调用查询方法
- 第三步:PageInfo pageInfo…
Controller层
@PostMapping("/queryAllPcLoginLog")
public ResponseDate<?> queryAllPcLoginLog(@RequestBody ParamData<PcLoginLog> paramData) {
return pcLoginLogService.queryAllPcLoginLog(paramData);
}