Spring Boot項目數據分頁（服務端+客戶端）

1、服務端配置（以新聞表爲例）

一、修改dao繼承自crudRepository

package edu.ynmd.cms.dao;

import edu.ynmd.cms.model.News;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.CrudRepository;
import java.util.List;

public interface NewsDao extends CrudRepository<News,String> {
    @Query("select n from News n order by n.pbdate desc ")
    Page<News> getNewsForPage(Pageable pageable);

    @Query("select n from News n order by n.pbdate desc ")
    List<News> getAll();
}

二、來到service添加具體實現方法

• ManageService中添加

Page<News> getNewsList(int start, int pagesize);

• MangeServiceImpl中添加

// 新聞列表查詢多個操做
    @Override
    public List<News> getNewsList() {
    return newsDao.getAll();  //因爲newsdao繼承crudRepository，這裏修改成getAll();
    }

    // 新聞列表分頁
    @Override
    public Page<News> getNewsList(int start, int pagesize) {
        return newsDao.getNewsForPage(PageRequest.of(start,pagesize));
    }

三、製做參數vo,新建vo包，創建PageParmVo類

package edu.ynmd.cms.vo;

import java.io.Serializable;

public class PageParmVo implements Serializable {

    private int page; //當前頁
    private int pagesize;//頁面條目數量

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getPagesize() {
        return pagesize;
    }

    public void setPagesize(int pagesize) {
        this.pagesize = pagesize;
    }
}

四、在Action中進行調用VO View Object 視圖對象(PublicAction)

//新聞表分頁
    @PostMapping("getNewsListByPage")
    @ResponseBody
    public HashMap getNewsListByPage(@RequestBody PageParmVo pageParmVo) throws Exception{
        HashMap m=new HashMap();
        Page<News> newspage= null;
        try {
            newspage = manageService.getNewsList(pageParmVo.getPage(),pageParmVo.getPagesize());
            m.put("msg","ok");
            m.put("obj",newspage);
        } catch (Exception e) {
            e.printStackTrace();
            m.put("msg","error");
        }
        return m;
    }

五、使用postman進行測試

2、客戶端配置（以新聞表爲例）

一、集成paginator組件

• 爲防止發生錯誤，先安裝如下組件

npm install --save @angular/material
npm install --save @angular/cdk

• 在app.module.ts 中加入import {PaginatorModule} from 'primeng/paginator';
• 在app.module.ts 中的imports導入PaginatorModule

二、編輯service的news.service，加入：

private getNewsListByPageUrl=this.config.HOST+"/public/getNewsListByPage";
  getNewsListBypage(page:number,pagesize:number){
    let parm={
      "page":page,
      "pagesize":pagesize
    }
    return this.http.post(this.getNewsListByPageUrl,parm).toPromise();
  }

三、編輯新聞表組件的邏輯部分

• 分頁變量定義

page:number;
   pagesize:number;
   total:number;

• 初始化

ngOnInit() {
    //this.loadNewsList();
    this.page=0;
    this.pagesize=10;
    this.getNewsByPage();
  }

• 經過分頁獲取news數據

getNewsByPage(){
    this.newsService.getNewsListBypage(this.page,this.pagesize)
      .then((data:any)=>{
        if(data.msg=='ok'){

          this.nl=new Array();
          this.nl=data.obj.content;
          this.total=data.obj.totalElements;
        }
        else if(data.msg=='error'){
          this.toastservice.showError("服務器異常，請重試");
        }
        else {
          this.toastservice.showError("通信異常，請重試");
        }
      })
  }

• 捕獲分頁組件、點擊事件捕獲

onPageChange(e:any){
        console.dir(e);
        this.page=e.page;
        this.getNewsByPage();
  }

四、編輯新聞表組件的HTML部分

<p-paginator [rows]="pagesize" [totalRecords]="total" (onPageChange)="onPageChange($event)"></p-paginator>

五、效果展現

第一頁

第二頁