一、服务端配置(以新闻表为例)
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();
}
2、来到service添加具体实现方法
ManageService中添加
Page
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)); }
3、制作参数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;
}
}
4、在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;
}
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,加入:
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();
}
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'){ 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(); }
4、编辑新闻表组件的HTML部分
<p-paginator [rows]="pagesize" [totalRecords]="total" (onPageChange)="onPageChange($event)"></p-paginator>