zoukankan      html  css  js  c++  java
  • 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>


         
        

  • 相关阅读:
    Tips for C++ Primer Chapter 11 关联容器
    Tips for C++ Primer Chapter 10 泛型算法
    Tips for C++ Primer Chapter 9 顺序容器
    Tips for C++ Primer Chapter 8 IO库
    Trie Tree 字典树
    Manacher Algorithm 最长回文子串
    【Android Studio】android Internal HTTP server disabled 解决
    释放修改OS X 10.11系统文件权限【转】
    win10 Vmware12装mac os X10.11虚拟机教程
    【Android开发实践】android.view.InflateException: Binary XML file line #12: Error inflating class fragment问题解决
  • 原文地址:https://www.cnblogs.com/hongdoudou/p/12675766.html
Copyright © 2011-2022 走看看