Jak zaimplementować paginację w aplikacji Vue?

Paginacja pozwala dzielić duże zbiory danych na mniejsze, łatwiejsze w zarządzaniu fragmenty. Paginacja ułatwia użytkownikom poruszanie się po dużych zbiorach danych i znajdowanie poszukiwanych informacji.

Poznaj zawiłości metodologii i uzyskaj praktyczny wgląd w jej integrację z aplikacją Vue, analizując ten ilustracyjny projekt.

Rozpoczęcie pracy z Vue-Awesome-Paginate

Vue-awesome-paginate to potężna i lekka biblioteka paginacji Vue, która upraszcza proces tworzenia stronicowanych wyświetlaczy danych. Zapewnia wszechstronne funkcje, w tym konfigurowalne komponenty, łatwe w użyciu interfejsy API i obsługę różnych scenariuszy paginacji.

Aby zainicjować wykorzystanie “vue-awesome-paginate”, wykonaj następujące polecenie w katalogu projektu za pośrednictwem interfejsu terminala:

 npm install vue-awesome-paginate 

Aby skonfigurować pakiet do użycia w projekcie Vue, wklej dostarczony fragment kodu do pliku src/main.js znajdującego się w katalogu źródłowym projektu.

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

Niniejszy kod integruje i rejestruje pakiet przy użyciu techniki .use() , umożliwiając w ten sposób jego implementację w całej aplikacji. Jednocześnie import pliku CSS jest również wykonywany przez wspomniany blok kodu.

Tworzenie testowej aplikacji Vue

Aby zademonstrować funkcjonalność pakietu “vue-awesome-paginate”, zbudujemy aplikację Vue, która pobiera dane z zewnętrznego źródła za pomocą Axios. Dane te służą jako przypadek testowy dla naszej implementacji paginacji.

‘Hello World!’};}};

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

Dostarczony kod wykorzystuje Vue Composition API do skonstruowania reaktywnego komponentu, który pobiera i wyświetla komentarze z JSONPlaceholder API, wykorzystując onBeforeMount hak cyklu życia Vue. W szczególności komponent ten wykorzystuje Axios do uzyskiwania danych komentarzy przed rozpoczęciem procesu renderowania. Następnie pobrane komentarze są przechowywane w obiekcie comments ref do celów prezentacji. W międzyczasie wyświetlany jest odpowiedni symbol zastępczy, jeśli komentarze nie zostały jeszcze uzyskane.

Integracja Vue-Awesome-Paginate z aplikacją Vue

Masz teraz podstawową aplikację Vue, która pobiera informacje z interfejsu API i możesz ją ulepszyć, włączając pakiet vue-awesome-paginate. Funkcjonalność ta pozwala na podział komentarzy na wiele sekcji.

Zastąp zawartość sekcji script w pliku App.vue dostarczonym fragmentem kodu, który składa się z elementu div zawierającego atrybut id ustawiony na “script” i innego elementu div wewnątrz niego, który ma pętlę v-for iterującą przez tablicę o nazwie “scripts” przy użyciu funkcji track-by. Wewnętrzny element div zawiera również dynamiczny detektor zdarzeń keydown dla każdego naciśnięcia klawisza, a także detektor zdarzeń click dla kliknięcia dowolnej części przycisku.

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

“perPage” i “currentPage”. Pierwsza z nich jest wykorzystywana do przechowywania z góry określonej liczby elementów, które mają być wyświetlane na każdej stronie, podczas gdy druga zachowuje bieżący numer strony w sekwencji.

Kod generuje pochodną referencję o nazwie displayedComments , która określa zakres komentarzy zgodnie z indeksem bieżącej strony i liczbą komentarzy wyświetlanych na stronie. Zwracając podzbiór tablicy comments mieszczący się w tym określonym zakresie, dzieli komentarze między różne strony.

Rzeczywiście, należy zaktualizować sekcję szablonu w pliku App.vue , zastępując ją dostarczonym fragmentem kodu. Zapewni to, że układ pozostanie spójny i atrakcyjny wizualnie na różnych rozmiarach ekranu.

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

Atrybut v-for dla renderowania list w tej sekcji szablonu wskazuje na tablicę displayedComments. Szablon dodaje komponent vue-awesome-paginate, do którego powyższy fragment przekazuje rekwizyty. Możesz dowiedzieć się więcej o tych i dodatkowych rekwizytach w oficjalnej dokumentacji pakietu na GitHub .

Po zastosowaniu żądanego stylu do aplikacji, uzyskasz stronę internetową o wyglądzie przypominającym poniższy:

Kliknij każdy ponumerowany przycisk, aby wyświetlić różne uwagi związane z tym konkretnym wyborem.

Użyj paginacji lub nieskończonego przewijania, aby lepiej przeglądać dane

Obecna implementacja paginacji w tej aplikacji Vue jest podstawowa, ale służy jako odpowiednia podstawa do obsługi dużych zbiorów danych za pomocą technik paginacji lub nieskończonego przewijania. Ważne jest, aby dokładnie ocenić specyficzne wymagania aplikacji przed podjęciem decyzji między tymi dwiema metodami, ponieważ obie mają swój własny zestaw zalet i wad.