django--DRF分頁

小王i發表於2020-11-12
Django

DRF分頁

一、序列化

from rest_framework import serializers
from .models import *


class GoodsSerializer(serializers.ModelSerializer):
    """
    商品序列化
    """
    class Meta:
        model = Goods
        fields = '__all__'

二、views.py檢視

from rest_framework.views import APIView
from rest_framework.response import Response
from django.core.paginator import Paginator
from .serializer import GoodsSerializer
from django.core.paginator import Paginator, EmptyPage, InvalidPage

class GoodsPageApi(APIView):
    """
    分頁
    """
    def get(self, request, pindex):
        # 1、獲取商品資訊
        goods_list = Goods.objects.all()
        # 2、例項化分頁器
        paginat = Paginator(goods_list, 2)
        # 3、 獲取分頁
        paged = paginat.page(pindex)
        try:  # 判斷是否有下一頁
            paged.has_next()
            down_page = paged.next_page_number()  # 獲取一下頁的頁碼
        except EmptyPage:  # 如果下一頁為空的話，
            down_page = paged.paginator.num_pages  # 獲取最後一頁的頁碼
            paged = paginat.page(down_page)

        try:
            paged.has_previous()  # 判斷是否有上一頁
            up_page = paged.previous_page_number()  # 獲取上頁的頁碼
        except InvalidPage:  # 如果沒有上一頁
            up_page = 1  # 返回第一頁
            paged = paginat.page(up_page)

        # 4、 做序列化
        page_serializer = GoodsSerializer(paged, many=True)

        # 5、 返回資料
        return Response({
            'code': 200,
            'data': page_serializer.data,
            'page_list': [i for i in paginat.page_range],
            'has_previous': paged.has_previous(),  # 判斷是否有上一頁
            'has_next': paged.has_next(),  # 判斷是否有下一頁
            'previous_page_number': up_page,  # 返回上一頁的頁碼
            'next_page_number': down_page,  # 返回下一頁的頁碼
            'page_number': paged.number  # 返回當前頁頁碼
        })

三、urls.py

path('goods_page/<pindex>', views.GoodsPageApi.as_view()),  # 商品分頁

四、vue分頁展示

<template>
    <div>
        <table>
            <tr>
                <td>商品編碼</td>
                <td>商品名稱</td>
                <td>商品圖片</td>
                <td>商品詳情</td>
                <td>商品價格</td>
            </tr>
            <tr v-for="goods in goods_list">
                <td>{{goods.id}}</td>
                <td>{{goods.goods_name}}</td>
                <td><img :src="'http://127.0.0.1:8000' + goods.goods_img" alt="" style="width:100px; heigth:100px"></td>
                <td>{{goods.goods_content}}</td>
                <td>{{goods.goods_price}}</td>
            </tr>
        </table>
        <div>
            <button v-for="page in page_list" @click="get_num($event)" :value="page">{{page}}</button>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            goods_list: [],
            page_list: [],
            p: '1'
        }
    },
    methods:{
        get_goods(){
            var self = this
            axios({
                method: 'get',
                url: 'http://127.0.0.1:8000/myapp/goods_page/'+ this.p
            }).then(function(res){
                console.log(res.data)
                self.goods_list = res.data.data
                self.page_list = res.data.page_list
            })
        },
        get_num(event){
            this.p = event.target.value  // 通過事件獲取button的value
            console.log(this.p)
            this.get_goods()  // 點選按鈕的時候，重新呼叫get_goods方法
        }
    },
    created(){  // 頁面載入的時候，自動執行下面方法
        this.get_goods()
    }
}
</script>

相關文章