Home-theater-designers
Stránkovanie vám umožňuje rozdeliť veľké množiny údajov na menšie, lepšie spravovateľné časti. Stránkovanie uľahčuje používateľom navigáciu vo veľkých súboroch údajov a nájdenie informácií, ktoré hľadajú.
MUO Video dňa POKRAČUJTE V OBSAHU STROJOM
Pomocou tohto vzorového projektu sa dozviete o technike a o tom, ako ju implementovať vo Vue.
Začíname s Vue-Awesome-Paginate
Vue-úžasné-stránkovanie je výkonná a ľahká knižnica stránkovania Vue, ktorá zjednodušuje proces vytvárania zobrazení stránkovaných údajov. Poskytuje komplexné funkcie vrátane prispôsobiteľných komponentov, ľahko použiteľných rozhraní API a podpory pre rôzne scenáre stránkovania.
Ak chcete začať používať vue-awesome-paginate, nainštalujte balík spustením tohto príkazu terminálu v adresári vášho projektu:
npm install vue-awesome-paginate
Potom, aby ste nakonfigurovali balík tak, aby fungoval vo vašej aplikácii Vue, skopírujte nižšie uvedený kód do src/main.js súbor:
najlepší bezplatný správca súborov systému Windows 2018
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");
Tento kód importuje a zaregistruje balík s .use() metódu, takže ju môžete použiť kdekoľvek vo svojej aplikácii. Balík stránkovania sa dodáva so súborom CSS, ktorý blok kódu tiež importuje.
Vytvorenie aplikácie Test Vue
Na ilustráciu toho, ako funguje balík vue-awesome-paginate, si vytvoríte aplikáciu Vue, ktorá zobrazí vzorovú množinu údajov. Ty budeš získavanie údajov z API s Axios pre túto aplikáciu.
Skopírujte blok kódu nižšie do svojho app.vue súbor:
<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>
Tento blok kódu používa Vue Composition API postaviť komponent. Komponent používa Axios na načítanie komentárov z JSONPlaceholder API predtým, ako ho Vue pripojí ( onBeforeMount háčik). Potom uloží komentáre do komentáre pole, pomocou šablóny na ich zobrazenie alebo správu o načítaní, kým nebudú dostupné komentáre.
Integrácia Vue-Awesome-Paginate do vašej aplikácie Vue
Teraz máte jednoduchú aplikáciu Vue, ktorá načítava údaje z API, môžete ju upraviť tak, aby integrovala balík vue-awesome-paginate. Túto funkciu stránkovania použijete na rozdelenie komentárov na rôzne strany.
Vymeňte skript časť vášho app.vue súbor s týmto kódom:
<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>
Tento blok kódu pridáva ďalšie dve reaktívne referencie: na stránku a aktuálna stránka . Tieto referencie ukladajú počet položiek, ktoré sa majú zobraziť na stránke a aktuálne číslo strany.
Kód tiež vytvorí vypočítanú referenciu s názvom zobrazené Komentáre . Toto vypočíta rozsah komentárov na základe aktuálna stránka a na stránku hodnoty. Vracia kúsok z komentáre pole v tomto rozsahu, ktoré zoskupí komentáre na rôzne stránky.
Teraz nahraďte šablóna časť vášho súboru App.vue s nasledujúcim:
ako predvoliť účet Google
<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>
The v-pre atribút pre vykresľovacie zoznamy v tejto sekcii šablón ukazuje na zobrazené Komentáre pole. Šablóna pridáva vue-awesome-paginate komponent, do ktorého úryvok vyššie odovzdáva rekvizity. Viac o týchto a ďalších rekvizitách sa dozviete v oficiálnom balíku dokumentáciu na GitHub .
Po úprave štýlu aplikácie by ste mali dostať stránku, ktorá vyzerá takto:
Kliknite na každé očíslované tlačidlo a uvidíte inú skupinu komentárov.
Použite stránkovanie alebo nekonečné posúvanie na lepšie prehliadanie údajov
Teraz máte veľmi základnú aplikáciu Vue, ktorá ukazuje, ako efektívne stránkovať údaje. Na spracovanie dlhých množín údajov vo vašej aplikácii môžete použiť aj nekonečné posúvanie. Pred výberom nezabudnite zvážiť potreby svojej aplikácie, pretože stránkovanie a nekonečné posúvanie majú svoje výhody a nevýhody.