Vue分页查询

前端页面

数据准备

代码说明

代码

   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;
    }

前端传入查询参数实例