SpringBoot+Vue之分頁操作

springboot--表格操作02

不建議使用mybatis自帶的分頁查詢，或pagehelper插件等，使用MySql查詢語句更方便快捷。

以上一篇表格操作為基礎，加入分頁操作，完善核心代碼。上篇詳情CRUD與文件導入導出。

流程

后端開發

1、定義分頁查詢統一返回的實體類，返回數據為列表，建議使用泛型。

(RespPageEntity.java)

1.  
   @Data
2.  
   public class RespPageEntity {
3.  
   private List<?> data;
4.  
   private Long total;
5.  
   }
6.  
   復制代碼

2、定義控制層方法，為避免空值，請求參數中給與默認值。

（UserController.java）

1.  
   /**
2.  
   * 根據頁碼和大小分頁查詢
3.  
   * @param page 當前頁，默認為1
4.  
   * @param size 當前每頁顯示行數，默認為5
5.  
   * @return 頁信息的實體
6.  
   */
7.  
   @GetMapping("/page/")
8.  
   public RespPageEntity getAllUserByPage(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "5") Integer size) {
9.  
   return userService.getAllUserByPage(page, size);
10.  
    }
11.  
    復制代碼

3、業務層方法，分為兩步，1獲取數據總量，2獲取查詢頁信息，因此要加上事務注解@Transactional。

(UserService.java)

1.  
   @Transactional
2.  
   public RespPageEntity getAllUserByPage(Integer page, Integer size) {
3.  
   RespPageEntity pageEntity = new RespPageEntity();
4.  
   // 默認從0開始
5.  
   if (page != null && size != null) {
6.  
   page = (page- 1)*size;
7.  
   }
8.  
   // 獲取當前也用戶信息
9.  
   List<User> users = userMapper.getAllUserByPage(page, size);
10.  
    pageEntity.setData(users);
11.  
    // 獲取當前用戶總量
12.  
    Long total = userMapper.getTotal();
13.  
    pageEntity.setTotal(total);
14.  
    return pageEntity;
15.  
    }
16.  
    復制代碼

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

(UserMapper.xml)

1.  
   <select id="getAllUserByPage" resultMap="BaseResultMap">
2.  
   select
3.  
   *
4.  
   FROM
5.  
   userinfo
6.  
   limit #{page}, #{size}
7.  
   </select>
8.  
   <select id="getTotal" resultType="java.lang.Long">
9.  
   select count(*) from userinfo;
10.  
    </select>
11.  
    復制代碼

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）

1.  
   <div style="display: flex;justify-content: center;margin-top: 10px">
2.  
   <el-pagination
3.  
   background
4.  
   @ size-change="sizeChange"
5.  
   @ current-change="currentChange"
6.  
   :current-page="currentPage"
7.  
   :page-size="pageSize"
8.  
   layout="sizes, prev, pager, next, jumper, ->, total, slot"
9.  
   :total="total">
10.  
    </el-pagination>
11.  
    </div>
12.  
    復制代碼

2、初始值

1.  
   pageSize:5,
2.  
   currentPage:1,
3.  
   total:0,
4.  
   復制代碼

3、每頁顯示的數量和當前頁碼

1.  
   sizeChange(size) {
2.  
   this.pageSize=size;
3.  
   this.initUser();
4.  
   },
5.  
   currentChange(page) {
6.  
   this.currentPage=page;
7.  
   this.initUser();
8.  
   },
9.  
   復制代碼

4、修改初始化頁面方法

1.  
   initUser() {
2.  
   this.getRequest("/user/page/?page="+this.currentPage+"&size="+this.pageSize).then(resp => {
3.  
   if (resp) {
4.  
   this.userinfo=resp.data;
5.  
   this.total=resp.total;
6.  
   }
7.  
   })
8.  
   }
9.  
   復制代碼

運行后效果圖

 

 

轉載於:https://juejin.im/post/5cc5a1e5518825253f4a5a7d