Como implementar a paginação numa aplicação Vue
A paginação permite-lhe dividir grandes conjuntos de dados em partes mais pequenas e mais fáceis de gerir. A paginação facilita aos utilizadores a navegação em grandes conjuntos de dados e a procura da informação que procuram.
Explore os meandros da metodologia e obtenha conhecimentos práticos sobre a sua integração numa aplicação Vue, examinando este projeto ilustrativo.
Introdução ao Vue-Awesome-Paginate
O Vue-awesome-paginate é uma biblioteca de paginação Vue poderosa e leve que simplifica o processo de criação de exibições de dados paginados. Ela fornece recursos abrangentes, incluindo componentes personalizáveis, APIs fáceis de usar e suporte para vários cenários de paginação.
Para iniciar a utilização de “vue-awesome-paginate”, execute o seguinte comando no diretório do projeto através de uma interface de terminal:
npm install vue-awesome-paginate
Para configurar o pacote para utilização num projeto Vue, cole o fragmento de código fornecido no ficheiro src/main.js localizado no diretório de origem do seu projeto.
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");
O presente código integra e regista o pacote utilizando a técnica .use() , permitindo assim a sua implementação em toda a aplicação. Em simultâneo, a importação de um ficheiro CSS é também executada pelo referido bloco de código.
Construir a aplicação Vue de teste
Para demonstrar a funcionalidade do pacote “vue-awesome-paginate”, vamos construir uma aplicação Vue que recupera dados de uma fonte externa utilizando o Axios. Esses dados servem como um caso de teste para nossa implementação de paginação.
‘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>
O código fornecido aproveita a API de composição do Vue para construir um componente reativo que recupera e exibe comentários da API JSONPlaceholder utilizando o gancho de ciclo de vida onBeforeMount do Vue. Especificamente, este componente emprega Axios para obter dados de comentários antes do início do processo de renderização. Posteriormente, os comentários obtidos são armazenados no objeto comments ref para efeitos de apresentação. Entretanto, é apresentado um marcador de posição adequado se os comentários ainda não tiverem sido obtidos.
Integrando o Vue-Awesome-Paginate em seu aplicativo Vue
Agora você possui um aplicativo Vue básico que recupera informações de uma API e pode aprimorá-lo incorporando o pacote vue-awesome-paginate. Esta funcionalidade permite a divisão de comentários em várias secções.
Substitua o conteúdo da secção de script no seu ficheiro App.vue pelo excerto de código fornecido, que consiste num elemento div com um atributo id definido como “script” e outro elemento div no seu interior que tem um loop v-for a iterar através de uma matriz chamada “scripts” utilizando a função track-by. A div interna também inclui um ouvinte de evento keydown dinâmico para cada tecla pressionada, bem como um ouvinte de evento click para quando qualquer parte do botão é clicada.
<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” e “currentPage”. O primeiro é utilizado para armazenar a quantidade pré-determinada de itens a apresentar em cada página, enquanto o segundo mantém o número da página atual dentro da sequência.
O código gera uma referência derivada chamada displayedComments , que determina o âmbito dos comentários de acordo com o índice da página atual e o número de comentários apresentados por página. Ao devolver um subconjunto da matriz comments que se encontra dentro deste intervalo especificado, divide os comentários entre várias páginas.
De facto, deve atualizar a secção template no seu ficheiro App.vue substituindo-a pelo fragmento de código fornecido. Isto irá garantir que o layout se mantém consistente e visualmente apelativo em diferentes tamanhos de ecrã.
<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>
O atributo v-for para a renderização de listas nesta secção do modelo aponta para a matriz displayedComments. O template adiciona o componente vue-awesome-paginate, para o qual o snippet acima passa props. Você pode aprender mais sobre essas e outras props na documentação oficial do pacote no GitHub .
Depois de aplicar o estilo desejado ao seu aplicativo, ele produzirá uma página da Web com uma aparência semelhante à seguinte:
Clique em cada botão numerado para ver uma gama diversificada de observações associadas a essa seleção específica.
Use paginação ou rolagem infinita para uma melhor navegação de dados
Sua implementação atual de paginação neste aplicativo Vue é rudimentar, mas serve como uma base adequada para lidar com grandes conjuntos de dados por meio de técnicas de paginação ou rolagem infinita. É essencial avaliar cuidadosamente os requisitos específicos da sua aplicação antes de tomar uma decisão entre estes dois métodos, uma vez que ambos possuem o seu próprio conjunto de vantagens e desvantagens.