Hur man implementerar paginering i en Vue-applikation
Med paginering kan du dela upp stora datamängder i mindre, mer lätthanterliga bitar. Paginering gör det lättare för användare att navigera i stora datamängder och hitta den information de söker.
Utforska metodikens finesser och få praktiska insikter om hur den integreras i en Vue-applikation genom att granska detta illustrativa projekt.
Komma igång med Vue-Awesome-Paginate
Vue-awesome-paginate är ett kraftfullt och lättviktigt Vue-pagineringsbibliotek som förenklar processen med att skapa paginerade datavisningar. Det innehåller omfattande funktioner, inklusive anpassningsbara komponenter, lättanvända API:er och stöd för olika pagineringsscenarier.
För att börja använda “vue-awesome-paginate”, kör följande kommando i projektets katalog via ett terminalgränssnitt:
npm install vue-awesome-paginate
För att konfigurera paketet för användning i ett Vue-projekt, klistra in det medföljande kodavsnittet i filen src/main.js som finns i ditt projekts källkatalog.
import { createApp } from "vue";
import App from "./App.vue";
import VueAwesomePaginate from "vue-awesome-paginate";
import "vue-awesome-paginate/dist/style.css";
createApp(App).use(VueAwesomePaginate).mount("#app");
Den aktuella koden integrerar och registrerar paketet med hjälp av .use() tekniken, vilket möjliggör dess implementering i hela applikationen. Samtidigt utförs importen av en CSS-fil också av det nämnda kodblocket.
Bygga test-Vue-applikationen
För att visa funktionaliteten i paketet “vue-awesome-paginate” ska vi bygga en Vue-applikation som hämtar data från en extern källa med hjälp av Axios. Dessa data fungerar som ett testfall för vår pagineringsimplementering.
‘Hello World!’};}};
<script setup>
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 JSONPlaceholder</h1>
<div v-if="comments.length">
<div v-for="comment in comments" class="comment">
<p>{{ comment }}</p>
</div>
</div>
<div v-else>
<p>Loading comments...</p>
</div>
</div>
</template>
Den medföljande koden utnyttjar Vue Composition API för att konstruera en reaktiv komponent som hämtar och visar kommentarer från JSONPlaceholder API med hjälp av onBeforeMount livscykelkroken i Vue. Specifikt använder denna komponent Axios för att hämta kommentarsdata innan renderingsprocessen påbörjas. Därefter lagras de hämtade kommentarerna i ref-objektet comments för presentationssyften. Under tiden visas en lämplig platshållare om kommentarerna ännu inte har erhållits.
Integrera Vue-Awesome-Paginate i din Vue-applikation
Du har nu en grundläggande Vue-applikation som hämtar information från ett API, och kan förbättra den genom att införliva paketet vue-awesome-paginate. Denna funktionalitet gör det möjligt att dela upp kommentarer i flera sektioner.
Ersätt innehållet i skriptavsnittet i din App.vue-fil med det medföljande kodavsnittet, som består av ett div-element som innehåller ett id-attribut inställt på “script”, och ett annat div-element inom det som har en v-for loop som itererar genom en array som heter “scripts” med hjälp av track-by-funktionen. Den inre div innehåller också en dynamisk keydown event listener för varje tangenttryckning, samt en click event listener för när någon del av knappen klickas.
<script setup>
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>
“perPage” och “currentPage”. Den förstnämnda används för att lagra det förutbestämda antalet objekt som ska visas på varje sida, medan den senare behåller det aktuella sidnumret inom sekvensen.
Koden genererar en härledd referens som heter displayedComments , som bestämmer omfattningen av kommentarer enligt den aktuella sidans index och antalet kommentarer som visas per sida. Genom att returnera en delmängd av comments array som faller inom detta specificerade intervall, delar den upp kommentarerna mellan olika sidor.
Du bör uppdatera mall avsnittet i din App.vue fil genom att ersätta den med det medföljande kodavsnittet. Detta kommer att säkerställa att layouten förblir konsekvent och visuellt tilltalande över olika skärmstorlekar.
<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholder</h1>
<div v-if="comments.length">
<div v-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>
<div v-else>
<p>Loading comments...</p>
</div>
</div>
</template>
Attributet v-for för rendering av listor i detta mallavsnitt pekar på arrayen displayedComments. Mallen lägger till komponenten vue-awesome-paginate, som utdraget ovan skickar props till. Du kan lära dig mer om dessa och ytterligare rekvisita i paketets officiella dokumentation på GitHub .
När du har tillämpat önskad stil på din applikation kommer den att ge en webbsida med ett utseende som liknar följande:
Klicka på varje numrerad knapp för att se en mängd olika kommentarer som är kopplade till just det valet.
Använd paginering eller infinite scrolling för bättre datablädning
Din nuvarande implementering av paginering i denna Vue-applikation är rudimentär men fungerar som en lämplig grund för hantering av stora datamängder genom antingen paginering eller infinite scrolling-tekniker. Det är viktigt att noggrant utvärdera de specifika kraven för din applikation innan du fattar ett beslut mellan dessa två metoder, eftersom båda har sina egna fördelar och nackdelar.