Lapozás megvalósítása Vue alkalmazásban

A lapozás lehetővé teszi a nagy adatkészletek felosztását kisebb, jobban kezelhető darabokra. A lapozás megkönnyíti a felhasználók számára a nagy adathalmazokban való navigálást és a keresett információk megtalálását.

Ezzel a mintaprojekttel ismerkedjen meg a technikával és a Vue-ban való megvalósításával.

A Vue-Awesome-Paginate használatának megkezdése

Vue-wesome-paginate egy hatékony és könnyű Vue lapozási könyvtár, amely leegyszerűsíti a lapszámozott adatmegjelenítések létrehozásának folyamatát. Átfogó szolgáltatásokat kínál, beleértve a testreszabható összetevőket, könnyen használható API-kat és a különböző lapozási forgatókönyvek támogatását.

A vue-awesome-paginate használatának megkezdéséhez telepítse a csomagot a következő terminálparancs futtatásával a projektkönyvtárban:

npm install vue-awesome-paginate

Ezután a csomag Vue alkalmazásában való működéséhez másolja az alábbi kódot a src/main.js fájl:

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

Ez a kód importálja és regisztrálja a csomagot a .használat() módszerrel, így bárhol használhatja az alkalmazásban. A lapozási csomaghoz tartozik egy CSS fájl, amelyet a kódblokk is importál.

A Test Vue alkalmazás elkészítése

A vue-awesome-paginate csomag működésének szemléltetésére készítsen egy Vue alkalmazást, amely egy mintaadatkészletet jelenít meg. Te leszel adatok lekérése egy API-ból az Axios segítségével ehhez az alkalmazáshoz.

Másolja be az alábbi kódblokkot a sajátjába App.vue fájl:

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

Ez a kódblokk használja a Vue Composition API alkatrész felépítéséhez. Az összetevő az Axios segítségével kéri le a megjegyzéseket a JSONPlaceholder API-ból, mielőtt a Vue felcsatolná (onBeforeMount horog). Ezután a megjegyzéseket a Hozzászólások tömböt használva a sablont a megjelenítésükhöz vagy egy betöltési üzenetet, amíg a megjegyzések nem állnak rendelkezésre.

A Vue-Awesome-Paginate integrálása a Vue alkalmazásba

Most már van egy egyszerű Vue-alkalmazása, amely lekéri az adatokat egy API-ból, és módosíthatja, hogy integrálja a vue-awesome-paginate csomagot. Ezzel az oldalszámozási funkcióval a megjegyzéseket különböző oldalakra oszthatja fel.

Helyettesíteni a forgatókönyv részed App.vue fájl ezzel a kóddal:

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

Ez a kódblokk további két reaktív hivatkozást ad hozzá: oldalanként és aktuális oldal. Ezek a hivatkozások az oldalanként megjelenítendő elemek számát, illetve az aktuális oldalszámot tárolják.

A kód egy kiszámított ref-t is létrehoz, melynek neve megjelenített Megjegyzések. Ez alapján számítja ki a megjegyzések körét aktuális oldal és oldalanként értékeket. Egy szeletet ad vissza a Hozzászólások tömb ezen a tartományon belül, amely a megjegyzéseket különböző oldalakra csoportosítja.

Most cserélje ki a sablon az App.vue fájl szakaszában a következőkkel:

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

A v-for attribútum a renderelő listákhoz ebben a sablon részben rámutat a megjelenített Megjegyzések sor. A sablon hozzáadja a vue-wesome-paginate komponens, amelynek a fenti részlet átadja a kellékeket. Ezekről és a további kellékekről többet megtudhat a csomag hivatalos oldalán dokumentációt a GitHubon.

Az alkalmazás stílusának kialakítása után egy oldalt kell kapnia, amely így néz ki:

Kattintson az egyes számozott gombokra, és különböző megjegyzéseket fog látni.

Használja az oldalszámozást vagy a végtelen görgetést a jobb adatböngészés érdekében

Most már van egy nagyon egyszerű Vue alkalmazás, amely bemutatja, hogyan lehet hatékonyan lapozni az adatokat. Végtelen görgetést is használhat hosszú adatkészletek kezelésére az alkalmazásban. A választás előtt mindenképpen fontolja meg az alkalmazás igényeit, mivel az oldalszámozásnak és a végtelen görgetésnek vannak előnyei és hátrányai.