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

In Vue können wir die Bibliothek vue-pagination eines Drittanbieters verwenden, um die Paging-Funktion zu implementieren. Es handelt sich um eine anpassbare Komponente, die problemlos mit Vue.js verwendet werden kann.

Um die Vue-Paginierungskomponente zu verwenden, müssen Sie zuerst die Komponente vorstellen und registrieren:

import VuePagination from 'vue-pagination-2'

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

Dann können Sie sie in HTML wie folgt verwenden:

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

Wobei total die Gesamtzahl der Seiten darstellt, currentPage die aktuelle Seitenzahl darstellt, perPage die auf jeder Seite angezeigte Datenmenge darstellt und das paginate-Ereignis die Rückruffunktion während des Pagings darstellt.

Mit der Vue-Paginierungskomponente können Sie den Seitenstil und die Seitenfunktion anpassen und sind relativ einfach zu verwenden.

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man Paginierung in Laravel und Vue implementiert. In Laravel können wir die von Laravel bereitgestellte Paginierungsfunktion und Paginator-Bibliothek verwenden, was sehr praktisch ist. In Vue können wir die Drittanbieterkomponente vue-pagination verwenden, um die Paging-Funktion flexibler und individueller zu gestalten. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, die Paging-Funktionalität besser zu implementieren.

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!