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>