SpringBoot+Vue之分页操作

springboot--表格操作02

不建议使用mybatis自带的分页查询,或pagehelper插件等,使用MySql查询语句更方便快捷。

以上一篇表格操作为基础,加入分页操作,完善核心代码。上篇详情CRUD与文件导入导出。

流程

后端开发

1、定义分页查询统一返回的实体类,返回数据为列表,建议使用泛型。

(RespPageEntity.java)


@Data
public class RespPageEntity {
    private List data;
    private Long total;
}

2、定义控制层方法,为避免空值,请求参数中给与默认值。

(UserController.java)

/**
 * 根据页码和大小分页查询
 * @param page 当前页,默认为1
 * @param size 当前每页显示行数,默认为5
 * @return 页信息的实体
 */
@GetMapping("/page/")
public RespPageEntity getAllUserByPage(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "5") Integer size) {
    return userService.getAllUserByPage(page, size);
}
复制代码

3、业务层方法,分为两步,1获取数据总量,2获取查询页信息,因此要加上事务注解@Transactional。

(UserService.java)

@Transactional
public RespPageEntity getAllUserByPage(Integer page, Integer size) {
    RespPageEntity pageEntity = new RespPageEntity();
    // 默认从0开始
    if (page != null && size != null) {
        page = (page-1)*size;
    }
    // 获取当前也用户信息
    List users =  userMapper.getAllUserByPage(page, size);
    pageEntity.setData(users);
    // 获取当前用户总量
    Long total = userMapper.getTotal();
    pageEntity.setTotal(total);
    return pageEntity;
}
复制代码

4、映射文件中的sql语句。

(UserMapper.xml)



复制代码

5、postman测试,如地址http://127.0.0.1:8081/user/page/返回默认值或http://127.0.0.1:8081/user/page/?page=1&size=5

前端完善

1、template临时组件中加入分页的div(User.vue)

复制代码

 2、初始值


pageSize:5,
currentPage:1,
total:0,

 3、每页显示的数量和当前页码

sizeChange(size) {
  this.pageSize=size;
  this.initUser();
},
currentChange(page) {
  this.currentPage=page;
  this.initUser();
},
复制代码

4、修改初始化页面方法

initUser() {
  this.getRequest("/user/page/?page="+this.currentPage+"&size="+this.pageSize).then(resp => {
    if (resp) {
      this.userinfo=resp.data;
      this.total=resp.total;
    }
  })
}
复制代码

运行后效果图

SpringBoot+Vue之分页操作_第1张图片

 

你可能感兴趣的:(springboot,Vue,vue.js,spring,boot,java)