Home-theater-designers
Paginacija vam omogućuje da velike skupove podataka podijelite u manje dijelove kojima se lakše upravlja. Označavanje stranica olakšava korisnicima navigaciju velikim skupovima podataka i pronalaženje informacija koje traže.
MUO Video dana POMICI SE ZA NASTAVAK SA SADRŽAJEM
Naučite više o tehnici i kako je implementirati u Vue uz ovaj primjer projekta.
Početak rada s Vue-Awesome-Paginate
Vue-strašno-paginiraj je moćna i lagana Vue knjižnica za paginaciju koja pojednostavljuje proces stvaranja paginiranih prikaza podataka. Pruža sveobuhvatne značajke, uključujući prilagodljive komponente, API-je jednostavne za korištenje i podršku za različite scenarije označavanja stranica.
Da biste počeli koristiti vue-awesome-paginate, instalirajte paket pokretanjem ove naredbe terminala u vašem direktoriju projekta:
npm install vue-awesome-paginate
Zatim, da biste konfigurirali paket za rad u vašoj Vue aplikaciji, kopirajte donji kod u src/main.js datoteka:
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");
Ovaj kod uvozi i registrira paket s .koristiti() način, tako da ga možete koristiti bilo gdje u svojoj aplikaciji. Paket za označavanje stranica dolazi s CSS datotekom, koju blok koda također uvozi.
pronaći domenu i raspon kalkulatora funkcija
Izrada aplikacije Test Vue
Da biste ilustrirali kako funkcionira paket vue-awesome-paginate, izradit ćete aplikaciju Vue koja prikazuje ogledni skup podataka. Bit ćeš dohvaćanje podataka iz API-ja s Axiosom za ovu aplikaciju.
Kopirajte donji blok koda u svoj app.vue datoteka:
<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>
Ovaj blok koda koristi Vue Composition API za izgradnju komponente. Komponenta koristi Axios za dohvaćanje komentara iz API-ja JSONPlaceholder prije nego što je Vue montira ( onBeforeMount kuka). Zatim pohranjuje komentare u komentari polje, koristeći predložak za njihov prikaz ili poruku za učitavanje dok komentari ne budu dostupni.
kako resetirati daljinski upravljač roku
Integracija Vue-Awesome-Paginate u vašu Vue aplikaciju
Sada imate jednostavnu aplikaciju Vue koja dohvaća podatke iz API-ja, možete je modificirati da integrira paket vue-awesome-paginate. Koristit ćete ovu značajku označavanja stranica da biste podijelili komentare na različite stranice.
Zamijenite skripta dio vašeg app.vue datoteka s ovim kodom:
<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>
Ovaj blok koda dodaje još dvije reaktivne reference: po stranici i Trenutna stranica . Ove reference pohranjuju broj stavki za prikaz po stranici i trenutni broj stranice.
Kod također stvara izračunatu ref prikazaniKomentari . Ovo izračunava raspon komentara na temelju Trenutna stranica i po stranici vrijednosti. Vraća dio od komentari niz unutar tog raspona, koji će grupirati komentare na različite stranice.
Sada zamijenite šablona odjeljak vaše App.vue datoteke sa sljedećim:
ne može se povezati s internetom Windows 7
<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-za atribut za iscrtavanje popisa u ovom odjeljku predloška ukazuje na prikazaniKomentari niz. Predložak dodaje vue-awesome-paginate komponenta, kojoj gornji isječak prosljeđuje rekvizite. Više o ovim i dodatnim rekvizitima možete saznati u službenom paketu dokumentacija na GitHubu .
Nakon oblikovanja vaše aplikacije, trebali biste dobiti stranicu koja izgleda ovako:
Kliknite svaki numerirani gumb i vidjet ćete drugačiji skup komentara.
Koristite numeriranje stranica ili beskonačno pomicanje za bolje pregledavanje podataka
Sada imate vrlo osnovnu aplikaciju Vue koja pokazuje kako učinkovito paginirati podatke. Također možete koristiti beskonačno pomicanje za rukovanje dugim skupovima podataka u vašoj aplikaciji. Provjerite jeste li razmotrili potrebe svoje aplikacije prije nego što odaberete, jer označavanje stranica i beskonačno pomicanje imaju prednosti i nedostatke.