前端页面
数据准备
代码说明
代码
return {
pageSize: 5,//一页数据条数
currentPageNo: 1,//当前页码
editFormData: {
id: '',
userName: '',
gender: '',
phone: '',
regDate: '',
password: '',
status: 1
},
editFormRules: {
userName: [
{
required: true, message: "Please input the user name", trigger: "blur"
},
{ min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
],
gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }]
},
dialogTitle: "",
dialogUserEditVisible: false,//新增按钮
tableData: [],//不分页的查询时使用
pageDTO: {//分页查询结果实体
totalRecordCount: 0,//总条数
totalPageCount: 0,//总页数
list: []//当前页数据集
}
}
执行查询
代码说明
代码
//获取列表数据并进行分页
pageQuery(currentPageNo, pageSize) {
axios({
method: "post",
url: "http://127.0.0.1:9000/users/pageQuery",//http://localhost:9000/users/getUserList
data: {
userName: '',
phone: "",
status: 1,
pageNo: currentPageNo,//取第一页数据
pageSize: pageSize,//每页数据条数
sortBy: "reg_date",//按注册日期
isAsc: false//排列
}
}).then(result => {
console.log(result);
// this.tableData = result.data;
this.pageDTO = result.data;//改成分页查询结果
})
},
表格数据展示
代码说明
代码
<el-table :data="pageDTO.list"
highlight-current-row height="400" border stripe style="width: 100%" :fit="true">
<el-table-column prop="id" label="id" width="180"></el-table-column>
<el-table-column prop="userName" label="姓名" width="180"></el-table-column>
<el-table-column label="性别" prop="gender" width="140px">
<template slot-scope="props">
{{ props.row.gender != 'null' && props.row.gender == 1 ? '男' : '女' }}
</template>
</el-table-column>
<el-table-column prop="phone" label="手机号" width="180"></el-table-column>
<el-table-column prop="regDate" label="注册日期" width="180"></el-table-column>
<el-table-column prop="updateTime" label="最后操作时间" width="180"></el-table-column>
<el-table-column label="状态" width="140px" prop="status"></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
分页组件
代码说明
代码
<div class="block">
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="pageDTO.totalRecordCount"
:page-sizes=[5,10,15,20]
:current-page="currentPageNo"
:page-size ="pageSize"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
</div>
handleSizeChange: function (val) {
// alert("每页记录数变化" + val)
this.pageSize = val;// 动态改变
this.pageQuery(this.currentPageNo, this.pageSize);
},
handleCurrentChange: function (val) {
// alert("页码发生变化" + val)
this.currentPageNo = val;//动态改变
this.pageQuery(this.currentPageNo, this.pageSize);
},
执行查询及加载数据的其它时间
界面加载 、新增完成、修改完成、删除 完成需重新加载数据。
mounted() {
this.pageQuery(this.currentPageNo, this.pageSize);
},
handleDelete(index, row) {
// this.tableData.splice(index, 1);
axios({
method: "delete",
url: "http://127.0.0.1:9000/users" + "/" + row.id
}).then(result => {
console.log(result);
});
this.$message.success('删除成功');
//刷新列表数据
this.pageQuery(this.currentPageNo, this.pageSize);
},
新增及修改完成是加:
this.pageQuery(this.currentPageNo, this.pageSize);
后端
统一分页结果实体 PageDTO
/**
* 通用分页查询结果实体
*/
@Data
@ToString(callSuper = true)
@Schema(description = "分页查询结果")
public class PageDTO <T> {
@Schema(description = "总条数")
private long totalRecordCount;
@Schema(description = "总页数")
private long totalPageCount;
@Schema(description = "当前页数据集合")
private List<T> list;
}
分页查询API
@Operation(summary = "分页查询用户接口")
@PostMapping("/pageQuery")
public PageDTO<UserVO> queryUsersPage( @RequestBody UserQuery query){
return userService.queryUsersPage(query);
}
查询参数实体 UserQuery
@Data
@ToString(callSuper = true)
@Schema(description = "用户查询条件实体")
public class UserQuery extends PageQuery {
@Schema(description = "姓名关键字",example = "o")
private String userName;
@Schema(description = "手机号关键字")
private String phone;
@Schema(description = "用户状态:1-启用,0-停用", example = "1")
private String status;
}
查询方法
@Override
public PageDTO<UserVO> queryUsersPage(UserQuery query) {
String userName = query.getUserName();
String status = query.getStatus();
//1、构建查询条件
//1.1 分页条件
Page<User> page = Page.of(query.getPageNo(), query.getPageSize());
//1.2 排序条件
if(StrUtil.isNotBlank(query.getSortBy())){
//不为空
page.addOrder(new OrderItem(query.getSortBy(), query.getIsAsc()));
}else{
//为空,默认按更新时间排序
page.addOrder(new OrderItem("update_time",false));
}
//2、分页查询
Page<User> pageQueryResult = lambdaQuery()
.like(userName!=null, User::getUserName, userName)
.like(query.getPhone()!=null, User::getPhone,query.getPhone())
.eq(status!=null, User::getStatus, status)
.page(page);
//3、封装 VO 结果
PageDTO<UserVO> pageDTO = new PageDTO<>();
//3.1 总条数
pageDTO.setTotalRecordCount(pageQueryResult.getTotal());
//3.2 总页数
pageDTO.setTotalPageCount(pageQueryResult.getPages());
//3.4当前页数据
List<User> records = pageQueryResult.getRecords();
if(CollUtil.isEmpty(records)){
pageDTO.setList(Collections.emptyList());
return pageDTO;
}
//3.5 拷贝user 的 VO
List<UserVO> vos = BeanUtil.copyToList(records, UserVO.class);
pageDTO.setList(vos);
//4、返回
return pageDTO;
}