Laravel + Inertia + Vuejs：分页

Laravel

使用 Laravel + Inertia + VueJS：分页

在现代的 Web 开发中，分页是一个常见的需求，特别是在处理大量数据时。在 Laravel 框架中，使用 Inertia.JS 和 Vue.JS 可以轻松实现分页功能。本文将介绍如何使用 Laravel + Inertia + VueJS 来实现分页，并提供一个案例代码供参考。

案例代码

下面是一个使用 Laravel + Inertia + VueJS 实现分页的简单示例：

首先，在 Laravel 中创建一个控制器来处理分页逻辑。假设我们有一个名为 Post 的模型，我们可以在控制器中编写以下代码：

php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Inertia\Inertia;
class PostController extends Controller
{
    public function index(Request $request)
    {
        $posts = Post::paginate(10); // 每页显示 10 条数据
        return Inertia::render('Posts/Index', [
            'posts' => $posts,
        ]);
    }
}

上面的代码中，我们使用 Post 模型的 paginate 方法来获取分页数据，每页显示 10 条数据。然后，我们使用 Inertia::render 方法将数据传递给前端视图。

接下来，在前端使用 Vue.JS 和 Inertia.JS 来渲染分页组件。我们可以创建一个名为 Posts/Index.vue 的 Vue 组件，并编写以下代码：

html
<template>
  <div>
    <ul>
      <li v-for="post in posts.data" :key="post.id">{{ post.title }}</li>
    </ul>
    <pagination :data="posts" @pagination-change-page="fetchPosts"></pagination>
  </div>
</template>
<script>
import { usePage } from '@inertiaJS/inertia-vue3';
export default {
  mounted() {
    this.fetchPosts();
  },
  methods: {
    fetchPosts(page = 1) {
      const { data } = usePage();
      this.$inertia.get(route('posts.index', { page }), {
        onSuccess: () => {
          this.posts = data.posts;
        },
      });
    },
  },
  data() {
    return {
      posts: [],
    };
  },
};
</script>

在上面的代码中，我们使用了 usePage 函数来获取页面数据。然后，我们在 mounted 钩子中调用 fetchPosts 方法来获取第一页的数据。该方法接受一个参数 page，默认为 1，用于指定要获取的页数。我们使用 this.$inertia.get 方法来发送 GET 请求，获取相应的数据。

在模板中，我们使用 v-for 指令来遍历 posts 数组，并显示每条帖子的标题。最后，我们使用 组件来渲染分页导航。

实现分页

要实现分页，我们首先需要在路由中定义一个 GET 路由，指向 PostController 的 index 方法。例如：

php
Route::get('/posts', [PostController::class, 'index'])->name('posts.index');

然后，我们可以在任何需要显示分页数据的地方，使用 Posts/Index 组件来渲染分页视图。例如，在一个名为 posts.blade.php 的视图文件中，我们可以这样使用：

html
<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
  ...
  <div id="app" data-page="{{ JSon_encode($page) }}"></div>
  <script src="{{ mix('/JS/app.JS') }}"></script>
</body>
</html>

在上述代码中，我们将页面数据传递给前端，以便 Vue 组件可以使用它。

通过使用 Laravel + Inertia + VueJS，我们可以轻松地实现分页功能。在 Laravel 中，我们可以使用 paginate 方法来获取分页数据，并使用 Inertia.JS 将数据传递给前端视图。然后，我们可以使用 Vue.JS 和 Inertia.JS 来渲染分页组件，并在前端实现分页导航。这使得在处理大量数据时，分页变得非常简单和高效。

上述示例代码只是一个简单的示例，实际项目中可能需要更复杂的逻辑和样式。然而，这个示例可以作为一个起点，帮助您在 Laravel + Inertia + VueJS 中实现分页功能。希望本文对您有所帮助！