Bagaimana untuk melaksanakan fungsi paging menggunakan Laravel

Laravel ialah rangka kerja pembangunan PHP popular yang menyediakan banyak ciri moden dan alatan mesra pembangunan, membolehkan pembangun membina tapak web dan aplikasi dengan lebih cekap. Dalam proses membangunkan aplikasi web, selalunya perlu untuk memaparkan hasil pertanyaan dalam halaman Artikel ini akan memperkenalkan cara menggunakan Laravel untuk melaksanakan fungsi paging.

1. Pengenalan kepada paging

Paging merujuk kepada kaedah membahagikan sejumlah besar data kepada beberapa halaman untuk paparan Biasanya, kami akan menetapkan bilangan keping data untuk dipaparkan pada setiap halaman dan jumlah data Apabila nilai ini melebihi, halaman akan bertukar secara automatik. Pendekatan ini boleh mengurangkan masa memuatkan halaman dan penggunaan lebar jalur, menjadikannya lebih mudah untuk pengguna melihat dan menavigasi data.

2. Operasi paging Laravel

Laravel menyediakan kelas Paginator untuk melaksanakan fungsi paging. Kita boleh mendapatkan contoh kelui dengan menghantar objek hasil pertanyaan kepada kaedah membuat Peminator dan menentukan jumlah data yang akan dipaparkan pada setiap halaman. Panggil kaedah render pada contoh, dan Laravel boleh menjana pautan penomboran secara automatik.

Mari kita lihat pelaksanaan kod khusus.

1. Pasang Laravel

Jalankan arahan berikut untuk memasang Laravel:

composer create-project --prefer-dist laravel/laravel blog

2. Buat jadual pangkalan data Mysql

Buat artikel jadual pangkalan data dan masukkan beberapa sampel data:

CREATE TABLE `articles` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `body` text COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO `articles` (`title`, `body`, `created_at`, `updated_at`) VALUES ('Article 1', 'This is article 1 content', '2021-01-01 12:00:00', '2021-01-01 12:00:00');
INSERT INTO `articles` (`title`, `body`, `created_at`, `updated_at`) VALUES ('Article 2', 'This is article 2 content', '2021-01-02 12:00:00', '2021-01-02 12:00:00');
INSERT INTO `articles` (`title`, `body`, `created_at`, `updated_at`) VALUES ('Article 3', 'This is article 3 content', '2021-01-03 12:00:00', '2021-01-03 12:00:00');
INSERT INTO `articles` (`title`, `body`, `created_at`, `updated_at`) VALUES ('Article 4', 'This is article 4 content', '2021-01-04 12:00:00', '2021-01-04 12:00:00');

3. Tentukan model Artikel

Buat fail Article.php dalam direktori app/Models , dan tambahkan kod berikut:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Article extends Model
{
    use HasFactory;

    protected $fillable = [&#39;title&#39;, &#39;body&#39;];

    public function getDateAttribute()
    {
        return $this->created_at->format('Y-m-d');
    }
}

4. Define ArticlesController

Buat fail ArticlesController.php dalam direktori app/Http/Controllers dan tambah kod berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Article;

class ArticlesController extends Controller
{
    public function index(Request $request)
    {
        $articles = Article::paginate(2);
        
        return view(&#39;articles.index&#39;, compact(&#39;articles&#39;));
    }
}

5. Buat paparan Artikel

Buat direktori artikel dalam direktori sumber/pandangan, cipta fail index.blade.php dalam direktori ini , dan tambah kod berikut:

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                @foreach($articles as $article)
                    <div class="card mb-3">
                        <div class="card-header">
                            {{ $article->title }}
                        </div>
                        <div class="card-body">
                            <p class="card-text">{{ $article->body }}</p>
                        </div>
                        <div class="card-footer text-right">
                            <small class="text-muted">{{ $article->date }}</small>
                        </div>
                    </div>
                @endforeach
                {{ $articles->links() }}
            </div>
        </div>
    </div>
@endsection

Analisis:

• Mula-mula, kami memaparkan setiap artikel dalam gelung foreach.
• Gunakan atribut $article->title dan $article->body untuk mendapatkan tajuk dan kandungan artikel daripada model Artikel.
• Dapatkan tarikh penerbitan artikel dalam atribut $article->date.
• Panggil kaedah $articles->links() dan Laravel akan menjana pautan penomboran secara automatik untuk kami.

6. Tentukan gaya halaman

Buat fail app.css dalam direktori awam/css dan tambah kod berikut:

.card {
    margin-bottom: 20px;
}
.pagination {
    margin-top: 20px;
}

Dalam fail app.blade.php dalam direktori resources/views/layouts, tambahkan kod berikut:

<!doctype html>
<html lang="{{ str_replace(&#39;_&#39;, &#39;-&#39;, app()->getLocale()) }}">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name') }}</title>
    <!-- Styles -->
    <link href="{{ asset(&#39;css/app.css&#39;) }}" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="{{ url(&#39;/&#39;) }}">
                {{ config('app.name') }}
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __(&#39;Toggle navigation&#39;) }}">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto"></ul>
                <ul class="navbar-nav ml-auto"></ul>
            </div>
        </div>
    </nav>
    @yield('content')
    <script src="{{ asset(&#39;js/app.js&#39;) }}"></script>
</body>
</html>

Analisis:

• Ditambah dalam app.blade.php Gaya CSS untuk Bootstrap 4.
• Kami juga memperkenalkan fail JS Bootstrap 4, tetapi kami tidak perlu memperkenalkannya secara manual kerana Laravel disertakan dengan alat pembungkusan Webpack, yang boleh membungkus fail JS yang diperlukan secara automatik ke dalam public/js/app . fail js.

7. Uji fungsi paging

Lawati http://127.0.0.1:8000/articles dan anda boleh melihat bahawa senarai artikel kami telah dipaparkan, dan kami Anda boleh bertukar antara berbilang halaman melalui pautan paging.

Apa yang perlu diperhatikan di sini ialah apabila kita memanggil kaedah penomboran dalam pengawal, parameter 2 yang dihantar mewakili bilangan keping data yang akan dipaparkan pada halaman Jika nilai ini ditetapkan terlalu kecil , akan Terdapat banyak pautan paging, menyebabkan kekeliruan halaman jika nilai ini ditetapkan terlalu besar, jumlah data yang dipaparkan pada halaman akan menjadi sangat besar, menyekat permintaan untuk masa yang lama, menjejaskan kelajuan pembukaan halaman; , dan juga menyebabkan masalah seperti limpahan memori, jadi ia harus berdasarkan keadaan sebenar Situasi ditetapkan dengan teliti.

3. Ringkasan

Laravel menyediakan kelas Paginator yang berkuasa untuk melaksanakan fungsi paging, yang boleh dilaksanakan dengan mudah dengan kurang kod. Artikel ini memperkenalkan cara menggunakan Paginator untuk memaparkan data dalam pangkalan data MySQL dalam halaman. Kami juga menunjukkan cara menggunakan sifat model dalam hasil penomboran. Apabila kita perlu memaparkan sejumlah besar data semasa membangunkan tapak web dan aplikasi, paging adalah ciri penting Ia bukan sahaja dapat meningkatkan pengalaman pengguna dengan berkesan, tetapi juga mengurangkan overhed pelayan dengan berkesan.

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