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>