laravel+vue에서 페이징 기능을 구현하는 방법

Laravel은 널리 사용되는 PHP 프레임워크인 반면 Vue.js는 사용자 인터페이스 구축을 위한 JavaScript 프레임워크입니다. 이들을 함께 사용하면 더 나은 개발 경험과 보다 효율적인 개발이 가능해집니다. 웹 애플리케이션을 개발할 때 대량의 데이터 표시를 처리하려면 페이징 기능을 사용해야 합니다. 그렇다면 Laravel과 Vue에서 페이지 매김을 구현하는 방법은 무엇입니까? 이번 글에서는 Laravel과 Vue의 페이징 구현 방법을 소개하겠습니다.

### Laravel의 페이지 매김

Laravel은 페이지가 매겨진 컬렉션을 반환하기 위해 컨트롤러의 페이지 매기기 기능을 사용하는 편리한 방법을 제공합니다. 다음 코드를 통해 페이징 기능을 구현할 수 있습니다.

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

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

뷰 파일에서 Laravel에서 제공하는 페이징 연산자를 사용하여 페이징 내용을 HTML 페이지에 넣을 수 있습니다. 구체적인 코드는 다음과 같습니다.

@foreach ($users as $user)

    {{ $user->name }}

@endforeach

{{ $users->links() }}

The $users->links() 여기는 Laravel에서 제공하는 페이징 연산자입니다.

Laravel에서는 페이지 매김을 API 리소스 클래스로 지정하여 페이지 매김을 구현할 수도 있습니다. 리소스 클래스에서는 Laravel에서 제공하는 Fractal 및 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(),
        ],
    ];
}

Vue의 Pagination

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>

그 중 total은 전체 페이지 수를 나타내고 currentPage는 현재 페이지 번호, perPage는 각 페이지에 표시되는 데이터의 양, paginate 이벤트는 페이징 중 콜백 함수를 나타냅니다.

vue-pagination 구성 요소를 사용하면 페이징 스타일과 기능을 사용자 정의할 수 있으며 사용이 비교적 간단합니다.

Summary

이번 글에서는 Laravel과 Vue에서 페이지네이션을 구현하는 방법을 소개했습니다. 라라벨에서는 라라벨에서 제공하는 페이지네이션 기능과 페이지네이터 라이브러리를 사용할 수 있어 매우 편리합니다. Vue에서는 타사 구성 요소인 vue-pagination을 사용하여 페이징 기능을 보다 유연하고 맞춤화할 수 있습니다. 이 기사가 페이징 기능을 더 잘 구현하는 데 도움이 되기를 바랍니다.

위 내용은 laravel+vue에서 페이징 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!