Bagaimana untuk melaksanakan fungsi paging dalam laravel+vue

Laravel ialah rangka kerja PHP yang popular, manakala Vue.js ialah rangka kerja JavaScript untuk membina antara muka pengguna. Menggunakannya bersama-sama boleh membawa kita pengalaman pembangunan yang lebih baik dan pembangunan yang lebih cekap. Apabila membangunkan aplikasi web, anda perlu menggunakan fungsi paging untuk mengendalikan paparan sejumlah besar data. Jadi, bagaimana untuk melaksanakan penomboran dalam Laravel dan Vue? Artikel ini akan memperkenalkan kaedah pelaksanaan halaman Laravel dan Vue.

### Penomboran dalam Laravel

Laravel menyediakan cara yang mudah untuk menggunakan fungsi penomboran dalam pengawal untuk mengembalikan koleksi bernombor. Kita boleh melaksanakan fungsi paging melalui kod berikut:

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

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

Dalam fail paparan, kita boleh menggunakan operator paging yang disediakan oleh Laravel untuk meletakkan kandungan paging ke dalam halaman HTML. Kod khusus adalah seperti berikut:

@foreach ($users as $user)

    {{ $user->name }}

@endforeach

{{ $users->links() }}

$users->links() di sini ialah pengendali halaman yang disediakan oleh Laravel.

Dalam Laravel, penomboran juga boleh dilaksanakan dengan menentukan penomboran sebagai kelas sumber api. Dalam kelas sumber, kita boleh menggunakan perpustakaan fraktal dan Paginator yang disediakan oleh Laravel untuk melaksanakan fungsi paging. Untuk menggunakan pustaka Paginator, anda perlu mengkonfigurasi perkara berikut terlebih dahulu dalam pengawal:

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

Kemudian gunakan kod berikut dalam kelas sumber untuk melaksanakan fungsi paging:

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

Penomboran dalam Vue

Dalam Vue, kita boleh menggunakan vue-penomboran perpustakaan pihak ketiga untuk melaksanakan fungsi halaman. Ia adalah komponen yang boleh disesuaikan yang boleh digunakan dengan mudah dengan Vue.js.

Untuk menggunakan komponen vue-pagination, anda perlu terlebih dahulu memperkenalkan komponen dan mendaftarkannya:

import VuePagination from 'vue-pagination-2'

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

Kemudian ia boleh digunakan seperti ini dalam 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>

Di mana, jumlah bermakna Jumlah bilangan halaman, currentPage mewakili nombor halaman semasa, perPage mewakili jumlah data yang dipaparkan pada setiap halaman dan acara penomboran mewakili fungsi panggil balik semasa halaman.

Menggunakan komponen vue-penomboran boleh menyesuaikan gaya dan fungsi halaman, dan ia agak mudah untuk digunakan.

Ringkasan

Dalam artikel ini, kami memperkenalkan kaedah untuk melaksanakan penomboran dalam Laravel dan Vue. Dalam Laravel, kita boleh menggunakan fungsi penomboran dan perpustakaan Paginator yang disediakan oleh Laravel, yang sangat mudah. Dalam Vue, kami boleh menggunakan vue-penomboran komponen pihak ketiga untuk menjadikan fungsi paging lebih fleksibel dan disesuaikan. Saya harap artikel ini dapat membantu anda melaksanakan fungsi paging dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi paging dalam laravel+vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!