Spring Boot项目数据分页（服务端+客户端）

一、服务端配置（以新闻表为例）

1、修改dao继承自crudRepository

1package edu.ynmd.cms.dao;
2
3import edu.ynmd.cms.model.News;
4import org.springframework.data.domain.Page;
5import org.springframework.data.domain.Pageable;
6import org.springframework.data.jpa.repository.JpaRepository;
7import org.springframework.data.jpa.repository.Query;
8import org.springframework.data.repository.CrudRepository;
9import java.util.List;
10
11public interface NewsDao extends CrudRepository<News,String> {
12    @Query("select n from News n order by n.pbdate desc ")
13    Page<News> getNewsForPage(Pageable pageable);
14
15    @Query("select n from News n order by n.pbdate desc ")
16    List<News> getAll();
17}

2、来到service添加具体实现方法

• ManageService中添加

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

• MangeServiceImpl中添加

  1// 新闻列表查询多个操作
  2@Override
  3public List<News> getNewsList() {
  4return newsDao.getAll();  //由于newsdao继承crudRepository，这里修改为getAll();
  5}
  6
  7// 新闻列表分页
  8@Override
  9public Page<News> getNewsList(int start, int pagesize) {
  10    return newsDao.getNewsForPage(PageRequest.of(start,pagesize));
  11}
  

3、制作参数vo,新建vo包，建立PageParmVo类

1package edu.ynmd.cms.vo;
2
3import java.io.Serializable;
4
5public class PageParmVo implements Serializable {
6
7    private int page; //当前页
8    private int pagesize;//页面条目数量
9
10    public int getPage() {
11        return page;
12    }
13
14    public void setPage(int page) {
15        this.page = page;
16    }
17
18    public int getPagesize() {
19        return pagesize;
20    }
21
22    public void setPagesize(int pagesize) {
23        this.pagesize = pagesize;
24    }
25}

4、在Action中进行调用VO View Object 视图对象(PublicAction)

1//新闻表分页
2    @PostMapping("getNewsListByPage")
3    @ResponseBody
4    public HashMap getNewsListByPage(@RequestBody PageParmVo pageParmVo) throws Exception{
5        HashMap m=new HashMap();
6        Page<News> newspage= null;
7        try {
8            newspage = manageService.getNewsList(pageParmVo.getPage(),pageParmVo.getPagesize());
9            m.put("msg","ok");
10            m.put("obj",newspage);
11        } catch (Exception e) {
12            e.printStackTrace();
13            m.put("msg","error");
14        }
15        return m;
16    }

5、使用postman进行测试

二、客户端配置（以新闻表为例）

1、集成paginator组件

• 为防止发生错误，先安装以下组件

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

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

• 在app.module.ts 中的imports导入PaginatorModule

2、编辑service的news.service，加入：

1 private getNewsListByPageUrl=this.config.HOST+"/public/getNewsListByPage";
2  getNewsListBypage(page:number,pagesize:number){
3    let parm={
4      "page":page,
5      "pagesize":pagesize
6    }
7    return this.http.post(this.getNewsListByPageUrl,parm).toPromise();
8  }

3、编辑新闻表组件的逻辑部分

• 分页变量定义

  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'){

  1      this.nl=new Array();
  2      this.nl=data.obj.content;
  3      this.total=data.obj.totalElements;
  4    }
  5    else if(data.msg=='error'){
  6      this.toastservice.showError("服务器异常，请重试");
  7    }
  8    else {
  9      this.toastservice.showError("通讯异常，请重试");
  10    }
  11  })
  

  }

• 捕获分页组件、点击事件捕获

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

4、编辑新闻表组件的HTML部分

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

5、效果展示

第一页

第二页