כיצד ליישם עימוד ביישום Vue

עימוד מאפשר לך לחלק מערכי נתונים גדולים לנתחים קטנים יותר וניתנים לניהול. עימוד מקל על המשתמשים לנווט בערכות נתונים גדולות ולמצוא את המידע שהם מחפשים.

למד על הטכניקה וכיצד ליישם אותה ב-Vue, עם פרויקט לדוגמה זה.

תחילת העבודה עם Vue-Awesome-Paginate

Vue-awesome-pagete היא ספריית עימוד עוצמתית וקלת משקל של Vue המפשטת את התהליך של יצירת תצוגות נתונים מעומדים. הוא מספק תכונות מקיפות, כולל רכיבים הניתנים להתאמה אישית, ממשקי API קלים לשימוש ותמיכה בתרחישי עימוד שונים.

כדי להתחיל להשתמש ב- vue-awesome-paginate, התקן את החבילה על ידי הפעלת פקודת מסוף זו בספריית הפרויקט שלך:

npm install vue-awesome-paginate

לאחר מכן, כדי להגדיר את החבילה כך שתעבוד באפליקציית Vue שלך, העתק את הקוד למטה אל src/main.js קוֹבֶץ:

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

קוד זה מייבא ורושם את החבילה עם .להשתמש()

השיטה, כך שתוכל להשתמש בה בכל מקום ביישום שלך. חבילת העימוד מגיעה עם קובץ CSS, שגם בלוק הקוד מייבא.

בניית אפליקציית Test Vue

כדי להמחיש כיצד פועלת חבילת vue-awesome-pagete, תבנה אפליקציית Vue המציגה מערך נתונים לדוגמה. אתה תהיה שליפת נתונים מ-API עם Axios עבור האפליקציה הזו.

העתק את גוש הקוד למטה לתוך שלך App.vue קוֹבֶץ:

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

בלוק קוד זה משתמש ה-Vue Composition API לבנות רכיב. הרכיב משתמש ב-Axios כדי להביא הערות מה-API של JSONPlaceholder לפני ש-Vue מעלה אותו (onBeforeMount וו). לאחר מכן הוא מאחסן את ההערות ב- הערות מערך, באמצעות התבנית כדי להציג אותם או הודעת טעינה עד שההערות יהיו זמינות.

שילוב Vue-Awesome-Paginate באפליקציית Vue שלך

עכשיו יש לך אפליקציית Vue פשוטה שמביאה נתונים מ-API, אתה יכול לשנות אותה כדי לשלב את חבילת vue-awesome-pagete. תשתמש בתכונת עימוד זו כדי לחלק את ההערות לדפים שונים.

החלף את ה תַסרִיט הקטע שלך App.vue קובץ עם הקוד הזה:

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

בלוק קוד זה מוסיף עוד שתי הפניות תגובתיות: לכל עמוד ו העמוד הנוכחי. הפניות אלה מאחסנות את מספר הפריטים שיש להציג בכל עמוד ואת מספר העמוד הנוכחי, בהתאמה.

הקוד גם יוצר ר"פ מחושב בשם הוצגו הערות. זה מחשב את טווח ההערות על סמך ה העמוד הנוכחי ו לכל עמוד ערכים. זה מחזיר פרוסה מה הערות מערך בטווח זה, שיקבץ את ההערות לדפים שונים.

עכשיו, החלף את תבנית בקובץ App.vue שלך ​​עם הפרטים הבאים:

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

ה v-for תכונה לעיבוד רשימות בקטע תבנית זה מצביע על הוצגו הערות מַעֲרָך. התבנית מוסיפה את ה vue-awesome-pagete רכיב, שהקטע שלמעלה מעביר אליו אביזרים. אתה יכול ללמוד עוד על אביזרים אלה ועל אביזרים נוספים ברשימה של החבילה תיעוד ב-GitHub.

לאחר עיצוב האפליקציה שלך, אתה אמור לקבל דף שנראה כך:

לחץ על כל כפתור ממוספר, ותראה קבוצה אחרת של הערות.

השתמש בעידון או בגלילה אינסופית לגלישה טובה יותר בנתונים

כעת יש לך אפליקציית Vue בסיסית מאוד שמדגימה כיצד לעייפ נתונים ביעילות. אתה יכול גם להשתמש בגלילה אינסופית כדי לטפל במערכי נתונים ארוכים ביישום שלך. הקפד לשקול את הצרכים של האפליקציה שלך לפני הבחירה, שכן לעימוד ולגלילה אינסופית יש יתרונות וחסרונות.