Збірка Onscroll Завантажте Більше В Laravel 9 За Допомогою Пакета Livewire

У цьому підручнику ви визначите, як завантажити більше даних на прокрутку сторінки в програмі laravel за допомогою пакета laravel livewire.

Більше завантаження або нескінченна прокрутка – це бездоганний спосіб показу продуктів, публікацій або даних на веб-сайтах. Дослідження показують, що завантаження даних прокрутки є найкращим способом підвищити зацікавленість користувачів; Однак нумерація сторінок є традиційним способом відображення даних на веб-сайтах.

Цей підручник Laravel Livewire Load More OnScroll допоможе вам реалізувати завантаження більшої кількості даних на прокрутку з нуля.

Livewire - це повноцінний фреймворк, створений виключно для Laravel, який зменшує біль від створення динамічних інтерфейсів користувача без шкоди для якості та зберігає тепло Laravel.

Ось кроки до створення та впровадження завантаження більшої кількості даних на нескінченність прокрутки в додатку Laravel за допомогою пакета livewire.

Створити проект Laravel
Підключення до бази даних
Викликати міграцію в Laravel
Генеруйте тестові дані
Встановіть пакет Livewire
Збірка Laravel Завантажити додатковий компонент
Додати маршрут в Laravel
Настроювання подання
Тестова заявка

Створити проект

Laravel Переконайтеся, що ви налаштували композитора у вашій системі розробки. Перейдіть до консолі, відкрийте термінал, введіть наведену нижче команду та відтворіть процес встановлення:

composer create-project laravel/laravel laravel-load-more-example --prefer-dist

Встановити підключення

до бази даних Відкрийте файл .env та додайте облікові дані бази даних, такі як ім'я бази даних, ім'я користувача однаково важливий пароль:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=

Якщо ви використовуєте локальний сервер MAMP в macOs; обов'язково додайте UNIX_SOCKET та DB_SOCKET нижче облікові дані бази даних у файлі .env.

UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock

Викликати міграцію в Laravel

Далі вам потрібно запустити міграцію, використовуючи існуючі файли міграції laravel. Але переконайтеся, що ви запустили сервер розробки, якщо розробляєте локально.

Отже, перейдіть до консолі та виконайте наведену нижче команду:Створити тестові дані Тепер, щоб перевірити функцію завантаження більше, вам потрібно мати тестові дані

php artisan migrate

у вашій базі даних, тому відкрийте консоль і виконайте такі команди:

php artisan tinker

За допомогою наведеної вище команди, яку ви ввели всередині оболонки Psy, додатково додайте назву моделі та передайте кількість тестових записів, які ви хочете створити:

User::factory()->count(200)->create()

Встановіть пакет

LivewireВикористовуйте команду composer, щоб встановити бібліотеку livewire у laravel app:

composer require livewire/livewire

Build Laravel Load More Component

Тепер вам потрібно створити більше компонентів завантаження livewire за допомогою такої команди.

php artisan make:livewire load-more-user-data

Зрештою, наведена вище команда показала два файли на наступному шляху:Відкрийте та оновіть код нижче в app/Http/Livewire/LoadMoreUserData.php file:Відкрийте та оновіть наведений нижче код у resources/views/livewire/load-more-user-data.blade.php file:

app/Http/Livewire/LoadMoreUserData.php
resources/views/livewire/load-more-user-data.blade.php

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\User;
class LoadMoreUserData extends Component
{
    public $limitPerPage = 10;
    protected $listeners = [
        'load-more' => 'loadMore'
    ];
   
    public function loadMore()
    {
        $this->limitPerPage = $this->limitPerPage + 6;
    }
    public function render()
    {
        $users = User::latest()->paginate($this->limitPerPage);
        $this->emit('userStore');
        return view('livewire.load-more-user-data', ['users' => $users]);
    }
}

<div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#Id</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
            <tr>
                <td>{{ $user->id }}</td>
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

Add Route in Laravel

Далі додайте маршрут у файл routes/web.php; це буде простий метод GET для завантаження даних користувачів у прокрутку.

<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('/load-more-users', function () {
    return view('welcome');
});

Налаштування перегляду

На цьому останньому кроці вам потрібно відкрити файл resources/views/welcome.blade.php та додати наступний код:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Livewire Load More Data on Page Scroll Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html,
        body {
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        @livewire('load-more-user-data')
    </div>
    @livewireScripts
    <script type="text/javascript">
        window.onscroll = function (ev) {
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                window.livewire.emit('load-more');
            }
        };
    </script>
</body>
</html>

Тестова програма

Нарешті, вам потрібно запустити програму Laravel, тому відкрийте вікно терміналу та виконайте команду нижче.

php artisan serve

Ось URL-адреса, за якою ви можете протестувати додаток:

http://localhost:8000/load-more-users

Висновок

Підручник Laravel Livewire Load More OnScroll закінчено; У цьому підручнику ми дізналися найпростіший спосіб інтеграції на навантаженнях прокрутки більше в програмі Laravel за допомогою бібліотеки livewire.

Я вважаю, що вам сподобався цей підручник і поділіться ним з іншими.