如何不用laravel的分页功能而通过vue和axios实现异步分页功能

如何不用laravel的分页功能而通过vue和axios实现异步分页功能

为什么认为有必要写这篇文章呢？因为自己在建构网站的时候，多次用到axios的异步获取数据，而当我用laravel的eloquent与simplePaginate（）方法合用将数据传到前端的时候，很显然，在blade.html页面，你已经无法使用links（）方法实现自动分页了，因此异步获取laravel的分页数据是不成功的，失效的，你必须自己去建构分页功能，除非你放弃异步获取数据。

当我放弃laravel提供的分页功能时，我首先要在controller段写下一下代码：

$users = App\User::with(['posts' => function ($query) {
    $query->where('title', 'like', '%first%');
}])->->offset($page)->limit(1)->get();

offset讲的是偏移量，就是说，你如果从0开始，那么就从数据的第一到最后正常读取，如果你从1开始，那么第一笔数据就被忽略了。

limit指的是你一次要拿到多少的数据，这里的1指明一次拿1行的数据。（因为我测试的时候就放了两行数据）

注意，为了要实现动态分页效果，我给了offset一个动态变量，名字叫做page。这个page会从axios传递到controller上。以下是axios的代码：

那么我就在axios的data对象中设置了一个page变量，我将这个变量通过next和previous方法传到controller。那么，我们在.blade.html上如何设置“上一页”和“下一页”呢？一下是.blade.html上的代码：

这样子，我们就实现了一个简单的通过vue和axios实现的分页功能了。