首先我们在后端创建几个实体类,和一个工具类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 getPageInfo(PageRequest pageRequest) {
int pageNum = pageRequest.getPageNum();
int pageSize = pageRequest.getPageSize();
// PageHelper要写在需要分页的sql查询的上面,不然不知道给哪条sql做分页
PageHelper.startPage(pageNum, pageSize);
List sysMenus = logDao.selectPage();
return new PageInfo(sysMenus);
}
Dao层:
List selectPage();
XML:
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
首先我们先用 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里面, 就是为了刚开始加载页面的时候他能获取这些关于分页的数据
, 然后我们看一看前台分页组件
<pagination [(totalItems)]=“totalItems” [(ngModel)]=“currentPage” (pageChanged)=“pageChanged($event)”>
当前页面页数位: {{page}} 总页数为: {{totalPages}} 所有数据数为: {{totalSize}} 单个页面数据数: {{pageSize}}
pageChanged 做了一个调用函数, 那么我们看一看这个pageChanged里面都写了什么
pageChanged(event: any): void {
this.page = event.page;
const userLogPage = {
pageNum: this.page,
pageSize: 5