Vue 出一個女友吧!-製作分頁邏輯-2

前言

從上一篇就可以了解到其實前端也是可以製作分頁邏輯的,但是會相當複雜,如果後端有做好相關的分頁邏輯 API 給前端那就會不一樣囉

模板

由於這邊要保留原本的分頁邏輯,所以就不動 Products.vue 這邊改用 Coupons.vue 來製作

首先先建立一個檔案叫 Pagination_2.vue,內容模板如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template lang="pug">
div
nav(aria-label='Page navigation example')
ul.pagination.justify-content-center
li.page-item(:class="{'disabled': !paginationService.has_pre}")
a.page-link(href='#', @click.prevent='getPagesService(paginationService.current_page - 1)', tabindex='-1') Previous
li.page-item(v-for='pages in paginationService.total_pages', :key='pages', :class="{'active': paginationService.current_page === pages}")
a.page-link(href='#', @click.prevent='getPagesService(pages)') {{ pages }}
li.page-item(:class="{'disabled': !paginationService.has_next}")
a.page-link(href='#', @click.prevent='getPagesService(paginationService.current_page + 1)') Next
</template>

<script>
export default {
props: {
paginationService: {
type: Object,
},
},
methods: {
getPagesService(item) {
this.$emit('pageService', item);
},
},
};
</script>

分頁邏輯

接下來打開 API 頁面來看,可以看到後端都已經將相關的 pagination 都做好了,我們只需要帶入相關的 page 即可

pagination

接下來只需要稍微調整 AJAX 部分並預先定義資料欄位

AJAX

然後就來引入模板,並加入到模板內

1
pagination1Components(:paginationService='pagination', v-on:pageService="getCoupons")

這樣分頁邏輯就製作好了

分頁邏輯

並且也可以做切換頁動作

切換頁動作

結尾

這邊有些人會覺得”那就由後端製作就好了啦,幹嘛讓前端這麼辛苦”,其實這方面要前後端做雙向溝通的,並不是全都由後端製作就好,經過分頁邏輯 1 & 2,你也了解到由製作分頁邏輯是多麻煩的事,雖然後端製作好往前端傳可以省很多事情,但是這部分是雙方一起溝通的唷~(自己寫過後端分頁邏輯,所以滿清楚的)

可以給點牡蠣。
Google AD