Cách triển khai phân trang trong ứng dụng Vue

Phân trang cho phép bạn chia các tập dữ liệu lớn thành các phần nhỏ hơn, dễ quản lý hơn. Phân trang giúp người dùng dễ dàng điều hướng các tập dữ liệu lớn và tìm thấy thông tin họ tìm kiếm.

Khám phá sự phức tạp của phương pháp và đạt được những hiểu biết thực tế về việc tích hợp nó trong ứng dụng Vue bằng cách kiểm tra dự án minh họa này.

Bắt đầu với Vue-Awesome-Paginate

Vue-awesome-paginate là một thư viện phân trang Vue mạnh mẽ và nhẹ giúp đơn giản hóa quá trình tạo hiển thị dữ liệu phân trang. Nó cung cấp các tính năng toàn diện, bao gồm các thành phần có thể tùy chỉnh, API dễ sử dụng và hỗ trợ cho các tình huống phân trang khác nhau.

Để bắt đầu sử dụng “vue-awesome-paginate”, hãy thực thi lệnh sau trong thư mục của dự án thông qua giao diện đầu cuối:

 npm install vue-awesome-paginate 

Để thiết lập gói để sử dụng trong dự án Vue, vui lòng dán đoạn mã được cung cấp vào tệp src/main.js nằm trong thư mục nguồn dự án của bạn.

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

Mã hiện tại tích hợp và đăng ký gói bằng cách sử dụng kỹ thuật .use() , do đó cho phép triển khai gói này trong toàn bộ ứng dụng. Đồng thời, việc nhập tệp CSS cũng được thực thi bởi khối mã nói trên.

Xây dựng ứng dụng Vue thử nghiệm

Để thể hiện chức năng của gói “vue-awesome-paginate”, chúng ta sẽ xây dựng một ứng dụng Vue lấy dữ liệu từ nguồn bên ngoài bằng Axios. Dữ liệu này đóng vai trò là trường hợp thử nghiệm cho việc triển khai phân trang của chúng tôi.

‘Chào thế giới!’};}};

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

Mã được cung cấp tận dụng Vue Composition API để xây dựng một thành phần phản ứng nhằm truy xuất và hiển thị các nhận xét từ API JSONPlaceholder bằng cách sử dụng hook vòng đời onBeforeMount của Vue. Cụ thể, thành phần này sử dụng Axios để lấy dữ liệu nhận xét trước khi quá trình kết xuất bắt đầu. Sau đó, các nhận xét được truy xuất sẽ được lưu trữ trong đối tượng comments ref cho mục đích trình bày. Tạm thời, một trình giữ chỗ thích hợp sẽ được hiển thị nếu chưa nhận được nhận xét.

Tích hợp Vue-Awesome-Paginate vào ứng dụng Vue của bạn

Bây giờ bạn đã sở hữu một ứng dụng Vue cơ bản để lấy thông tin từ API và có thể cải thiện nó bằng cách kết hợp gói vue-awesome-paginate. Chức năng này cho phép chia bình luận thành nhiều phần.

Vui lòng thay thế nội dung của phần tập lệnh trong tệp App.vue của bạn bằng đoạn mã được cung cấp, bao gồm phần tử div chứa thuộc tính id được đặt thành “script” và một phần tử div khác bên trong có vòng lặp v-for lặp lại thông qua một mảng được gọi là “tập lệnh” sử dụng chức năng theo dõi. Div bên trong cũng bao gồm trình xử lý sự kiện nhấn phím động cho mỗi lần nhấn phím, cũng như trình xử lý sự kiện nhấp chuột khi bất kỳ phần nào của nút được nhấp vào.

 <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” và “currentPage”. Cái trước được sử dụng để lưu trữ số lượng mục được xác định trước sẽ được hiển thị trên mỗi trang, trong khi cái sau giữ lại số trang hiện tại trong chuỗi.

Mã tạo ra một tham chiếu dẫn xuất được gọi là displayComments , xác định phạm vi nhận xét theo chỉ mục của trang hiện tại và số lượng nhận xét được hiển thị trên mỗi trang. Bằng cách trả về một tập hợp con của mảng bình luận nằm trong phạm vi được chỉ định này, nó sẽ phân chia các bình luận giữa các trang khác nhau.

Thật vậy, bạn nên cập nhật phần template trong tệp App.vue của mình bằng cách thay thế nó bằng đoạn mã được cung cấp. Điều này sẽ đảm bảo rằng bố cục vẫn nhất quán và hấp dẫn trực quan trên các kích thước màn hình khác nhau.

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

Thuộc tính v-for để hiển thị danh sách trong phần mẫu này trỏ đến mảngdisplayComments. Mẫu thêm thành phần vue-awesome-paginate mà đoạn mã ở trên chuyển đạo cụ tới. Bạn có thể tìm hiểu thêm về những điều này và các đạo cụ bổ sung trong tài liệu chính thức của gói trên GitHub.

Khi bạn đã áp dụng kiểu mong muốn cho ứng dụng của mình, nó sẽ mang lại một trang web có giao diện giống như sau:

Vui lòng nhấp vào từng nút được đánh số để xem nhiều nhận xét đa dạng liên quan đến lựa chọn cụ thể đó.

Sử dụng phân trang hoặc cuộn vô hạn để duyệt dữ liệu tốt hơn

Việc triển khai phân trang hiện tại của bạn trong ứng dụng Vue này còn thô sơ nhưng đóng vai trò là nền tảng thích hợp để xử lý các tập dữ liệu lớn thông qua kỹ thuật phân trang hoặc cuộn vô hạn. Điều cần thiết là phải đánh giá cẩn thận các yêu cầu cụ thể của ứng dụng của bạn trước khi đưa ra quyết định giữa hai phương pháp này, vì cả hai đều có những ưu điểm và nhược điểm riêng.