Lehekülgede kasutamine Vue rakenduses

Lehtede lehitsemine võimaldab jagada suured andmekogumid väiksemateks, paremini hallatavateks tükkideks. Lehtede lehitsemine hõlbustab kasutajatel suurtes andmekogumites navigeerimist ja otsitava teabe leidmist.

Selle näidisprojekti abil saate teada tehnika ja selle Vue's rakendamise kohta.

Vue-Awesome-Paginate'iga alustamine

Vue-awesome-paginate on võimas ja kerge Vue lehekülgede jagamise teek, mis lihtsustab leheküljeliste andmekuvarite loomise protsessi. See pakub kõikehõlmavaid funktsioone, sealhulgas kohandatavaid komponente, hõlpsasti kasutatavaid API-sid ja tuge erinevatele lehekülgede muutmise stsenaariumidele.

Vue-awesome-paginate kasutamise alustamiseks installige pakett, käivitades oma projekti kataloogis selle terminali käsu:

npm install vue-awesome-paginate

Seejärel kopeerige allolev kood, et konfigureerida pakett oma Vue rakenduses töötama src/main.js fail:

import { createApp } from"vue";
import App from





instagram viewer

"./App.vue";
import VueAwesomePaginate from"vue-awesome-paginate";
import"vue-awesome-paginate/dist/style.css";
createApp(App).use(VueAwesomePaginate).mount("#app");

See kood impordib ja registreerib paketi rakendusega .use() meetodit, nii et saate seda kasutada kõikjal oma rakenduses. Leheküljepaketiga on kaasas CSS-fail, mille koodiplokk ka impordib.

Rakenduse Test Vue loomine

Paketi vue-awesome-paginate toimimise illustreerimiseks loote Vue rakenduse, mis kuvab näidisandmestiku. Sa saad olema andmete toomine API-st koos Axiosega selle rakenduse jaoks.

Kopeerige allolev koodiplokk oma App.vue fail:

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

See koodiplokk kasutab Vue Composition API komponendi ehitamiseks. Komponent kasutab Axiost kommentaaride toomiseks JSONPlaceholder API-st, enne kui Vue selle ühendab (onBeforeMount konks). Seejärel salvestab see kommentaarid jaotisesse kommentaarid massiivi, kasutades nende kuvamiseks malli või laadimissõnumit, kuni kommentaarid on saadaval.

Vue-Awesome-Paginate'i integreerimine oma Vue rakendusse

Nüüd on teil lihtne Vue rakendus, mis hangib andmeid API-st. Saate seda muuta, et integreerida pakett vue-awesome-paginate. Kasutate seda lehekülgede muutmise funktsiooni, et jagada kommentaarid erinevatele lehtedele.

Asendage stsenaarium osa teie App.vue faili selle koodiga:

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

See koodiplokk lisab veel kaks reaktiivset viidet: lehel ja Käesolev lehekülg. Need viited salvestavad vastavalt kuvatavate üksuste arvu lehel ja praeguse lehekülje numbri.

Kood loob ka arvutatud viite nimega kuvatud kommentaarid. See arvutab kommentaaride vahemiku põhjal Käesolev lehekülg ja lehel väärtused. See tagastab lõigu kommentaarid massiivi selles vahemikus, mis rühmitab kommentaarid erinevatele lehtedele.

Nüüd asendage malli teie faili App.vue jaotises on järgmine teave:

<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-eest atribuut renderdusloendite jaoks selles malli jaotises osutab kuvatud kommentaarid massiivi. Mall lisab vue-awesome-paginate komponent, millele ülaltoodud väljavõte annab rekvisiidid. Nende ja täiendavate rekvisiitide kohta saate lisateavet paketi ametlikust osast dokumentatsioon GitHubis.

Pärast rakenduse stiili kujundamist peaksite saama lehe, mis näeb välja selline:

Klõpsake igal nummerdatud nupul ja näete erinevat kommentaaride komplekti.

Parema andmete sirvimiseks kasutage lehekülgede jagamist või lõpmatut kerimist

Nüüd on teil väga lihtne Vue rakendus, mis näitab, kuidas andmeid tõhusalt lehekülgedega jagada. Saate kasutada ka lõputut kerimist, et hallata oma rakenduses pikki andmekogumeid. Enne rakenduse valimist kaaluge kindlasti oma rakenduse vajadusi, kuna lehekülgedel ja lõputul kerimisel on plusse ja miinuseid.