Сборка Onscroll Load More В 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

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

php artisan tinker

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

Установка пакета

LivewireИспользуйте команду composer для установки библиотеки livewire в laravel app:

composer require livewire/livewire

Build Laravel Загрузить больше компонентов Теперь вам нужно сгенерировать livewire загрузить больше компонентов

с помощью следующей команды.

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

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

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>

Добавить маршрут в 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 завершено; В этом уроке мы узнали самый простой способ интеграции On Scroll Loads More в приложение Laravel с помощью библиотеки Livewire.

Я считаю, что вам понравился этот урок, и поделитесь им с другими.