laravel+vueでページング機能を実装する方法

Laravel は人気のある PHP フレームワークであり、Vue.js はユーザー インターフェイスを構築するための JavaScript フレームワークです。これらを組み合わせて使用​​すると、開発エクスペリエンスが向上し、開発の効率が向上します。 Web アプリケーションを開発する場合、大量のデータの表示を処理するためにページング機能を使用する必要があります。では、Laravel と Vue でページネーションを実装するにはどうすればよいでしょうか?この記事ではLaravelとVueのページング実装方法を紹介します。

Laravel のページネーション

Laravel では、コントローラーで paginate 関数を使用して、ページ分割されたコレクションを返す便利な方法が提供されています。次のコードを通じてページング関数を実装できます。

$users = DB::table('users')->paginate(10);

return view('user.index', ['users' => $users]);

ビュー ファイルでは、Laravel が提供するページング演算子を使用して、ページング コンテンツを HTML ページに配置できます。具体的なコードは次のとおりです。

@foreach ($users as $user)

    {{ $user->name }}

@endforeach

{{ $users->links() }}

ここの $users->links() は、Laravel が提供するページング演算子です。

Laravel では、API リソース クラスとしてページネーションを指定することでページネーションを実装することもできます。リソースクラスでは、Laravel が提供するフラクタルライブラリと Paginator ライブラリを使用してページング機能を実装できます。 Paginator ライブラリを使用するには、まずコントローラーで次の設定を行う必要があります:

use Illuminate\Pagination\LengthAwarePaginator;

protected function paginate($items, $perPage = 15, $page = null)
{
    $page = $page ?: (Paginator::resolveCurrentPage() ?: 1);
    return (new LengthAwarePaginator($items, count($items), $perPage, $page, [
        'path' => Paginator::resolveCurrentPath(),
        'pageName' => 'page',
    ]))->appends($this->request->query());
}

次に、リソース クラスで次のコードを使用してページング関数を実装します:

public function toArray($request)
{
    return [
        'data' => $this->collection,
        'links' => [
            'self' => 'link-value',
        ],
        'meta' => [
            'total' => $this->total(),
            'per_page' => $this->perPage(),
            'current_page' => $this->currentPage(),
            'last_page' => $this->lastPage(),
            'from' => $this->firstItem(),
            'to' => $this->lastItem(),
        ],
    ];
}

Paging in Vue

Vue では、サードパーティのライブラリ vue-pagination を使用してページング関数を実装できます。 Vue.js で簡単に使用できるカスタマイズ可能なコンポーネントです。

vue-pagination コンポーネントを使用するには、まずコンポーネントを導入して登録する必要があります:

import VuePagination from 'vue-pagination-2'

export default {
  components: {
    VuePagination
  },
  data () {
    return {
      currentPage: 1,
      ...
    }
  }
}

その後、次のように HTML で使用できます:

<vue-pagination :total="total"
                 :current-page="currentPage"
                 :per-page="perPage"
                 @paginate="loadPaginatedData"
                 :pagination-class="&#39;pagination&#39;"
                 :page-class="&#39;page-item&#39;">
</vue-pagination>

Among total はページの合計数を表し、currentPage は現在のページ番号を表し、perPage は各ページに表示されるデータの量を表し、paginate イベントはページング中のコールバック関数を表します。

vue-pagination コンポーネントを使用すると、ページングのスタイルと機能をカスタマイズでき、使用は比較的簡単です。

概要

この記事では、Laravel と Vue でページネーションを実装する方法を紹介しました。 Laravelでは、Laravelが提供するpaginate関数やPaginatorライブラリが利用できるのでとても便利です。 Vue では、サードパーティ コンポーネント vue-pagination を使用して、ページング機能をより柔軟でカスタマイズできます。この記事がページング機能のより適切な実装に役立つことを願っています。 ###

以上がlaravel+vueでページング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。