一、序列化

  1. from rest_framework impost serializers
  2. from . models import *
  3.  
  4. class GoodsSerializer(serializers,ModelSerializer):
  5. """商品序列化"""
  6. class Meta:
  7. model=Goods
  8. fields="__all__"

serializers.py

二、分页代码

  1. from rest_framework.views import APIView
  2. from rest_framework.response import Response
  3. from django.core.paginator import Paginator
  4. from .serializer import GoodsSerializer
  5. from django.core.paginator import Paginator, EmptyPage, InvalidPage
  6.  
  7. class GoodsPageApi(APIView):
  8. """
  9. 分页
  10. """
  11. def get(self, request, pindex):
  12. # 1、获取商品信息
  13. goods_list = Goods.objects.all()
  14. # 2、实例化分页器
  15. paginat = Paginator(goods_list, 2)
  16. # 3、 获取分页
  17. paged = paginat.page(pindex)
  18. try: # 判断是否有下一页
  19. paged.has_next()
  20. down_page = paged.next_page_number() # 获取一下页的页码
  21. except EmptyPage: # 如果下一页为空的话,
  22. down_page = paged.paginator.num_pages # 获取最后一页的页码
  23. paged = paginat.page(down_page)
  24.  
  25. try:
  26. paged.has_previous() # 判断是否有上一页
  27. up_page = paged.previous_page_number() # 获取上页的页码
  28. except InvalidPage: # 如果没有上一页
  29. up_page = 1 # 返回第一页
  30. paged = paginat.page(up_page)
  31.  
  32. # 4、 做序列化
  33. page_serializer = GoodsSerializer(paged, many=True)
  34.  
  35. # 5、 返回数据
  36. return Response({
  37. 'code': 200,
  38. 'data': page_serializer.data,
  39. 'page_list': [i for i in paginat.page_range],
  40. 'has_previous': paged.has_previous(), # 判断是否有上一页
  41. 'has_next': paged.has_next(), # 判断是否有下一页
  42. 'previous_page_number': up_page, # 返回上一页的页码
  43. 'next_page_number': down_page, # 返回下一页的页码
  44. 'page_number': paged.number # 返回当前页页码
  45. })

views.py

三、urls.py

  1. path('goods_page/<pindex>', views.GoodsPageApi.as_view()), # 商品分页

四、vue分页展示

  1. <template>
  2. <div>
  3. <table>
  4. <tr>
  5. <td>商品编码</td>
  6. <td>商品名称</td>
  7. <td>商品图片</td>
  8. <td>商品详情</td>
  9. <td>商品价格</td>
  10. </tr>
  11. <tr v-for="goods in goods_list">
  12. <td>{{goods.id}}</td>
  13. <td>{{goods.goods_name}}</td>
  14. <td><img :src="'http://127.0.0.1:8000' + goods.goods_img" alt="" style="width:100px; heigth:100px"></td>
  15. <td>{{goods.goods_content}}</td>
  16. <td>{{goods.goods_price}}</td>
  17. </tr>
  18. </table>
  19. <div>
  20. <button v-for="page in page_list" @click="get_num($event)" :value="page">{{page}}</button>
  21. </div>
  22. </div>
  23. </template>
  24.  
  25. <script>
  26. import axios from 'axios'
  27. export default {
  28. data(){
  29. return{
  30. goods_list: [],
  31. page_list: [],
  32. p: ''
  33. }
  34. },
  35. methods:{
  36. get_goods(){
  37. var self = this
  38. axios({
  39. method: 'get',
  40. url: 'http://127.0.0.1:8000/myapp/goods_page/'+ this.p
  41. }).then(function(res){
  42. console.log(res.data)
  43. self.goods_list = res.data.data
  44. self.page_list = res.data.page_list
  45. })
  46. },
  47. get_num(event){
  48. this.p = event.target.value // 通过事件获取button的value
  49. console.log(this.p)
  50. this.get_goods() // 点击按钮的时候,重新调用get_goods方法
  51. }
  52. },
  53. created(){ // 页面加载的时候,自动执行下面方法
  54. this.get_goods()
  55. }
  56. }
  57. </script>

