Spring Boot项目数据分页(服务端+客户端)

Stella981
• 阅读 468

一、服务端配置(以新闻表为例)

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进行测试

Spring Boot项目数据分页(服务端+客户端)

二、客户端配置(以新闻表为例)

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>

5、效果展示

第一页

Spring Boot项目数据分页(服务端+客户端)

第二页

Spring Boot项目数据分页(服务端+客户端)

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Easter79 Easter79
3年前
SpringBoot自定义序列化的使用方式
场景及需求:项目接入了SpringBoot开发,现在需求是服务端接口返回的字段如果为空,那么自动转为空字符串。例如:\    {        "id":1,        "name":null    },    {        "id":2,        "name":"x
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这