vue+django分页

流程如下：

• 设计models表：

class UpImg(models.Model):
    name = models.CharField(max_length=30,verbose_name='图片名')
    img = models.ImageField(upload_to='upload')

    def __str__(self):
        return self.name

    class Meta:
        db_table = 'upimg'

• 添加完数据进行序列化操作：
• serializer.py中：

from rest_framework import serializers
from .models import *

class ImageSerializer(serializers.ModelSerializer):
    class Meta:
        model = UpImg
        fields = '__all__'

• 在views视图文件中写展示分页的接口：

from .serializer import ImageSerializer
class ShowImage(APIView):
    def get(self,request,pindex):
        # 获取图片表中的所有数据
        img = UpImg.objects.all()
        # 实例化分页数据，每页显示1条数据
        pages = Paginator(img,1)
        # 将分页页码添加到列表
        page_list = list()
        for i in pages.page_range:
            page_list.append(i)
        # 将下标参数传入
        paged = pages.page(pindex)
        # 对下标进行序列化
        img_ser = ImageSerializer(paged,many=True)
        return Response({
            'code':200,
            'sum_page':pages.num_pages,
            'page_list':page_list,
            'data':img_ser.data
        })

• 配置分页接口的路由

from django.urls import path
from .views import *

app_name = 'moapp'

urlpatterns = [    
	path('showimage/<pindex>',ShowImage.as_view(),name='showimage'),
]

• 在vue中写展示的组件

<template>
    <div>
      <table border="1">
        <tr>
          <th>图片名</th>
          <th>图片</th>
        </tr>
        <tr v-for="item in img_list">
          <td>{{ item.name }}</td>
          <td><img :src="'http://127.0.0.1:8000' + item.img" alt="" width="100" height="150"></td>
        </tr>
      </table>
      <div>
        <button v-for="i in page_list" @click="get_page(i)">{{i}}</button>
      </div>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
      data(){
          return{
            img_list:[],   # 遍历该变量是为了展示表中的数据
            page_list:[],   # 遍历该变量是为了展示分页的页码
          }
      },
     mounted() {     # 页面加载完访问展示数据的接口
          axios({
            url:'http://127.0.0.1:8000/mo/showimage/1',
            method:'get',
          }).then(res=>{
            console.log(res)
            if(res.data.code==200){
              this.page_list = res.data.page_list
              this.img_list = res.data.data
            }
          })
      },
      methods:{
          get_page(e){        # 定义方法，在点击的时候触发 get_page(e) 函数 实现分页功能
            var page_number = e
            console.log(page_number)
            axios({
              url:'http://127.0.0.1:8000/mo/showimage/' + page_number,
              method:'get',
            }).then(res=>{
              this.page_list = res.data.page_list
              this.img_list = res.data.data
            })
          }
      }
    }
</script>