Како имплементирати пагинацију у Вуе апликацији

Пагинација вам омогућава да поделите велике скупове података на мање делове којима се лакше управља. Пагинација олакшава корисницима да се крећу великим скуповима података и пронађу информације које траже.

Сазнајте више о техници и како да је примените у Вуе-у са овим примером пројекта.

Почетак рада са Вуе-Авесоме-Пагинате

Вуе-авесоме-пагинате је моћна и лагана Вуе библиотека пагинације која поједностављује процес креирања приказа података са пагинацијом. Пружа свеобухватне функције, укључујући прилагодљиве компоненте, АПИ-је који се лако користе и подршку за различите сценарије пагинације.

Да бисте почели да користите вуе-авесоме-пагинате, инсталирајте пакет тако што ћете покренути ову терминалну команду у директоријуму вашег пројекта:

npm install vue-awesome-paginate

Затим, да бисте конфигурисали пакет да ради у вашој Вуе апликацији, копирајте код испод на срц/маин.јс фајл:

import { createApp } from"vue";
import





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

Овај код увози и региструје пакет са .усе() метод, тако да га можете користити било где у својој апликацији. Пакет за пагинацију долази са ЦСС датотеком, коју блок кода такође увози.

Израда апликације Тест Вуе

Да бисте илустровали како функционише пакет вуе-авесоме-пагинате, направићете Вуе апликацију која приказује пример скупа података. Бићете преузимање података из АПИ-ја са Акиос-ом за ову апликацију.

Копирајте блок кода испод у свој Апп.вуе фајл:

<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>

Овај блок кода користи Вуе Цомпоситион АПИ да се направи компонента. Компонента користи Акиос за преузимање коментара из ЈСОНПлацехолдер АПИ-ја пре него што га Вуе монтира (онБефореМоунт кука). Затим чува коментаре у коментари низ, користећи шаблон за њихово приказивање или поруку за учитавање док коментари не буду доступни.

Интеграција Вуе-Авесоме-Пагинате у вашу Вуе апликацију

Сада имате једноставну Вуе апликацију која преузима податке из АПИ-ја, можете је модификовати да интегришете пакет вуе-авесоме-пагинате. Користићете ову функцију пагинације да поделите коментаре на различите странице.

Заменити скрипта одељак вашег Апп.вуе фајл са овим кодом:

<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>

Овај блок кода додаје још две реактивне референце: по страни и Тренутна страна. Ове референце чувају број ставки за приказ по страници и број тренутне странице, респективно.

Код такође креира израчунати реф под називом дисплаиедЦомментс. Ово израчунава опсег коментара на основу Тренутна страна и по страни вредности. Враћа део коментари низ унутар тог опсега, који ће груписати коментаре на различите странице.

Сада, замените шаблон одељак ваше Апп.вуе датотеке са следећим:

<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>

Тхе в-за атрибут за приказивање листа у овом одељку шаблона указује на дисплаиедЦомментс низ. Шаблон додаје вуе-авесоме-пагинате компонента, којој горњи исечак прослеђује пропс. Можете сазнати више о овим и додатним реквизитима у званичном пакету документацију на ГитХуб-у.

Након стилизовања апликације, требало би да добијете страницу која изгледа овако:

Кликните на свако нумерисано дугме и видећете другачији скуп коментара.

Користите пагинацију или бесконачно померање за боље прегледање података

Сада имате врло основну Вуе апликацију која показује како ефикасно пагинирати податке. Такође можете да користите бесконачно померање за руковање дугим скуповима података у вашој апликацији. Обавезно узмите у обзир потребе своје апликације пре него што изаберете, јер пагинација и бесконачно померање имају предности и недостатке.