Kako implementirati paginacijo v aplikaciji Vue

Paginacija vam omogoča, da velike nize podatkov razdelite na manjše, bolj obvladljive dele. Paginacija uporabnikom olajša krmarjenje po velikih zbirkah podatkov in iskanje informacij, ki jih iščejo.

S tem vzorčnim projektom se poučite o tehniki in o tem, kako jo implementirati v Vue.

Kako začeti uporabljati Vue-Awesome-Paginate

Vue-awesome-paginate je zmogljiva in lahka knjižnica za ostranjevanje Vue, ki poenostavi postopek ustvarjanja prikazov podatkov s paginacijo. Zagotavlja obsežne funkcije, vključno s prilagodljivimi komponentami, API-ji, ki so enostavni za uporabo, in podporo za različne scenarije označevanja strani.

Če želite začeti uporabljati vue-awesome-paginate, namestite paket tako, da zaženete ta terminalski ukaz v vašem imeniku projekta:

npm install vue-awesome-paginate

Nato, da konfigurirate paket za delovanje v vaši aplikaciji Vue, kopirajte spodnjo kodo v src/main.js mapa:

import { createApp } from"vue";





instagram viewer


import App from"./App.vue";
import VueAwesomePaginate from"vue-awesome-paginate";
import"vue-awesome-paginate/dist/style.css";
createApp(App).use(VueAwesomePaginate).mount("#app");

Ta koda uvozi in registrira paket z .uporaba() način, tako da ga lahko uporabite kjer koli v svoji aplikaciji. Paket za ostranjevanje je opremljen z datoteko CSS, ki jo blok kode tudi uvozi.

Gradnja aplikacije Test Vue

Za ponazoritev delovanja paketa vue-awesome-paginate boste izdelali aplikacijo Vue, ki prikazuje vzorčni nabor podatkov. Ti boš pridobivanje podatkov iz API-ja z Axios za to aplikacijo.

Kopirajte spodnji kodni blok v svoj App.vue mapa:

<scriptsetup>
import { ref, onBeforeMount } from "vue";
import axios from "axios";
const comments = ref([]);
const loadComments = async () => {
 try {
 const response = await axios.get(
 `https://jsonplaceholder.typicode.com/comments`,
 );
 return response.data.map((comment) => comment.body);
 } catch (error) {
 console.error(error);
 }
};
onBeforeMount(async () => {
 const loadedComments = await loadComments();
 comments.value.push(...loadedComments);
 console.log(comments.value);
});
script>
<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholderh1>
<divv-if="comments.length">
<divv-for="comment in comments"class="comment">
<p>{{ comment }}p>
div>
div>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

Ta blok kode uporablja Vue Composition API zgraditi komponento. Komponenta uporablja Axios za pridobivanje komentarjev iz API-ja JSONPlaceholder, preden jo Vue namesti (onBeforeMount kavelj). Komentarje nato shrani v komentarji matriko, z uporabo predloge za njihov prikaz ali nalaganjem sporočila, dokler niso na voljo komentarji.

Integracija Vue-Awesome-Paginate v vašo aplikacijo Vue

Zdaj imate preprosto aplikacijo Vue, ki pridobiva podatke iz API-ja, lahko jo spremenite tako, da integrira paket vue-awesome-paginate. To funkcijo paginacije boste uporabili za razdelitev komentarjev na različne strani.

Zamenjajte scenarij del vašega App.vue datoteka s to kodo:

<scriptsetup>
import { ref, computed, onBeforeMount } from 'vue';
import axios from 'axios';
const perPage = ref(10);
const currentPage = ref(1);
const comments = ref([]);
const onClickHandler = (page) => {
 console.log(page);
};
const loadComments = async () => {
 try {
 const response = await axios.get(
 `https://jsonplaceholder.typicode.com/comments`
 );
 return response.data.map(comment => comment.body);
 } catch (error) {
 console.error(error);
 }
};
onBeforeMount(async () => {
 const loadedComments = await loadComments();
 comments.value.push(...loadedComments);
 console.log(comments.value);
});
const displayedComments = computed(() => {
 const startIndex = (currentPage.value * perPage.value) - perPage.value;
 const endIndex = startIndex + perPage.value;
 return comments.value.slice(startIndex, endIndex);
});
script>

Ta blok kode doda še dve reaktivni referenci: na stran in trenutna stran. Te reference shranjujejo število elementov za prikaz na stran oziroma trenutno številko strani.

Koda ustvari tudi izračunano ref z imenom prikazaniKomentarji. To izračuna obseg komentarjev na podlagi trenutna stran in na stran vrednote. Vrne rezino komentarji matriko znotraj tega obsega, ki bo združila komentarje na različne strani.

Zdaj zamenjajte predlogo razdelek vaše datoteke App.vue z naslednjim:

<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholderh1>
<divv-if="comments.length">
<divv-for="comment in displayedComments"class="comment">
<p>{{ comment }}p>
div>
<vue-awesome-paginate
 :total-items="comments.length"
 :items-per-page="perPage"
 :max-pages-shown="5"
 v-model="currentPage"
 :onclick="onClickHandler"
 />
div>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

The v-za atribut za upodabljanje seznamov v tem razdelku predloge kaže na prikazaniKomentarji niz. Predloga dodaja vue-awesome-paginate komponenta, ki ji zgornji delček posreduje rekvizite. Več o teh in dodatnih pripomočkih lahko izveste v uradnem paketu dokumentacijo na GitHubu.

Po oblikovanju aplikacije bi morali dobiti stran, ki je videti takole:

Kliknite vsak oštevilčen gumb in videli boste drugačen nabor komentarjev.

Uporabite paginacijo ali neskončno drsenje za boljše brskanje po podatkih

Zdaj imate zelo osnovno aplikacijo Vue, ki prikazuje, kako učinkovito paginirati podatke. Uporabite lahko tudi neskončno drsenje za obdelavo dolgih nizov podatkov v vaši aplikaciji. Prepričajte se, da upoštevate potrebe vaše aplikacije, preden izberete, saj imata paginacija in neskončno drsenje prednosti in slabosti.