在前端中有时需要自己写mock api, 数据库方面并不一定要用mysql这样的,用json文件同样也可以模拟数据库,使用require函数读取json文件获取到一个json对象/数组,下面介绍怎么使用slice函数进行模拟分页:
分页时只需要这几个参数:
baseData: 待分页的数据(通常是一个数组,因为mysql的表就是线性的数据,本质就是数组)
当前页码:pageNum
每页显示条数:pageSize
那么分页的核心代码如下:
// 计算总页数
const totalPages = Math.ceil(baseData.length / pageSize);
// 计算起始索引和结束索引
const startIndex = (pageNumber - 1) * pageSize;
const endIndex = Math.min(startIndex + pageSize, baseData.length);
// 使用 slice 方法截取分页需要返回的数据
queryPageInfo = baseData.slice(startIndex, endIndex);
// 计算上一页和下一页
const prevPage = pageNumber > 1 ? pageNumber - 1 : null;
const nextPage = pageNumber < totalPages ? pageNumber + 1 : null;
简单解释一下slice函数的用法:
slice(start,end)==>表示截取数组: 起始索引:start, 结束索引:(end-1),这两段之间的数据
之所以还需要计算prevPage(上一页)和nextPage(下一页), 是因为需要发给前端做分页按钮时的分页信息:
paginationInfo = {
prevPageLink,
nextPageLink,
totalCount: baseData.length,
pageSize,
currentPage: pageNumber,
totalPages,
};
而计算prePageLink和nextPageLink 就需要prevPage和nextPage这两个参数
const prePageLink = prevPage
? `${baseUrl}?pageNumber=${prevPage}&pageSize=${pageSize}`
: null;
const nextPageLink = nextPage
? `${baseUrl}?pageNumber=${nextPage}&pageSize=${pageSize}`
: null;
这个分页信息可以设置到response的header中,然后web端通过request读取header获取分页信息:
res.header("x-pagination", JSON.stringify(paginationInfo))