Jak implementovat stránkování v aplikaci Vue

Stránkování vám umožňuje rozdělit velké soubory dat na menší, lépe spravovatelné části. Stránkování usnadňuje uživatelům navigaci ve velkých souborech dat a hledání informací, které hledají.

V tomto ukázkovém projektu se dozvíte o technice ao tom, jak ji implementovat ve Vue.

Začínáme s Vue-Awesome-Paginate

Vue-úžasné-stránkování je výkonná a odlehčená knihovna stránkování Vue, která zjednodušuje proces vytváření zobrazení stránkovaných dat. Poskytuje komplexní funkce, včetně přizpůsobitelných komponent, snadno použitelných rozhraní API a podpory pro různé scénáře stránkování.

Chcete-li začít používat vue-awesome-paginate, nainstalujte balíček spuštěním tohoto příkazu terminálu v adresáři projektu:

npm install vue-awesome-paginate

Poté, abyste nakonfigurovali balíček tak, aby fungoval ve vaší aplikaci Vue, zkopírujte níže uvedený kód do src/main.js soubor:

import { createApp } from"vue";
import App from"./App.vue";
import VueAwesomePaginate from"vue-awesome-paginate";
import"vue-awesome-paginate/dist/style.css";





instagram viewer
createApp(App).use(VueAwesomePaginate).mount("#app");

Tento kód importuje a zaregistruje balíček s .použití() metodu, takže ji můžete použít kdekoli ve své aplikaci. Stránkovací balíček je dodáván se souborem CSS, který blok kódu také importuje.

Vytvoření aplikace Test Vue

Abyste ilustrovali, jak balíček vue-awesome-paginate funguje, vytvoříte aplikaci Vue, která zobrazí ukázkovou datovou sadu. Budete načítání dat z API s Axios pro tuto aplikaci.

Zkopírujte níže uvedený blok kódu do svého App.vue soubor:

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

Tento blok kódu používá Vue Composition API postavit součástku. Komponenta používá Axios k načítání komentářů z JSONPlaceholder API předtím, než ji Vue připojí (onBeforeMount háček). Poté uloží komentáře do komentáře pole, pomocí šablony k jejich zobrazení nebo načítání zprávy, dokud nebudou k dispozici komentáře.

Integrace Vue-Awesome-Paginate do vaší aplikace Vue

Nyní máte jednoduchou aplikaci Vue, která načítá data z API, můžete ji upravit tak, aby integrovala balíček vue-awesome-paginate. Tuto funkci stránkování využijete k rozdělení komentářů na různé stránky.

Nahradit skript část vašeho App.vue soubor s tímto kódem:

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

Tento blok kódu přidává další dvě reaktivní reference: na stránku a aktuální stránka. Tyto odkazy ukládají počet položek k zobrazení na stránce a číslo aktuální stránky.

Kód také vytvoří vypočítaný ref s názvem zobrazené komentáře. Tím se vypočítá rozsah komentářů na základě aktuální stránka a na stránku hodnoty. Vrací část komentáře pole v tomto rozsahu, které seskupí komentáře na různé stránky.

Nyní vyměňte šablona části vašeho souboru App.vue s následujícím:

<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-pro atribut pro vykreslovací seznamy v této části šablony ukazuje na zobrazené komentáře pole. Šablona přidá vue-awesome-pageate komponenta, do které výše uvedený úryvek předává rekvizity. Více o těchto a dalších rekvizitách se můžete dozvědět na oficiálních stránkách balíčku dokumentaci na GitHubu.

Po nastylování aplikace byste měli získat stránku, která vypadá takto:

Klikněte na každé očíslované tlačítko a uvidíte jinou sadu komentářů.

Pro lepší procházení dat použijte stránkování nebo nekonečné posouvání

Nyní máte velmi základní aplikaci Vue, která ukazuje, jak efektivně stránkovat data. Můžete také použít nekonečné posouvání ke zpracování dlouhých datových sad ve vaší aplikaci. Před výběrem se ujistěte, že jste zvážili potřeby své aplikace, protože stránkování a nekonečné posouvání mají své klady i zápory.