DRF分页的更多相关文章

  1. python 全栈开发,Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)

    昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...

  2. drf 分页,获取fk,choise,m2m等字段数据(序列化)

    1.什么是restful规范 是一套规则,用于程序之间进行数据交换的约定. 他规定了一些协议,对我们感受最直接的的是,以前写增删改查需要写4个接口,restful规范的就是1个接口,根据method的 ...

  3. Django DRF 分页

    Django DRF 分页 分页在DRF当中可以一共有三种,可以通过setttings设置,也可也通过自定义设置 PageNumberPagination 使用URL http://127.0.0.1 ...

  4. DRF 分页组件

    Django Rest Framework 分页组件 DRF的分页 为什么要使用分页 其实这个不说大家都知道,大家写项目的时候也是一定会用的, 我们数据库有几千万条数据,这些数据需要展示,我们不可能直 ...

  5. DRF分页组件

    为什么要使用分页 其实这个不说大家都知道,大家写项目的时候也是一定会用的, 我们数据库有几千万条数据,这些数据需要展示,我们不可能直接从数据库把数据全部读取出来, 这样会给内存造成特别大的压力,有可能 ...

  6. 【DRF分页】

    目录 第一种 PageNumberPagination 查第n页,每页显示n条数据 第二种 LimitOffsetPagination 在第n个位置,向后查n条数据 第三种 CursorPaginat ...

  7. drf分页组件补充

    drf偏移分页组件 pahenations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOf ...

  8. drf分页功能

    什么是restful规范 是一套规则,用于程序之间进行数据交换的约定. 他规定了一些协议,对我们感受最直接的的是,以前写增删改查需要写4个接口,restful规范的就是1 个接口,根据method的不 ...

  9. drf 分页

    分页: 1.简单的分页: 每页显示条数: page_size = api_settings.PAGE_SIZE 查询的页码数: page_query_param = "page" ...

随机推荐

  1. "Chrome的network中无法显示OPTIONS请求"的解决方案

    目录 #事故现场 #分析及解决方法 #参考 #事故现场 在前端发送一个跨域请求的时候,要先发送个options请求,从而获知服务端是否允许该跨域请求. 跨域资源共享标准新增了一组 HTTP 首部字段, ...

  2. hdu 6182A Math Problem(快速幂)

    You are given a positive integer n, please count how many positive integers k satisfy kk≤nkk≤n.  Inp ...

  3. 【巨杉数据库SequoiaDB】SequoiaDB 巨杉数据库 v3.4 版本正式发布

    深秋时节,SequoiaDB 巨杉数据库在深秋给大家带来了“一把火”.SequoiaDB v3.4 正式发布啦! 分布式交易场景性能大幅提升 SequoiaDB 巨杉数据库3.4版本正式发布,v3.4 ...

  4. day30 nfs服务器配置

    04. NFS服务部署流程 RPC: 远程过程调用服务程序--- 相当于租房的中介(网络编程支持) 服务端部署 第一个历程: 下载安装软件 rpm -qa|grep -E "nfs|rpc& ...

  5. Linux -初体验笔记

    课堂笔记 鸟哥Linux私房菜 Linux 版本很多,内核都是一样的 计算机基础知识: 1.完整计算机系统:软件+硬件 硬件:物理装置本身,计算机的物质基础 软件:相对硬件而言, 程序:计算机完成一项 ...

  6. Wannafly Camp 2020 Day 2E 阔力梯的树 - set,启发式合并

    搞一波启发式合并即可 #include <bits/stdc++.h> using namespace std; #define int long long #define iter se ...

  7. 在myEclipse中根据图表自动生成Hibernate文件

    1.新建一个Java Project项目,在scr中创建两个包:Com.hibernate.po 和com.hibernate.dao 2. 3.点击ok 4. 5.选中MyElipse Derby, ...

  8. 在npm上如何发布自己的包

    环境需要:node和npm 然后在本地建一个文件夹作为你要发布的模块 然后在这个文件夹下打开cmd 执行:npm init 按照提示写对应的,或者先不写也可以,最后y 这时候在mcrm这个文件夹下就出 ...

  9. google protocol 入门 demo

    ubunbu系统下google protobuf的安装 说明: 使用protobuf时需要安装两部分: 第一部分为*.proto文件的编译器,它负责把定义的*.proto文件生成对应的c++类的.h和 ...

  10. Jmeter-Badboy检查点和参数化

    Badboy进行检查点操作 1.复制搜索的内容,点击Tools,选择添加断言Add Assertion for Selection 2.这个时候Step1步骤下就会多一个检查点 3.点击工具栏上的Pl ...