django实现分页_vue json

django实现分页_vue json这里提供两种分页方法一种是手写分页,不常用,但是明白一下分页的逻辑实现第二种是用heyui提供的组件.很多功能都给封装好了,用起来也比较美观.手写分页后端接口classGoodList(APIView):defget(self,request):#当前页page=int(request.GET.get(‘page’,1))…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

这里提供两种分页方法

一种是手写分页,不常用,但是明白一下分页的逻辑实现

第二种是用heyui提供的组件.很多功能都给封装好了,用起来也比较美观.



手写分页

后端接口

class GoodList(APIView):
    def get(self, request):
        # 当前页
        page = int(request.GET.get('page', 1))
        # 一页有多少条商品
        size = int(request.GET.get('size', 1))

        # 定义从哪里开始切片
        data_start = (page - 1) * size

        # 定义切到哪
        data_end = page * size

        #查询数据
        goodslist=Goods.objects.all()[data_start:data_end]

        #查询总数量
        count=Goods.objects.count()

        # 序列化操作
        goods_ser=GoodsSer(goodslist,many=True)
        # 返回响应
        return Response({ 
   
            'total':count,
            'data':goods_ser.data
        })

前端页面

<template>
......
          <!--自主分页-->
          <div>
              <!-- v-show 判断当前页数是否有需要显示上或下一页 -->
            <Button v-show="lastpage" @click="getdata(lastpage)">上一页</Button>
            <Button v-for="index in all" @click="getdata(index)">{
  
  {index}}</Button>
            <Button v-show="nextpage" @click="getdata(nextpage)">下一页</Button>
          </div>
</template>


<script>


  export default {
    data() {
      return {
        //自主分页
        total: 0,//商品总数
        curpage: 1,//当前页
        all: 0,//总页数
        lastpage: 0,//上一页
        nextpage: 0,//下一页
        size: 2,//每页显示多少
      
        //商品列表
        goodlist: '',
          
          
    mounted() {
      //调用自主分请求
      this.getdata(1);
    },
          
    methods: {
      //自主分页接口
      getdata: function (mypage) {
        this.axios.get('http://localhost:8000/goodlist/', {
          params: {
            page: mypage,
            size: this.size
          }
        })
          .then(res => {
            this.goodlist = res.data.data;
            console.log(res.data.data);

            //判断上一页
            if (mypage == 1) {
              this.lastpage = 0;
            } else {
              this.lastpage = mypage - 1
            }

            // 计算总页数   Math.ceil  向上取整
            this.all = Math.ceil(res.data.total / this.size);
            //判断下一页
            if (mypage == this.all) {
              this.nextpage = 0
            } else {
              this.nextpage = mypage + 1
            }
          });
      },
    }
  }


</script>

<style>


</style>

heyui 组件库

后端代码不用做修改.可以直接复用.heyui前端就相对来说简单了许多.

<template>
  ......
          <!--heyui分页-->
          <br>
        </div>
        <div>
            <!-- layout可以自定义控制显示那些组件和顺序.-->
          <Pagination v-model="pagination" @change="change" layout="sizes,pager,jumper" align="center">

          </Pagination>
            
</template>


<script>

  export default {
    data() {
      return {
        //分页器变量
        pagination: {
          page: 1,
          size: 3,
          total: 5
        },
        //商品列表
        goodlist: '',
    },
          
    mounted() {
      //请求商品接口返回数据
      this.axios.get('http://localhost:8000/goodlist/', {params: {page: 1, size: 3}})
        .then(res => {
          this.goodlist = res.data.data;
          console.log(res.data.data)
        });
    },
    methods: {
      //分页器事件
      change: function () {
        //二次请求
        this.axios.get('http://localhost:8000/goodlist/', {
          params: {
            page: this.pagination.page,
            size: this.pagination.size
          }
        })
          .then(res => {
            this.goodlist = res.data.data;
            console.log(res.data.data)
          });
      },
    }
  }


</script>

<style>


</style>

两种分页的效果.上边的是heyui组件,下边是手写分页器.
在这里插入图片描述
HEY UI 分页文档:https://www.heyui.top/component/data/view/page

Element 组件文档:https://element.eleme.cn/#/zh-CN/component/installation

功能多多 各自挖掘吧.

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187285.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • pycharm 2021.11.3 激活(注册激活)

    (pycharm 2021.11.3 激活)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • 用户态与内核态之间切换详解[通俗易懂]

    用户态与内核态之间切换详解[通俗易懂]用户态切换到内核态CPU中有一个标志字段,标志着线程的运行状态。用户态和内核态对应着不同的值,用户态为3,内核态为0.每个线程都对应着一个用户栈和内核栈,分别用来执行用户方法和内核方法。用户方法就是普通的操作。内核方法就是访问磁盘、内存分配、网卡、声卡等敏感操作。当用户尝试调用内核方法的时候,就会发生用户态切换到内核态的转变。切换流程:1、每个线程都对应这一个TCB,TCB中有一个TSS字段,存储着线程对应的内核栈的地址,也就是内核栈的栈顶指针。2、因为从用户态切换到内核态时,需要将用户态.

  • Ubuntu14.04安装Android SDK

    Ubuntu14.04安装Android SDK1前言做应用开发过程中,通常需要下载相应版本的的AndroidSDK,但是如果拥有了Android源码,是否还需要下载AndroidSDK呢(也即是说,源码中是否已经包含了AndroidSDK的所有内容)?本文以Android6.0.1为例进行对比分析。2下载AndroidSDK3源码prebuilts目录……

  • java类的加载_Java高并发实战

    java类的加载_Java高并发实战【版权申明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)http://blog.csdn.net/javazejian/article/details/73413292出自【zejian的博客】关联文章:深入理解Java类型信息(Class对象)与反射机制深入理解Java枚举类型(enum)深入理解Java注解类型(@Annotation)深入理解

  • CListCtrl 使用方法

    CListCtrl 使用方法原文出处:MFC列表控件CListCtrl详解CListCtrl::SetExtendedStyleCListCtrl的成员函数声明  DWORDSetExtendedStyle(  DWORDdwNewStyle);  函数功能设置CListCtrl的扩展样式  dwNewStyle指定的扩展样式  LVS_EX_GRI

  • js跨域问题解释 使用jsonp或jQuery的解决方案

    js跨域问题解释 使用jsonp或jQuery的解决方案

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号