So implementieren Sie die Paging-Funktion in Laravel+vue

Laravel ist ein beliebtes PHP-Framework, während Vue.js ein JavaScript-Framework zum Erstellen von Benutzeroberflächen ist. Ihre gemeinsame Verwendung kann uns ein besseres Entwicklungserlebnis und eine effizientere Entwicklung bescheren. Bei der Entwicklung von Webanwendungen müssen Sie die Paging-Funktion verwenden, um die Anzeige großer Datenmengen zu bewältigen. Wie implementiert man also die Paginierung in Laravel und Vue? In diesem Artikel wird die Paging-Implementierungsmethode von Laravel und Vue vorgestellt.

### Paginierung in Laravel

Laravel bietet eine praktische Möglichkeit, die Paginierungsfunktion im Controller zu verwenden, um eine paginierte Sammlung zurückzugeben. Wir können die Paging-Funktion über den folgenden Code implementieren:

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

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

In der Ansichtsdatei können wir den von Laravel bereitgestellten Paging-Operator verwenden, um den Paging-Inhalt in die HTML-Seite einzufügen. Der spezifische Code lautet wie folgt:

@foreach ($users as $user)

    {{ $user->name }}

@endforeach

{{ $users->links() }}

Das $users->links() hier ist der von Laravel bereitgestellte Paging-Operator.

In Laravel kann die Paginierung auch implementiert werden, indem die Paginierung als API-Ressourcenklasse angegeben wird. In der Ressourcenklasse können wir die von Laravel bereitgestellten Fraktal- und Paginator-Bibliotheken verwenden, um die Paging-Funktion zu implementieren. Um die Paginator-Bibliothek zu verwenden, müssen Sie zunächst Folgendes im Controller konfigurieren:

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());
}

Verwenden Sie dann den folgenden Code in der Ressourcenklasse, um die Paging-Funktion zu implementieren:

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# 🎜🎜#

import VuePagination from 'vue-pagination-2'

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

<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>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Paging-Funktion in Laravel+vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!