Kaip įdiegti puslapių spausdinimą „Vue“ programoje

Puslapių spausdinimas leidžia padalyti didelius duomenų rinkinius į mažesnius, lengviau valdomus gabalus. Puslapiai leidžia vartotojams lengviau naršyti didelius duomenų rinkinius ir rasti ieškomą informaciją.

Sužinokite apie šią techniką ir kaip ją įdiegti Vue naudodami šį pavyzdinį projektą.

Darbo su „Vue-Awesome-Paginate“ pradžia

Žiūrėk-nuostabu-paginate yra galinga ir lengva Vue puslapių numeravimo biblioteka, kuri supaprastina puslapių duomenų rodymo kūrimo procesą. Jame teikiamos išsamios funkcijos, įskaitant tinkinamus komponentus, paprastas naudoti API ir įvairių puslapių rūšiavimo scenarijų palaikymą.

Norėdami pradėti naudoti vue-awesome-paginate, įdiekite paketą vykdydami šią terminalo komandą savo projekto kataloge:

npm install vue-awesome-paginate

Tada, norėdami sukonfigūruoti paketą, kad jis veiktų jūsų „Vue“ programoje, nukopijuokite toliau esantį kodą į src/main.js failas:

import { createApp } 





instagram viewer

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");

Šis kodas importuoja ir registruoja pakuotę su .use() metodą, todėl galite jį naudoti bet kurioje programos vietoje. Puslapių rūšiavimo pakete yra CSS failas, kurį kodų blokas taip pat importuoja.

„Test Vue“ programos kūrimas

Norėdami parodyti, kaip veikia paketas „vue-wesome-paginate“, sukursite „Vue“ programą, kurioje bus rodomas duomenų rinkinio pavyzdys. Tu būsi duomenų gavimas iš API su Axios šiai programai.

Nukopijuokite žemiau esantį kodo bloką į savo App.vue failas:

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

Šis kodų blokas naudoja „Vue Composition“ API sukurti komponentą. Komponentas naudoja „Axios“, kad gautų komentarus iš JSONPlaceholder API prieš jį prijungdamas „Vue“ (onBeforeMount kablys). Tada jis išsaugo komentarus komentarus masyvą, naudodami šabloną, kad jie būtų rodomi, arba įkėlimo pranešimą, kol bus galima komentuoti.

„Vue-Awesome-Paginate“ integravimas į „Vue“ programą

Dabar turite paprastą „Vue“ programą, kuri gauna duomenis iš API. Galite ją modifikuoti, kad integruotumėte paketą „vue-wesome-paginate“. Naudosite šią puslapių rūšiavimo funkciją, kad suskirstytumėte komentarus į skirtingus puslapius.

Pakeiskite scenarijus jūsų skyrius App.vue failas su šiuo kodu:

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

Šis kodo blokas prideda dar dvi reaktyviąsias nuorodas: per Puslapį ir Dabartinis puslapis. Šiose nuorodose saugomas atitinkamai rodomų elementų skaičius puslapyje ir dabartinis puslapio numeris.

Kodas taip pat sukuria apskaičiuotą nuorodą pavadinimu rodomi komentarai. Taip apskaičiuojamas komentarų diapazonas pagal Dabartinis puslapis ir per Puslapį vertybes. Tai grąžina gabalėlį komentarus masyvas šiame diapazone, kuris sugrupuos komentarus į skirtingus puslapius.

Dabar pakeiskite šabloną „App.vue“ failo skiltį su tokia informacija:

<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-už atributas atvaizdavimo sąrašams Šiame šablono skyriuje nurodo rodomi komentarai masyvas. Šablonas prideda vue-wesome-paginate komponentas, kuriam aukščiau pateiktas fragmentas perduoda rekvizitus. Daugiau apie šiuos ir kitus rekvizitus galite sužinoti oficialiame paketo puslapyje GitHub dokumentaciją.

Sukūrę programos stilių, turėtumėte gauti puslapį, kuris atrodo taip:

Spustelėkite kiekvieną sunumeruotą mygtuką ir pamatysite skirtingą komentarų rinkinį.

Norėdami geriau naršyti duomenis, naudokite puslapių skyrimą arba begalinį slinkimą

Dabar turite labai paprastą „Vue“ programą, kuri parodo, kaip efektyviai rūšiuoti duomenis. Taip pat galite naudoti begalinį slinkimą, kad galėtumėte apdoroti ilgus duomenų rinkinius savo programoje. Prieš rinkdamiesi būtinai atsižvelkite į programos poreikius, nes puslapių numeravimas ir begalinis slinkimas turi privalumų ir trūkumų.