W tym samouczku określisz, jak załadować więcej danych podczas przewijania strony w aplikacji laravel za pomocą pakietu laravel livewire.
Załaduj więcej lub w nieskończoność przewijanie to nieskazitelny sposób na pokazanie produktów, postów lub danych na stronach internetowych. Badania mówią, że ładowanie danych przewijania jest najlepszym sposobem na zwiększenie zaangażowania użytkowników; Jednak paginacja jest tradycyjnym sposobem wyświetlania danych na stronach internetowych.
Ten samouczek Laravel Livewire Load More OnScroll pomoże Ci zaimplementować ładowanie większej ilości danych na przewijaniu od zera.
Livewire to kompleksowa platforma stworzona specjalnie dla Laravel, która zmniejsza ból związany z tworzeniem dynamicznych interfejsów użytkownika bez uszczerbku dla jakości i utrzymuje ciepło Laravel.
Oto kroki w kierunku budowania i wdrażania ładowania większej ilości danych na przewijanie nieskończoności w aplikacji laravel przy użyciu pakietu livewire.
- Utwórz projekt Laravel
- Nawiązywanie połączenia z bazą danych
- Wywołaj migrację w Laravel
- Generowanie danych testowych
- Zainstaluj pakiet Livewire
- Zbuduj Laravel Załaduj więcej komponentu
- Dodaj trasę w Laravel
- Konfigurowanie widoku
- Aplikacja testowa
Utwórz projekt
Laravel Upewnij się, że skonfigurowałeś kompozytora w swoim systemie programistycznym. Udaj się do konsoli, otwórz terminal, wprowadź poniższe polecenie i wywołaj proces instalacji:Utwórz połączenie
composer create-project laravel/laravel laravel-load-more-example --prefer-distz bazą danych Otwórz plik .env i dodaj poświadczenia bazy danych, takie jak nazwa bazy danych, nazwa użytkownika równie ważne hasło:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=Jeśli używasz lokalnego serwera MAMP w systemie macOS; pamiętaj, aby dołączyć UNIX_SOCKET i DB_SOCKET poniżej poświadczeń bazy danych w pliku .env.
UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sockWywołaj migrację w Laravel
Następnie musisz uruchomić migrację przy użyciu istniejących plików migracji laravel. Upewnij się jednak, że serwer programistyczny został uruchomiony, jeśli programujesz lokalnie.
Udaj się więc do konsoli i wykonaj poniższe polecenie: Wygeneruj dane testowe Teraz, aby przetestować funkcję ładowania więcej, musisz mieć dane
php artisan migratetestowe w swojej bazie danych, więc otwórz konsolę i wykonaj następujące polecenia: Za pomocą powyższego polecenia wprowadzonego wewnątrz Psy Shell, dodatkowo dołącz nazwę modelu i przekaż liczbę rekordów testowych, które chcesz wygenerować:
php artisan tinker
User::factory()->count(200)->create()Zainstaluj pakiet
LivewireUżyj polecenia kompozytora, aby zainstalować bibliotekę livewire w aplikacji laravel:
composer require livewire/livewireBuild Laravel Załaduj więcej komponentu
Teraz musisz wygenerować livewire załaduj więcej komponentów za pomocą następującego polecenia.
php artisan make:livewire load-more-user-dataOstatecznie powyższe polecenie zamanifestowało dwa pliki w następującej ścieżce:Otwórz i zaktualizuj poniższy kod w app/Http/Livewire/LoadMoreUserData.php file:Otwórz i zaktualizuj poniższy kod w 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
Następnie dodaj trasę w pliku routes/web.php; będzie to prosta metoda GET do ładowania danych użytkowników na zwoju.
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('/load-more-users', function () {
return view('welcome');
});Konfigurowanie widoku
W tym ostatnim kroku musisz otworzyć plik resources/views/welcome.blade.php i dodać następujący kod:
<!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>Aplikacja testowa
Na koniec musisz uruchomić aplikację laravel, więc otwórz okno terminala i wykonaj poniższe polecenie.
php artisan serveOto adres URL, na którym możesz przetestować aplikację:
http://localhost:8000/load-more-usersWniosek
Samouczek Laravel Livewire Load More OnScroll dobiegł końca; w tym samouczku poznaliśmy najprostszy sposób integracji z ładowaniem przewijania w aplikacji Laravel przy użyciu biblioteki LiveWire.
Myślę, że podobał Ci się ten samouczek i podziel się nim z innymi.
