Laravel高效实现首页加载10条和分页加载5条数据
本文介绍如何在单个Laravel接口中实现移动端文章列表的双重加载需求：首页加载10条数据，后续分页加载每次5条数据。
业务场景
移动端文章列表接口需要满足以下条件：
- 首次加载显示10篇文章。
- 用户下拉刷新或上拉加载更多时，每次加载5篇文章。
实现方案
无需创建两个独立接口，一个接口即可满足需求。关键在于灵活处理前端传递的参数。
-
首次加载 (首页):
前端请求接口时，传递
per_page=10和page=1参数。 -
分页加载:
用户触发加载更多时，前端传递
per_page=5，并将page参数递增。
Laravel代码实现
public function getArticles(Request $request)
{
$perPage = $request->input('per_page', 10); // 默认10
$page = $request->input('page', 1); // 默认1
$articles = Article::paginate($perPage, ['*'], 'page', $page);
return response()->json($articles);
}
前端请求示例 (使用axios)
首次加载:
axios.get('/api/articles', {
params: {
per_page: 10,
page: 1
}
})
.then(response => {
// 处理数据
});
分页加载 (假设当前页码为currentPage)
axios.get('/api/articles', {
params: {
per_page: 5,
page: currentPage + 1
}
})
.then(response => {
// 处理数据，更新currentPage
});
通过paginate方法，Laravel优雅地处理分页逻辑。 前端通过控制per_page和page参数，轻松实现首页加载和分页加载的不同数据数量。 此方法简洁高效，避免了冗余代码，提高了接口的可维护性。
