Kā ieviest lappušu ievietošanu Vue lietojumprogrammā

Lapu sadalīšana ļauj sadalīt lielas datu kopas mazākos, vieglāk pārvaldāmos gabalos. Lapu ievietošana ļauj lietotājiem vieglāk pārvietoties lielajās datu kopās un atrast meklēto informāciju.

Uzziniet par tehniku ​​un to, kā to ieviest Vue, izmantojot šo projekta paraugu.

Darba sākšana ar Vue-Awesome-Paginate

Vue-awesome-paginate ir jaudīga un viegla Vue lappušu bibliotēka, kas vienkāršo lappušu datu displeju izveides procesu. Tas nodrošina visaptverošas funkcijas, tostarp pielāgojamus komponentus, viegli lietojamas API un atbalstu dažādiem lappušu maiņas scenārijiem.

Lai sāktu lietot vue-awesome-paginate, instalējiet pakotni, projekta direktorijā izpildot šo termināļa komandu:

npm install vue-awesome-paginate

Pēc tam, lai konfigurētu pakotni tā, lai tā darbotos jūsu Vue lietojumprogrammā, kopējiet tālāk norādīto kodu uz src/main.js fails:

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

Šis kods importē un reģistrē iepakojumu ar .use() metodi, lai jūs varētu to izmantot jebkurā vietā savā lietojumprogrammā. Lapu veidošanas pakotnē ir CSS fails, kuru arī importē koda bloks.

Lietojumprogrammas Test Vue izveide

Lai ilustrētu, kā darbojas pakotne vue-awesome-paginate, izveidojiet Vue lietotni, kas parāda datu kopas paraugu. Tu būsi datu iegūšana no API ar Axios šai lietotnei.

Kopējiet tālāk esošo koda bloku savā App.vue fails:

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

Šis koda bloks izmanto Vue kompozīcijas API lai izveidotu sastāvdaļu. Komponents izmanto Axios, lai iegūtu komentārus no JSONPlaceholder API, pirms Vue to pievieno (onBeforeMount āķis). Pēc tam tas saglabā komentārus mapē komentāri masīvs, izmantojot veidni, lai tos parādītu, vai ielādes ziņojumu, līdz ir pieejami komentāri.

Vue-Awesome-Paginate integrēšana savā Vue lietotnē

Tagad jums ir vienkārša Vue lietotne, kas iegūst datus no API. Varat to modificēt, lai integrētu pakotni vue-awesome-paginate. Jūs izmantosiet šo lappušu veidošanas funkciju, lai sadalītu komentārus dažādās lapās.

Nomainiet skripts jūsu sadaļa App.vue fails ar šo kodu:

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

Šis koda bloks pievieno vēl divas reaktīvas atsauces: lapā un Pašreizējā lapa. Šajās atsaucēs tiek saglabāts attiecīgi parādāmo vienumu skaits vienā lapā un pašreizējās lapas numurs.

Kods arī izveido aprēķinātu atsauci ar nosaukumu parādīti komentāri. Tas aprēķina komentāru diapazonu, pamatojoties uz Pašreizējā lapa un lapā vērtības. Tas atgriež daļu no komentāri masīvs šajā diapazonā, kas grupēs komentārus dažādās lapās.

Tagad nomainiet veidne sava App.vue faila sadaļā ar šādu informāciju:

<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-par atribūts renderēšanas sarakstiem šajā veidnes sadaļā norāda uz parādīti komentāri masīvs. Veidne pievieno vue-awesome-paginate komponents, kuram iepriekš minētais fragments nodod rekvizītus. Vairāk par šiem un papildu piederumiem varat uzzināt iepakojuma oficiālajā sadaļā dokumentācija vietnē GitHub.

Pēc lietojumprogrammas stila izveides jums vajadzētu iegūt lapu, kas izskatās šādi:

Noklikšķiniet uz katras numurētās pogas, un jūs redzēsit atšķirīgu komentāru kopu.

Labākai datu pārlūkošanai izmantojiet lappušu šķirošanu vai bezgalīgu ritināšanu

Tagad jums ir ļoti vienkārša Vue lietotne, kas parāda, kā efektīvi sakārtot datus. Varat arī izmantot bezgalīgu ritināšanu, lai lietojumprogrammā apstrādātu garas datu kopas. Pirms lietotnes izvēles noteikti apsveriet savas lietotnes vajadzības, jo lappušu skaitam un bezgalīgai ritināšanai ir plusi un mīnusi.