【平臺開發】— 9.列表分頁

列表一般都要有分頁功能，以前我還覺得要費一番周折去實現，後來一搜發現JPA自帶了一個分頁類，足夠知足常規需求了。

搞起！

1、後端

作的是項目管理列表的分頁，因此後端部分修改的就是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的時候，查詢出來的是第二頁的數據。

如今能夠查詢一下這個接口了，看下返回的數據發生了什麼變化。

如今接口返回中有了我想要的分頁字段數據了，那麼前端拿到這些字段數據，就能夠作處理了。

2、前端

前端部分，我所使用的框架也都有解決方案，因此改起來也很容易。

不過這裏用到的一個分頁組件，在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" />

其餘的字段跟對應的字段綁定在一塊兒就行了。

最後，看下效果。