Vue + Django实现分页实例讲解

Vue + Django + BootstrapVue实现分页，前端后台实例讲解


    1、后台Django代码
     

    def storage(req):
        '''
        存储图片接口：
            1、根据roomid查询出数据
        '''
        # 从数据库选出所需数据
        roomid = req['roomid']
        data_list = Memory.objects.filter(roomid=roomid).order_by('-addtime')
        # 构造分页器
        page_robot = Paginator(data_list, 2)
        page_num = req.get('page')   根据page的值得到对应的数据
        try:
            data_list = page_robot.page(page_num)
        except InvalidPage:
            data_list = page_robot.page(1)
        except ValueError:
            data_list = page_robot.page(1)
        except EmptyPage:
            data_list = page_robot.page(page_robot.page_num)
        except PageNotAnInteger:
            data_list = page_robot.page(1)
        serializer = MemorySerializer(data_list, many=True).data
        context = {"status": "success", "data": serializer}
        return context

    2、前端组件Vue代码

<template>
      <div>
        <b-container class="bv-example-row">
          <b-row>
            <b-col><b-table striped hover :items="items.data"></b-table></b-col>
          </b-row>
          <b-row>
            <b-col>
              1、每次点触发一下getGoodsList()函数，改变一下page码调接口
              <b-pagination size="md" :total-rows="100" v-model="currentPage" :per-
    page="10"  align="right"  @click.native="getGoodsList()"></b-pagination>
              <div>第: {{ currentPage }}页</div>
            </b-col>
          </b-row>
        </b-container>
     
        {{ items }}
     
      </div>
    </template>
     
    <script>
        import axios from 'axios'
     
        export default {
          name: "PageLayout",
          data(){
            return {
     
              roomid: '1',
              4、定义一个列表存储返回数据
              items: [],
              5、设置默认页码
              currentPage: 1,
            }
     
          },
          mounted(){
            3、初始化一下接口，这样呢在加载的时候就会自动调用接口
            this.getGoodsList();
          },
          methods: {
            2、写一个函数调接口getGoodsList
            getGoodsList: function() {
              axios.get("http://192.168.0.144:9999/skyapi/storage/", {
                params: { roomid:this.roomid, page:this.currentPage }
              }).then(res => {
                this.items = res.data
              })
                .catch((error) => {
                  this.msg = error
                })
            },
     
          }
        }
    </script>
     
    <style scoped>
     
    </style>