Comment implémenter la fonction de pagination dans laravel+vue
Laravel est un framework PHP populaire, tandis que Vue.js est un framework JavaScript pour créer des interfaces utilisateur. Les utiliser ensemble peut nous apporter une meilleure expérience de développement et un développement plus efficace. Lors du développement d'applications Web, vous devez utiliser la fonction de pagination pour gérer l'affichage de grandes quantités de données. Alors, comment implémenter la pagination dans Laravel et Vue ? Cet article présentera la méthode d'implémentation de pagination de Laravel et Vue.
### Pagination dans Laravel
Laravel fournit un moyen pratique d'utiliser la fonction paginate du contrôleur pour renvoyer une collection paginée. Nous pouvons implémenter la fonction de pagination via le code suivant :
$users = DB::table('users')->paginate(10);
return view('user.index', ['users' => $users]);
Dans le fichier de vue, nous pouvons utiliser l'opérateur de pagination fourni par Laravel pour mettre le contenu de la pagination dans la page HTML. Le code spécifique est le suivant :
@foreach ($users as $user)
{{ $user->name }}
@endforeach
{{ $users->links() }}
Le $users->links() voici l'opérateur de pagination fourni par Laravel.
Dans Laravel, la pagination peut également être implémentée en spécifiant la pagination comme classe de ressources API. Dans la classe de ressources, nous pouvons utiliser les bibliothèques fractal et Paginator fournies par Laravel pour implémenter la fonction de pagination. Pour utiliser la bibliothèque Paginator, vous devez d'abord configurer les éléments suivants dans le contrôleur :
use Illuminate\Pagination\LengthAwarePaginator;
protected function paginate($items, $perPage = 15, $page = null)
{
$page = $page ?: (Paginator::resolveCurrentPage() ?: 1);
return (new LengthAwarePaginator($items, count($items), $perPage, $page, [
'path' => Paginator::resolveCurrentPath(),
'pageName' => 'page',
]))->appends($this->request->query());
}
Utilisez ensuite le code suivant dans la classe de ressources pour implémenter la fonction de pagination :
public function toArray($request)
{
return [
'data' => $this->collection,
'links' => [
'self' => 'link-value',
],
'meta' => [
'total' => $this->total(),
'per_page' => $this->perPage(),
'current_page' => $this->currentPage(),
'last_page' => $this->lastPage(),
'from' => $this->firstItem(),
'to' => $this->lastItem(),
],
];
}
Pagination dans Vue
Dans Vue, nous pouvons utiliser le la bibliothèque tierce vue -pagination implémente la fonction de pagination. Il s'agit d'un composant personnalisable qui peut être facilement utilisé avec Vue.js.
Pour utiliser le composant vue-pagination, vous devez d'abord introduire le composant et l'enregistrer :
import VuePagination from 'vue-pagination-2'
export default {
components: {
VuePagination
},
data () {
return {
currentPage: 1,
...
}
}
}
Ensuite, vous pouvez l'utiliser comme ceci en HTML :
<vue-pagination :total="total"
:current-page="currentPage"
:per-page="perPage"
@paginate="loadPaginatedData"
:pagination-class="'pagination'"
:page-class="'page-item'">
</vue-pagination>
Parmi eux, total représente le nombre total de pages, currentPage représente le numéro de la page actuelle et perPage représente le numéro affiché sur chaque page. La quantité de données, l'événement paginate représente la fonction de rappel pendant la pagination.
L'utilisation du composant vue-pagination permet de personnaliser le style et les fonctions de pagination, et il est relativement simple à utiliser.
Résumé
Dans cet article, nous avons présenté les moyens d'implémenter la pagination dans Laravel et Vue. Dans Laravel, nous pouvons utiliser la fonction paginate et la bibliothèque Paginator fournies par Laravel, ce qui est très pratique. Dans Vue, nous pouvons utiliser le composant tiers vue-pagination pour rendre la fonction de pagination plus flexible et personnalisée. J'espère que cet article pourra vous aider à mieux implémenter la fonction de pagination.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Qu'est-ce que la mise en cache de configuration à Laravel?
Jul 27, 2025 am 03:54 AM
Le cache de configuration de Laravel améliore les performances en fusionnant tous les fichiers de configuration dans un seul fichier de cache. L'activation du cache de configuration dans un environnement de production peut réduire les opérations d'E / S et l'analyse de fichiers sur chaque demande, accélérant ainsi le chargement de configuration; 1. Il doit être activé lorsque l'application est déployée, la configuration est stable et aucune modification fréquente n'est requise; 2. Après l'activation, modifiez la configuration, vous devez ré-paraître phpartisanconfig: cache pour prendre effet; 3. Évitez d'utiliser une logique dynamique ou des fermetures qui dépendent des conditions d'exécution dans le fichier de configuration; 4. Lors du dépannage des problèmes, vous devez d'abord effacer le cache, vérifiez les variables .env et re-cache.
Génération d'URL pour les routes nommées à Laravel.
Jul 16, 2025 am 02:50 AM
La façon la plus courante de générer une route nommée dans Laravel est d'utiliser la fonction d'assistance Route (), qui correspond automatiquement au chemin en fonction du nom de route et gère la liaison des paramètres. 1. Passez le nom et les paramètres de la route dans le contrôleur ou la vue, tels que Route ('user.profile', ['id' => 1]); 2. Lorsque plusieurs paramètres, il vous suffit de passer le tableau, et l'ordre n'affecte pas la correspondance, telle que Route ('user.post.show', ['id' => 1, 'postid' => 10]); 3. Les liens peuvent être directement intégrés dans le modèle de lame, tels que la visualisation des informations; 4. Lorsque des paramètres facultatifs ne sont pas fournis, ils ne sont pas affichés, comme Route («user.post»,
Gestion des demandes et réponses HTTP dans Laravel.
Jul 16, 2025 am 03:21 AM
Le cœur de la gestion des demandes et des réponses HTTP dans Laravel est de maîtriser l'acquisition de données de demande, de retour et de téléchargement de fichiers. 1. Lors de la réception de données de demande, vous pouvez injecter l'instance de demande via des invites de type et utiliser des méthodes d'entrée () ou magiques pour obtenir des champs, et combiner valider () ou des classes de demande de formulaire de vérification; 2. La réponse de retour prend en charge les chaînes, les vues, les JSON, les réponses avec les codes d'état et les en-têtes et les opérations de redirection; 3. Lors du traitement des téléchargements de fichiers, vous devez utiliser la méthode Fichier () et Store () pour stocker des fichiers. Avant le téléchargement, vous devez vérifier le type de fichier et la taille, et le chemin de stockage peut être enregistré dans la base de données.
Expliquez les portées éloquentes de Laravel.
Jul 26, 2025 am 07:22 AM
Les éloquents de Laravel sont un outil qui résume la logique de requête commune, divisée en portée locale et en portée mondiale. 1. La portée locale est définie avec une méthode commençant par la portée et doit être appelée explicitement, comme POST :: publiée (); 2. La portée globale est automatiquement appliquée à toutes les requêtes, souvent utilisées pour la suppression douce ou les systèmes multi-locataires, et l'interface de portée doit être implémentée et enregistrée dans le modèle; 3. La portée peut être équipée de paramètres, tels que le filtrage des articles par année ou par mois, et les paramètres correspondants sont passés lors de l'appel; 4. Faites attention aux spécifications de dénomination, aux appels de chaîne, à la désactivation temporaire et à l'expansion de la combinaison lors de l'utilisation pour améliorer la clarté du code et la réutilisabilité.
Comment effectuer la validation de la demande dans Laravel?
Jul 16, 2025 am 03:03 AM
Il existe deux méthodes principales pour la vérification de la demande dans Laravel: Vérification du contrôleur et classes de demande de formulaire. 1. La méthode Validate () dans le contrôleur convient aux scénarios simples, passant directement dans les règles et aux erreurs de retour automatiquement; 2. La classe FormRequest convient à des scénarios complexes ou réutilisables, créant des classes via Artisan et définissant des règles dans les règles () pour réaliser le découplage et la réutilisation du code; 3. Les invites d'erreur peuvent être personnalisées via des messages () pour améliorer l'expérience utilisateur; 4. Définition de l'alias de champ via des attributs () pour rendre le message d'erreur plus amical; Les deux méthodes présentent leurs avantages et leurs inconvénients, et la solution appropriée doit être sélectionnée en fonction des besoins du projet.
Générer et utiliser des usines de base de données à Laravel.
Jul 16, 2025 am 02:05 AM
Database Factory est un outil de Laravel pour générer des données fausses du modèle. Il crée rapidement les données requises pour les tests ou le développement en définissant des règles de champ. Par exemple, après avoir utilisé PhpartisanMake: Factory pour générer des fichiers d'usine, définit la logique de génération de champs tels que le nom et le courrier électronique dans la méthode de définition () et crée des enregistrements via l'utilisateur :: factory () -> create (); 1. Prend en charge la génération par lots de données, telles que l'utilisateur :: Factory (10) -> create (); 2. Utilisez make () pour générer des tableaux de données non inventés; 3. Permet l'écrasement temporaire des valeurs de champ; 4. Soutient les relations d'association, comme la création automatique
Utilisation de la façade du traducteur pour la localisation à Laravel.
Jul 21, 2025 am 01:06 AM
ThetranslatorfacadeinLaraveLisusesedForLocalisation par la mise en œuvre des étages et un éternelage et un émerveillement denanguagesaTrime.
Comment se moquer des objets dans les tests Laravel?
Jul 27, 2025 am 03:13 AM
UseMockeryForcustomDependcesntencesBySettingExpectations withShouldReceive (). 2.UseLaravel’sfake () MethodForfacadesLikEmail, file d'attente, andhttptopReventReinteractions.3.replaceContainer-BoundServices with $ this-> mock () ForcLenersyntax.4.Usehtp
