(Angular)前后端完成分页处理

基本思路就是后台获取所有数据

通过从前台获取的每页数量和当前页码

再通过分页插件得到分页所有属性以及当前页的数据再返回给前台

首先我们在后端创建几个实体类，和一个工具类Utils

分页属性的请求：

PageRequest:

/**
 * 分页请求
 */
public class PageRequest {
    /**
     * 当前页码
     */
    private int pageNum;
    /**
     * 每页数量
     */
    private int pageSize;

    public int getPageNum() {
        return pageNum;
    }
    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }
    public int getPageSize() {
        return pageSize;
    }
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
}

返回的分页结果集：

PageResult：

/**
 * 分页返回结果
 */
public class PageResult {
    /**
     * 当前页码
     */
    private int pageNum;
    /**
     * 每页数量
     */
    private int pageSize;
    /**
     * 记录总数
     */
    private long totalSize;
    /**
     * 页码总数
     */
    private int totalPages;
    /**
     * 数据模型
     */
    private List<?> content;
    public int getPageNum() {
        return pageNum;
    }
    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }
    public int getPageSize() {
        return pageSize;
    }
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
    public long getTotalSize() {
        return totalSize;
    }
    public void setTotalSize(long totalSize) {
        this.totalSize = totalSize;
    }
    public int getTotalPages() {
        return totalPages;
    }
    public void setTotalPages(int totalPages) {
        this.totalPages = totalPages;
    }
    public List<?> getContent() {
        return content;
    }
    public void setContent(List<?> content) {
        this.content = content;
    }
}

工具类：

PageUtils：

public class PageUtils {
    /**
     * 将分页信息封装到统一的接口
     * @param pageRequest
     * @param pageInfo
     * @return
     **/
    public static PageResult getPageResult(PageRequest pageRequest, PageInfo<?> pageInfo) {
        PageResult pageResult = new PageResult();
        pageResult.setPageNum(pageInfo.getPageNum());
        pageResult.setPageSize(pageInfo.getPageSize());
        pageResult.setTotalSize(pageInfo.getTotal());
        pageResult.setTotalPages(pageInfo.getPages());
        pageResult.setContent(pageInfo.getList());
        return pageResult;
    }
}

我的UserController：

// 参数：pageNum: 1, pageSize: 5
@CrossOrigin(origins = {"http://localhost:4200", "null"})
@RequestMapping(value = "/findUserLogPage", method = RequestMethod.POST)
@ResponseBody
public Object findPage(@RequestBody PageRequest pageQuery) {
    return userService.findPage(pageQuery);
}

UserService:

PageResult findPage(PageRequest pageRequest);

UserServiceImpl（利用分页插件帮助分页）:

@Override
public PageResult findPage(PageRequest pageRequest) {
   return PageUtils.getPageResult(pageRequest, getPageInfo(pageRequest));
}

/**
 * 调用分页插件完成分页
 *
 */
private PageInfo<AopLog> getPageInfo(PageRequest pageRequest) {
   int pageNum = pageRequest.getPageNum();
   int pageSize = pageRequest.getPageSize();
   // PageHelper要写在需要分页的sql查询的上面，不然不知道给哪条sql做分页
   PageHelper.startPage(pageNum, pageSize);
   List<AopLog> sysMenus = logDao.selectPage();
   return new PageInfo<AopLog>(sysMenus);
}

Dao层：

List<AopLog> selectPage();

XML：

<select id="selectPage" resultMap="BaseResultMap">
      SELECT
u.user_id,
u.user_name,
u.description,
l.register_datetime
FROM
t_log l
INNER JOIN t_user u ON u.user_id = l.user_id
</select>

接下来是前台获取这个数据， 我前台框架是Angular

首先我们先用 postman 测试一下返回值都有哪些

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G4f1Bjuv-1594703786131)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200714121424021.png)]

了解到返回值都是什么样子之后， 我们就可以在前台发送左半边这种请求， 然后获取的时候赋值给右半边这种返回值类型， 具体看代码

export class LogComponent implements OnInit {
  totalItems: number;
  currentPage = 1;
  userId = ''; // 用户ID
  userName = ''; // 用户名
  description = ''; // 用户描述
  datetime = ''; // 登陆时间
  csvSeparator = ',';
  logs: Logs[];
  pages: Page;
  page: number;
  totalSize: number;
  totalPages: number;
  pageSize: number;
  constructor(private getAllLogsService: GetAllLogsService, private router: Router) { }

  ngOnInit(): void {
    this.page = 1;
    // const params = {
    //   userId: this.userId,
    //   userName: this.userName,
    //   description: this.description,
    //   datetime: this.datetime
    // };
    // this.getAllLogsService.getAllLogs(params).subscribe((logs: Logs[]) => {
    //   this.logs = logs;
    // });
    const userLogPage = {
      pageNum: this.page,
      pageSize: 5
    };
    this.getAllLogsService.getUserLogPage(userLogPage).subscribe((pages: Page) => {
      this.pages = pages;
      this.logs = pages.content;
      this.totalPages = pages.totalPages;
      this.totalSize = pages.totalSize;
      this.pageSize = pages.pageSize;
      this.totalItems = Math.ceil(pages.totalSize / 5) * 10;
    });
  }

如上（不是完整的， 后面补充）， 这方法被我先放在ngOnInit里面， 就是为了刚开始加载页面的时候他能获取这些关于分页的数据

， 然后我们看一看前台分页组件

<div class="page">
      <div class="row">
        <div class="col-xs-12 col-12">
          <pagination [(totalItems)]="totalItems" [(ngModel)]="currentPage" (pageChanged)="pageChanged($event)">
          </pagination>
        </div>
      </div>
      <pre class="card card-block card-header mb-3">
        当前页面页数位: {{page}}
        总页数为: {{totalPages}}
        所有数据数为: {{totalSize}}
        单个页面数据数: {{pageSize}}
        </pre>
      <!-- <div *ngIf="page"> -->
</div>

pageChanged 做了一个调用函数， 那么我们看一看这个pageChanged里面都写了什么

  pageChanged(event: any): void {
    this.page = event.page;
    const userLogPage = {
      pageNum: this.page,
      pageSize: 5
    };
    // logs是给导出csv每页的数据
    this.getAllLogsService.getUserLogPage(userLogPage).subscribe((pages: Page) => {
      this.pages = pages;
      this.logs = pages.content;
    });
  }

如上图， 在每次点击换页数的时候我们就获取了一次数据，这里面我为了前台页面好看 我固定了pageSize为5

angular中可以使用subscribe实现订阅，从而实现异步

接下来看看this.getAllLogsService.getUserLogPage(userLogPage)中的代码

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class GetAllLogsService {
  constructor(private httpClient: HttpClient) { }
  public getAllLogs(data: any) {
    return this.httpClient.post('http://localhost:8080/getAllLog', null);
  }
  public getUserLogPage(data: any) {
    return this.httpClient.post('http://localhost:8080/findUserLogPage', data);
  }
}

向后台发送数据并且，获取数据返回到pages: Page里面

实现效果截图：

这里我插入一个关于subscribe的知识点, 这里面就涉及到了ES6箭头函数的问题了，箭头函数可以绑定当前上下文的this

所以这可以有两种写法

this.getAllLogsService.getUserLogPage(userLogPage).subscribe((pages: Page)=> {
      // 箭头函数可以绑定当前上下文'
      this.pages = pages;
      this.logs = pages.content;
    });