Sivutuksen käyttöönotto Vue-sovelluksessa

Sivuttamisen avulla voit jakaa suuret tietojoukot pienempiin, paremmin hallittaviin osiin. Sivutus helpottaa käyttäjien navigointia suurissa tietojoukoissa ja etsimäänsä tiedon löytämistä.

Opi tekniikasta ja sen toteuttamisesta Vuessa tämän esimerkkiprojektin avulla.

Vue-Awesome-Paginaten käytön aloittaminen

Vue-awesome-sivuta on tehokas ja kevyt Vue-sivutuskirjasto, joka yksinkertaistaa sivuttujen datanäyttöjen luomista. Se tarjoaa kattavia ominaisuuksia, mukaan lukien mukautettavat komponentit, helppokäyttöiset sovellusliittymät ja tuen erilaisille sivutusskenaarioille.

Aloita vue-awesome-paginaten käyttö asentamalla paketti suorittamalla tämä päätekomento projektihakemistossasi:

npm install vue-awesome-paginate

Määritä sitten paketti toimimaan Vue-sovelluksessasi kopioimalla alla oleva koodi tiedostoon src/main.js tiedosto:

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

Tämä koodi tuo ja rekisteröi paketin .käyttää() menetelmää, joten voit käyttää sitä missä tahansa sovelluksessasi. Sivutuspaketin mukana tulee CSS-tiedosto, jonka koodilohko myös tuo.

Test Vue -sovelluksen rakentaminen

Havainnollistaaksesi, kuinka vue-awesome-paginate-paketti toimii, rakennat Vue-sovelluksen, joka näyttää esimerkkitietojoukon. Tulet olemaan tietojen hakeminen API: sta Axiosin avulla tälle sovellukselle.

Kopioi alla oleva koodilohko omallesi App.vue tiedosto:

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

Tämä koodilohko käyttää Vue Composition API komponentin rakentamiseen. Komponentti käyttää Axiosta kommenttien hakemiseen JSONPlaceholder API: sta ennen kuin Vue asentaa sen (onBeforeMount koukku). Sitten se tallentaa kommentit -kansioon kommentteja taulukkoa, käyttämällä mallia niiden näyttämiseen tai latausviestiä, kunnes kommentteja on saatavilla.

Vue-Awesome-Paginaten integrointi Vue-sovellukseesi

Nyt sinulla on yksinkertainen Vue-sovellus, joka hakee tietoja API: sta. Voit muokata sitä integroidaksesi vue-awesome-paginate-paketin. Voit käyttää tätä sivutusominaisuutta jakaaksesi kommentit eri sivuille.

Korvata käsikirjoitus osa sinun App.vue tiedosto tällä koodilla:

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

Tämä koodilohko lisää kaksi reaktiivista viittausta: per sivu ja tämänhetkinen sivu. Nämä viittaukset tallentavat sivua kohti näytettävien kohteiden määrän ja nykyisen sivunumeron.

Koodi luo myös lasketun viitenumeron nimeltä näytetäänKommentit. Tämä laskee kommenttien alueen tämänhetkinen sivu ja per sivu arvot. Se palauttaa siivu kommentteja alueella, joka ryhmittelee kommentit eri sivuille.

Vaihda nyt sapluuna App.vue-tiedostosi osa, jossa on seuraavat tiedot:

<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-for attribuutti hahmonnusluetteloille tässä malliosassa osoittaa näytetäänKommentit joukko. Malli lisää vue-awesome-paginate komponentti, jolle yllä oleva katkelma välittää rekvisiitta. Voit oppia lisää näistä ja muista rekvisiittauksista paketin virallisessa lehdessä dokumentaatio GitHubissa.

Kun olet muotoillut sovelluksesi, sinun pitäisi saada sivu, joka näyttää tältä:

Napsauta kutakin numeropainiketta, niin näet erilaiset kommentit.

Käytä sivutusta tai loputonta vierittämistä parantaaksesi tietojen selailua

Sinulla on nyt erittäin yksinkertainen Vue-sovellus, joka osoittaa, kuinka tehokkaasti sivuttaa tiedot. Voit myös käyttää ääretöntä vierittämistä käsitelläksesi pitkiä tietojoukkoja sovelluksessasi. Muista ottaa huomioon sovelluksesi tarpeet ennen valintaa, sillä sivutuksella ja loputtomalla vierityksellä on hyvät ja huonot puolensa.