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<User> users =  userMapper.getAllUserByPage(page, size);
    pageEntity.setData(users);
    // 獲取當前使用者總量
    Long total = userMapper.getTotal();
    pageEntity.setTotal(total);
    return pageEntity;
}
複製程式碼

4、對映檔案中的sql語句。

(UserMapper.xml)

<select id="getAllUserByPage" resultMap="BaseResultMap">
  select
    *
  FROM
    userinfo
  limit #{page}, #{size}
</select>
<select id="getTotal" resultType="java.lang.Long">
  select count(*) from userinfo;
</select>
複製程式碼

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）

<div style="display: flex;justify-content: center;margin-top: 10px">
  <el-pagination
    background
    @size-change="sizeChange"
    @current-change="currentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    layout="sizes, prev, pager, next, jumper, ->, total, slot"
    :total="total">
  </el-pagination>
</div>
複製程式碼

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;
    }
  })
}
複製程式碼

執行後效果圖