Implémentation du défilement infini avec Laravel, Inertia.js v et Vue 3-js tutoriel-php.cn

Implémentation du défilement infini avec Laravel, Inertia.js v et Vue 3

Linda Hamilton

Libérer： 2024-12-20 21:17:15

original

257 Les gens l'ont consulté

Implementing Infinite Scrolling with Laravel, Inertia.js v, and Vue 3

Dans ce guide complet, nous explorerons comment implémenter le défilement infini dans une application Laravel à l'aide d'Inertia.js v2.0 et Vue 3. Nous couvrirons à la fois le frontend et le backend mise en œuvre, avec une attention particulière à la gestion des actualisations de page complète et au maintien de la position de défilement.

Table des matières

Comprendre les composants
Implémentation du frontend
Implémentation back-end
Exemple concret : articles de blog avec catégories
Meilleures pratiques et considérations

Comprendre les composants

L'implémentation du défilement infini repose sur trois composants principaux :

Composant WhenVisible d'Inertia.js v2.0 : ce composant gère la logique de l'observateur d'intersection pour détecter quand nous devons charger plus de contenu.
Pagination de Laravel : gère la logique de pagination côté serveur.
API de composition de Vue 3 : gère l'état et la réactivité de notre frontend.

Implémentation frontale

Commençons par un composant Vue qui implémente le défilement infini pour la liste d'articles de blog :

<script setup>
import { computed } from 'vue'
import { usePage, WhenVisible } from '@inertiajs/vue3'
import LoadingSpinner from '@/components/LoadingSpinner.vue'
import BlogPostCard from '@/components/BlogPostCard.vue'

const page = usePage()

const hasFeaturePost = computed(() => !!page.props.featuredPost)
const categoryName = computed(() => page.props.category?.name)
</script>

<template>
    <div>



<h3>
  
  
  Key Frontend Features
</h3>

<ol>
<li><p><strong>WhenVisible Component</strong>: This component from Inertia.js v2.0 automatically triggers a request when the element becomes visible in the viewport.</p></li>
<li><p><strong>Pagination Parameters</strong>:<br>
</p></li>
</ol>

<pre class="brush:php;toolbar:false">:params="{
    data: {
        page: page.props.postsPagination.current_page + 1,
    },
    only: ['posts', 'postsPagination'],
}"

Copier après la connexion

data : Spécifie la page suivante à charger
uniquement : optimise la requête en récupérant uniquement les données requises

États de chargement : le composant gère avec élégance les états de chargement et de fin de contenu.

Implémentation back-end

Voici l'implémentation du contrôleur Laravel qui gère à la fois les scénarios de pagination régulière et de chargement de page complète :

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use App\Models\Category;
use Illuminate\Pagination\LengthAwarePaginator;
use Inertia\Inertia;

class BlogController extends Controller
{
    public function index(?Category $category = null)
    {
        return Inertia::render('Blog/Index', [
            'category' => $category,
            'featuredPost' => $this->getFeaturedPost(),
            'posts' => $this->getPaginatedPosts($category),
            'postsPagination' => $this->getPaginatedPosts($category)?->toArray(),
        ]);
    }

    protected function getPaginatedPosts(?Category $category): ?LengthAwarePaginator
    {
        $currentPage = request()->input('page', 1);
        $perPage = request()->input('per_page', 12);

        $query = Post::query()
            ->with(['author', 'category'])
            ->published();

        if ($category) {
            $query->where('category_id', $category->id);
        }

        // Apply any additional filters
        if (request()->has('sort')) {
            $query->orderBy(request()->input('sort'), request()->input('direction', 'desc'));
        } else {
            $query->latest();
        }

        // Handle full page load vs. infinite scroll request
        if (!request()->header('X-Inertia')) {
            // Full page load - fetch all pages up to current
            $allResults = collect();

            for ($page = 1; $page <= $currentPage; $page++) {
                $pageResults = $query->paginate($perPage, ['*'], 'page', $page);
                $allResults = $allResults->concat($pageResults->items());
            }

            return new LengthAwarePaginator(
                $allResults,
                Post::query()
                    ->published()
                    ->when($category, fn($q) => $q->where('category_id', $category->id))
                    ->count(),
                $perPage,
                $currentPage
            );
        }

        return $query->paginate($perPage);
    }

    protected function getFeaturedPost()
    {
        return Post::query()
            ->with(['author', 'category'])
            ->published()
            ->featured()
            ->latest()
            ->first();
    }
}

Copier après la connexion

Principales fonctionnalités du back-end

Gestion de la pagination :

if (!request()->header('X-Inertia')) {
    // Full page load logic
} else {
    // Regular pagination for infinite scroll
}

Copier après la connexion

Chargement de la page complète : lorsqu'un utilisateur actualise ou visite directement une page, nous récupérons toutes les pages précédentes pour maintenir la position de défilement correcte :

for ($page = 1; $page <= $currentPage; $page++) {
    $pageResults = $query->paginate($perPage, ['*'], 'page', $page);
    $allResults = $allResults->concat($pageResults->items());
}

Copier après la connexion

Requêtes efficaces : l'implémentation inclut un chargement impatient des relations et des requêtes étendues :

$query = Post::query()
    ->with(['author', 'category'])
    ->published();

Copier après la connexion

Conclusion

La mise en œuvre du défilement infini avec Laravel et Inertia.js v2.0 offre une expérience utilisateur fluide tout en conservant de bonnes performances et pratiques de référencement. La combinaison de l'API Composition de Vue 3 et du composant WhenVisible d'Inertia.js facilite la mise en œuvre et la maintenance.

N'oubliez pas de :

Testez minutieusement l'implémentation, en particulier pour les cas extrêmes
Surveiller les mesures de performances
Envisagez de mettre en œuvre une solution de secours pour les utilisateurs dont JavaScript est désactivé
Gardez l'accessibilité à l'esprit lors de la mise en œuvre du défilement infini

Cette implémentation peut être adaptée à divers cas d'utilisation au-delà des articles de blog, tels que des listes de produits, des galeries d'images ou tout autre contenu bénéficiant d'un défilement infini.