Paginering implementeren in een Vue-applicatie
Met paginering kun je grote gegevenssets opdelen in kleinere, beter hanteerbare brokken. Paginering maakt het makkelijker voor gebruikers om door grote datasets te navigeren en de informatie te vinden die ze zoeken.
Ontdek de fijne kneepjes van de methodologie en krijg praktische inzichten in het integreren ervan in een Vue-applicatie door dit illustratieve project te bekijken.
Aan de slag met Vue-Awesome-Paginate
Vue-awesome-paginate is een krachtige en lichtgewicht Vue-bibliotheek voor paginering die het proces van het maken van gepagineerde gegevensdisplays vereenvoudigt. Het biedt uitgebreide functies, waaronder aanpasbare componenten, eenvoudig te gebruiken API’s en ondersteuning voor verschillende paginatiescenario’s.
Om het gebruik van “vue-awesome-paginate” te starten, voer je het volgende commando uit in de map van het project via een terminalinterface:
npm install vue-awesome-paginate
Om het pakket in te stellen voor gebruik binnen een Vue-project, plakt u het meegeleverde codefragment in het bestand src/main.js in de bronmap van uw project.
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");
De huidige code integreert en registreert het pakket met behulp van de .use() techniek, waardoor het in de gehele applicatie kan worden geïmplementeerd. Tegelijkertijd wordt het importeren van een CSS-bestand ook uitgevoerd door het genoemde codeblok.
De Vue-testapplicatie bouwen
Om de functionaliteit van het pakket “vue-awesome-paginate” te demonstreren, bouwen we een Vue-applicatie die gegevens ophaalt uit een externe bron met behulp van Axios. Deze gegevens dienen als testcase voor onze pagineringimplementatie.
‘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>
De meegeleverde code maakt gebruik van de Vue Composition API om een reactief component te bouwen dat commentaar van de JSONPlaceholder API ophaalt en weergeeft met behulp van de onBeforeMount lifecycle hook van Vue. Specifiek gebruikt deze component Axios om commentaargegevens te verkrijgen voordat het renderproces begint. Vervolgens worden de opgehaalde commentaren opgeslagen in het comments ref object voor presentatiedoeleinden. In de tussentijd wordt een geschikte plaatshouder weergegeven als het commentaar nog niet is verkregen.
Vue-Awesome-Paginate integreren in uw Vue-applicatie
U beschikt nu over een basis Vue-applicatie die informatie ophaalt uit een API, en kunt deze verbeteren door het pakket vue-awesome-paginate op te nemen. Deze functionaliteit maakt het mogelijk om commentaar op te delen in meerdere secties.
Vervang de inhoud van de scriptsectie in uw App.vue-bestand door het bijgeleverde codefragment, dat bestaat uit een div-element met een id-attribuut dat is ingesteld op “script”, en een ander div-element daarbinnen dat een v-for-lus heeft die iteratief door een array genaamd “scripts” gaat met behulp van de track-by-functie. De binnenste div bevat ook een dynamische keydown event listener voor elke toets die wordt ingedrukt, evenals een click event listener voor wanneer er op een deel van de knop wordt geklikt.
<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” en “currentPage”. De eerste wordt gebruikt voor het opslaan van het vooraf bepaalde aantal items dat op elke pagina moet worden weergegeven, terwijl de tweede het huidige paginanummer binnen de reeks bewaart.
De code genereert een afgeleide referentie met de naam displayedComments , die de reikwijdte van het commentaar bepaalt op basis van de huidige pagina-index en het aantal commentaren dat per pagina wordt weergegeven. Door een deelverzameling van de matrix opmerkingen terug te geven die binnen dit opgegeven bereik valt, worden de opmerkingen verdeeld over verschillende pagina’s.
Je moet inderdaad de sectie template in je App.vue bestand bijwerken door het te vervangen door het bijgeleverde codefragment. Dit zorgt ervoor dat de lay-out consistent en visueel aantrekkelijk blijft op verschillende schermformaten.
<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>
Het v-for attribuut voor het renderen van lijsten in dit sjabloononderdeel wijst naar de displayedComments array. De sjabloon voegt het vue-awesome-paginate-component toe, waaraan het bovenstaande fragment props doorgeeft. Je kunt meer leren over deze en andere props in de officiÃ"le documentatie van het pakket op GitHub .
Zodra je de gewenste stijl op je applicatie hebt toegepast, zal het een webpagina opleveren die er ongeveer zo uitziet als hieronder:
Klik op elke genummerde knop om een reeks opmerkingen te bekijken die bij die selectie horen.
Gebruik paginering of oneindig scrollen om beter door gegevens te bladeren
Je huidige implementatie van paginering in deze Vue-applicatie is rudimentair, maar dient als een adequate basis voor het omgaan met grote datasets door middel van ofwel paginering of oneindig scrollen technieken. Het is essentieel om de specifieke vereisten van je applicatie zorgvuldig te evalueren voordat je een keuze maakt tussen deze twee methoden, aangezien beide hun eigen voor- en nadelen hebben.