【平臺開發】— 9.列表分頁
列表通常都要有分頁功能,之前我還以為要費一番周折去實現,後來一搜發現JPA自帶了一個分頁類,足夠滿足常規需求了。
搞起!
一、後端
做的是專案管理列表的分頁,所以後端部分修改的就是ProjectController
下的 /list
介面。
註釋部分是老程式碼,這個介面不需要任何傳參,直接會返回所有的列表資料。
而新介面則是加入了2個引數,分別是number第幾頁
和size每頁最大數量
。
@RestController @RequestMapping(value = "/project") public class ProjectController { @Autowired ProjectService projectService; // @GetMapping("/list") // public Result projectList() throws Exception { // List<Project> projectList = projectService.getProjectList(); // return Result.success(projectList); // } @GetMapping("/list") public Result projectList(int number, int size) throws Exception { Page projectList = projectService.getProjectList(number, size); return Result.success(projectList); } }
不過接口裡實際幹活的還是projectService.getProjectList(number, size)
,所有要先去service
層修改 。
註釋部分是老程式碼,不再贅述。
package com.mock.platform.service; import com.mock.platform.dao.ProjectDAO; import com.mock.platform.pojo.Project; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Pageable; import org.springframework.data.domain.Sort; import org.springframework.stereotype.Service; @Service public class ProjectService { @Autowired ProjectDAO projectDAO; // public List<Project> getProjectList() { // Sort sort = Sort.by(Sort.Direction.DESC, "id"); // return projectDAO.findAll(sort); // } public Page<Project> getProjectList(int number, int size) { Sort sort = Sort.by(Sort.Direction.DESC, "id"); Pageable pageable = PageRequest.of(number - 1, size, sort); return projectDAO.findAll(pageable); }
新程式碼裡,就是使用了org.springframework.data.domain.Page
這個分頁類了。
注意這裡要有一步減去1
的處理,不然你傳1
的時候,查詢出來的是第二頁的資料。
現在可以查詢一下這個介面了,看下返回的資料發生了什麼變化。
現在介面返回中有了我想要的分頁欄位資料了,那麼前端拿到這些欄位資料,就可以做處理了。
二、前端
前端部分,我所使用的框架也都有解決方案,所以改起來也很容易。
不過這裡用到的一個分頁元件,在vue-admin-template
裡沒有,我是在vue-element-admin
找到並拷貝過來使用的。
此外,還用到utils
下的scroll-to.js
。
這個前端框架的作者將分頁抽離成一個元件,可供複用,所以在專案管理列表的vue檔案裡要匯入這個元件。
對應的,專案管理的vue元件裡,也要增加分頁所使用的相關欄位。當拿到後端介面的返回後,將後端的返回值賦給pageInfo
裡的各位。
剩下的就是改methods
裡的 projectGet()
方法了,注意後端介面返回的list
資料已經放到了content
裡,所以這裡也要對應修改。
methods: {
projectGet() { //呼叫後端介面,獲取專案列表
this.listLoading = true
getProjectList(this.pageInfo.number, this.pageInfo.size).then(response => {
this.list = response.data.content //後端的list已經放到了content裡,所以這裡也要改
this.pageInfo.size = response.data.size
this.pageInfo.number = response.data.number + 1
this.pageInfo.totalElements = response.data.totalElements
this.pageInfo.totalPages = response.data.totalPages
this.pageInfo.numberOfElements = response.data.numberOfElements
this.listLoading = false
})
},
最後,修改下頁面裡的欄位。
在列表內容下增加分頁的程式碼,v-show
判斷是否展示,這裡當總資料大於0
的時候就會顯示分頁欄。
<pagination v-show="pageInfo.totalElements>0" :total="pageInfo.totalElements" :page.sync="pageInfo.number"
:limit.sync="pageInfo.size" @pagination="projectGet" />
其他的欄位跟對應的欄位繫結在一起就好了。
最後,看下效果。