วิธีการใช้การแบ่งหน้าในแอปพลิเคชัน Vue

การแบ่งหน้าช่วยให้คุณสามารถแบ่งชุดข้อมูลขนาดใหญ่ออกเป็นส่วนย่อยๆ ที่สามารถจัดการได้มากขึ้น การแบ่งหน้าทำให้ผู้ใช้สามารถนำทางชุดข้อมูลขนาดใหญ่และค้นหาข้อมูลที่ต้องการได้ง่ายขึ้น

สำรวจความซับซ้อนของวิธีการและรับข้อมูลเชิงลึกเชิงปฏิบัติเกี่ยวกับการบูรณาการเข้ากับแอปพลิเคชัน Vue โดยการตรวจสอบโครงการตัวอย่างนี้

เริ่มต้นใช้งาน Vue-Awesome-Paginate

Vue-awesome-paginate เป็นไลบรารีการแบ่งหน้า 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");

รหัสปัจจุบันจะรวมและลงทะเบียนแพ็คเกจโดยใช้เทคนิค .use() ดังนั้นจึงทำให้สามารถนำไปใช้ได้ทั่วทั้งแอปพลิเคชัน ในขณะเดียวกัน การนำเข้าไฟล์ CSS ก็ดำเนินการโดยบล็อคโค้ดดังกล่าวเช่นกัน

การสร้างแอปพลิเคชัน Test Vue

เพื่อสาธิตการทำงานของแพ็คเกจ “vue-awesome-paginate” เราจะสร้างแอปพลิเคชัน Vue ซึ่งจะดึงข้อมูลจากแหล่งภายนอกโดยใช้ Axios ข้อมูลนี้ทำหน้าที่เป็นกรณีทดสอบสำหรับการใช้งานการแบ่งหน้าของเรา

‘สวัสดีชาวโลก!’};}};

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

โค้ดที่ให้มาใช้ประโยชน์จาก Vue Composition API เพื่อสร้างส่วนประกอบแบบรีแอกทีฟที่ดึงและแสดงความคิดเห็นจาก JSONPlaceholder API โดยใช้วงจรการใช้งาน onBeforeMount ของ Vue โดยเฉพาะอย่างยิ่ง องค์ประกอบนี้ใช้ Axios เพื่อรับข้อมูลความคิดเห็นก่อนที่กระบวนการเรนเดอร์จะเริ่มขึ้น ต่อจากนั้น ความคิดเห็นที่ดึงมาจะถูกจัดเก็บไว้ในวัตถุอ้างอิง ความคิดเห็น เพื่อวัตถุประสงค์ในการนำเสนอ ในระหว่างนี้ พื้นที่ที่สำรองไว้ที่เหมาะสมจะปรากฏขึ้นหากยังไม่ได้รับความคิดเห็น

การรวม Vue-Awesome-Paginate เข้ากับแอป Vue ของคุณ

ขณะนี้คุณมีแอปพลิเคชัน Vue พื้นฐานที่ดึงข้อมูลจาก API และอาจปรับปรุงได้โดยการรวมแพ็คเกจ vue-awesome-paginate ฟังก์ชั่นนี้ช่วยให้สามารถแบ่งความคิดเห็นออกเป็นหลายส่วนได้

โปรดแทนที่เนื้อหาของส่วนสคริปต์ในไฟล์ App.vue ของคุณด้วยข้อมูลโค้ดที่ให้มา ซึ่งประกอบด้วยองค์ประกอบ div ที่มีแอตทริบิวต์ id ที่ตั้งค่าเป็น"script"และองค์ประกอบ div อื่นภายในนั้นที่มีการวนซ้ำ v-for ผ่านอาร์เรย์ที่เรียกว่า"สคริปต์"โดยใช้ฟังก์ชันติดตามโดย div ภายในยังรวม Listener เหตุการณ์การกดคีย์ลงแบบไดนามิกสำหรับการกดปุ่มแต่ละครั้ง เช่นเดียวกับ Listener เหตุการณ์การคลิกเมื่อส่วนใดส่วนหนึ่งของปุ่มถูกคลิก

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

“ต่อเพจ” และ “หน้าปัจจุบัน” แบบแรกใช้สำหรับจัดเก็บจำนวนรายการที่กำหนดไว้ล่วงหน้าที่จะแสดงในแต่ละหน้า ในขณะที่แบบหลังจะเก็บหมายเลขหน้าปัจจุบันไว้ภายในลำดับ

โค้ดจะสร้างข้อมูลอ้างอิงที่เรียกว่า displaysComments ซึ่งกำหนดขอบเขตของความคิดเห็นตามดัชนีของหน้าปัจจุบันและจำนวนความคิดเห็นที่แสดงต่อหน้า ด้วยการส่งคืนชุดย่อยของอาร์เรย์ ความคิดเห็น ที่อยู่ในช่วงที่ระบุนี้ จะเป็นการแบ่งความคิดเห็นตามหน้าต่างๆ

อันที่จริง คุณควรอัปเดตส่วน เทมเพลต ในไฟล์ App.vue ของคุณโดยแทนที่ด้วยข้อมูลโค้ดที่ให้มา เพื่อให้แน่ใจว่าเลย์เอาต์จะคงเส้นคงวาและดึงดูดสายตาในหน้าจอขนาดต่างๆ

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

แอ็ตทริบิวต์ v-for สำหรับการเรนเดอร์รายการในส่วนเทมเพลตนี้ชี้ไปที่อาร์เรย์ displaysComments เทมเพลตจะเพิ่มส่วนประกอบ vue-awesome-paginate ซึ่งตัวอย่างด้านบนจะส่งผ่านอุปกรณ์ประกอบฉากไป คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งเหล่านี้และอุปกรณ์ประกอบฉากเพิ่มเติมได้ใน เอกสารประกอบเกี่ยวกับ GitHub อย่างเป็นทางการของแพ็คเกจ

เมื่อคุณใช้สไตล์ที่คุณต้องการกับแอปพลิเคชันของคุณแล้ว มันจะส่งผลให้หน้าเว็บมีลักษณะคล้ายกับดังต่อไปนี้:

โปรดคลิกที่ปุ่มหมายเลขแต่ละปุ่มเพื่อดูข้อสังเกตที่หลากหลายที่เกี่ยวข้องกับการเลือกนั้น

ใช้การแบ่งหน้าหรือการเลื่อนแบบไม่มีที่สิ้นสุดเพื่อการเรียกดูข้อมูลที่ดีขึ้น

การใช้การแบ่งหน้าในปัจจุบันของคุณในแอปพลิเคชัน Vue นี้เป็นพื้นฐาน แต่ทำหน้าที่เป็นรากฐานที่เพียงพอสำหรับการจัดการชุดข้อมูลขนาดใหญ่ผ่านเทคนิคการแบ่งหน้าหรือการเลื่อนแบบไม่มีที่สิ้นสุด จำเป็นต้องประเมินข้อกำหนดเฉพาะของการใช้งานของคุณอย่างรอบคอบก่อนตัดสินใจระหว่างสองวิธีนี้ เนื่องจากทั้งสองวิธีมีข้อดีและข้อเสียต่างกันไป