DRF分页

一、序列化

1 from  rest_framework impost serializers
2 from . models import *
3 
4 class goodsserializer(serializers,modelserializer):
5     """商品序列化"""
6     class meta:
7         model=goods
8         fields="__all__"

二、分页代码

 1 from rest_framework.views import apiview
 2 from rest_framework.response import response
 3 from django.core.paginator import paginator 
 4 from .serializer import goodsserializer
 5 from django.core.paginator import paginator, emptypage, invalidpage
 6 
 7 class goodspageapi(apiview):
 8     """
 9     分页
10     """
11     def get(self, request, pindex):
12         # 1、获取商品信息
13         goods_list = goods.objects.all()
14         # 2、实例化分页器
15         paginat = paginator(goods_list, 2)
16         # 3、 获取分页
17         paged = paginat.page(pindex)
18         try:  # 判断是否有下一页
19             paged.has_next()
20             down_page = paged.next_page_number()  # 获取一下页的页码
21         except emptypage:  # 如果下一页为空的话，
22             down_page = paged.paginator.num_pages  # 获取最后一页的页码
23             paged = paginat.page(down_page)
24 
25         try:
26             paged.has_previous()  # 判断是否有上一页
27             up_page = paged.previous_page_number()  # 获取上页的页码
28         except invalidpage:  # 如果没有上一页
29             up_page = 1  # 返回第一页
30             paged = paginat.page(up_page)
31 
32         # 4、 做序列化
33         page_serializer = goodsserializer(paged, many=true)
34 
35         # 5、 返回数据
36         return response({
37             'code': 200,
38             'data': page_serializer.data,
39             'page_list': [i for i in paginat.page_range],
40             'has_previous': paged.has_previous(),  # 判断是否有上一页
41             'has_next': paged.has_next(),  # 判断是否有下一页
42             'previous_page_number': up_page,  # 返回上一页的页码
43             'next_page_number': down_page,  # 返回下一页的页码
44             'page_number': paged.number  # 返回当前页页码
45         })

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