分页查询前后端代码

一抓掉一大把2024-10-08 21:35

一、前端

在table表格下，写样式

复制代码

 <div style="margin: 10px 0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

默认值，第一次查询没有页码和页面大小所以给个默认值，因为我有帐号和姓名的模糊查询所以，后端会根据这四个值来返回前端所需要的数据

复制代码

pageNum:1,
        pageSize:5,
        username: "",
        name: "" ,
        total: 0,

页面第一次自动渲染

复制代码

 created() {
        this.load()
  },

每次改变页码或者页号，发送一次请求。

复制代码

handleCurrentChange(pageNum){
        
        this.load(pageNum)
    },

发送请求的代码

复制代码

load(pageNum){
       if(pageNum){ this.pageNum =pageNum}

        this.$request.get('/user/selectByPage',{
            params:{
                pageNum:this.pageNum,
                pageSize: this.pageSize,
                username: this.username,
                name: this.name
            }
        }).then(res =>{
            this.tableData = res.data.records
            this.total =res.data.total
        
        })
    },

二、后端

复制代码

/**
     * 分页查询
     * @param pageNum
     * @param pageSize
     * @param username
     * @param name
     * @return
     */
    @GetMapping("/selectByPage")
    public Result selectByPage( @RequestParam Integer pageNum,
                               @RequestParam Integer pageSize,
                                @RequestParam String username,
                                @RequestParam String name) {
        QueryWrapper<User> queryWrapper = new QueryWrapper<User>().orderByDesc("id");
        queryWrapper.like(StrUtil.isNotBlank(username), "username", username);
        queryWrapper.like(StrUtil.isNotBlank(name), "name", name);
        Page<User> page = userService.page(new Page<>(pageNum, pageSize), queryWrapper);
        return Result.success(page);
    }