邯郸资讯_宁波建站模板厂家_专业制作网页的公司_百度图片查找

一、前端

在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.recordsthis.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);}