django rest_framework vue 实现用户列表分页

后端

配置urls

# 导入view

from api.appview.userListView import userListView

# 增加url配置

urlpatterns = [

    ...

    url(r'^home/userlist/$', userListView.as_view()), # 用户列表

]

编写视图

# FileName : userListView.py

# Author   : Adil

# DateTime : 2019/8/2 1:46 PM

# SoftWare : PyCharm

from api import models

from django.http import JsonResponse

from rest_framework.views import APIView

from api.models import User

from api.utils.auth import Authentication

from api.common.PageHandle import MyLimitOffsetPagination

from rest_framework import serializers

class userListView(APIView):

    authentication_classes = [Authentication]   #  添加认证

    permission_classes = []      # 不尽兴权限控制

    def get(self,request,*args,**kwargs):

        # user1 = models.User.objects.all()

        #

        # print(user1)  # <QuerySet [<User: username: wang,password: 123456>,...

        # userInfoList = models.User.objects.values()

        # print('^^^^^')

        # for userlist in userInfoList:

        #

        #     # userlist = model_to_dict(userlist)

        #     print(type(userlist))

        #     print(userlist)

        # print(type(userInfoList))

        # print("!!!!!")

        # userInfoList = model_to_dict(userInfoList)

        #

        # print(type(userInfoList))

        # print(userInfoList)   #  <QuerySet [{'id': 1, 'username': 'wang', 'password': '123456', 'age': '20', 'e_mail': '272981562@qq.com', 'user_type': 2, 'create_time': datetime.datetime(2019, 7, 30, 21, 16, 12, 301365), 'update_time': datetime.datetime(2019, 7, 30, 21, 16, 12, 301396)}, {'id': 2, ...

        # for userList in userInfoList:

        #     #print(userList)

        # users = models.User.objects.values_list()

        # print("8***")

        # print(users)  # <QuerySet [(1, 'wang', '123456', '20', '272981562@qq.com', 2, datetime.datetime(2019, 7, 30, 21, 16, 12, 301365), datetime.datetime(2019, 7, 30, 21, 16, 12, 301396)), (2, 'yang', '....

        # for user in users:

        #     print(user)

        userInfoList = models.User.objects.values()print(userInfoList)

        ret = {'code': 1000, 'msg': None, 'data': None,'lens':None}

        try:

            ret['msg'] = '成功'

            ret['data'] = list(userInfoList)
　　　　　　　ret['lens'] = len(userInfoList)

        except Exception as e:

            ret['code'] = 1001

            ret['msg'] = '失败'

        return (JsonResponse(ret))

        # return (page.get_paginated_response(roles_ser.data))
 

至此完成后端code。

查看接口返回

可以看到此时返回的是查询所有结果，有21条数据。

可以看到 这样返回的结果是21条数据，而不能分页展示。

下面介绍一下分页功能

创建分页类

# FileName : PageHandle.py

# Author   : Adil

# DateTime : 2019/8/5 4:33 PM

# SoftWare : PyCharm

#logintest/api/common/PageHandle.py

from rest_framework.pagination import LimitOffsetPagination,PageNumberPagination

class MyLimitOffsetPagination(PageNumberPagination):

    # 每页显示多少个

    page_size = 3

    # 默认每页显示3个，可以通过传入pager1/?currentPage=2&pageSize=4,改变默认每页显示的个数

    page_size_query_param = "pageSize"

    # 最大页数不超过10

    max_page_size = 100

    # 获取页码数的

    page_query_param = "currentPage"

# default_limit：表示默认每页显示几条数据

# limit_query_param：表示url中本页需要显示数量参数

# offset_query_param：表示从数据库中的第几条数据开始显示参数

# max_limit：表示每页最大显示数量，做限制使用，避免突然大量的查询数据，数据库崩溃

view 增加分页代码  方式一

        # 增加分页

        userInfoList = models.User.objects.values().order_by('id')

        print(userInfoList)

        page = MyLimitOffsetPagination()

        print(page)

        page_roles = page.paginate_queryset(queryset=userInfoList, request=request, view=self)

        print(page_roles)

        roles_ser = PagerSerializer(instance=page_roles, many=True)

        print(roles_ser.data)

        # return Response(roles_ser.data)  # 只返回数据

        # return page.get_paginated_response(roles_ser.data)  # 返回前后夜url

        ret = {'code': 1000, 'msg': None, 'data': None,'lens':None}

        try:

            ret['msg'] = '成功'

            ret['data'] = list(page_roles)

            print(len(page_roles))

            print(len(userInfoList))

            ret['lens'] = len(userInfoList)

        except Exception as e:

            ret['code'] = 1001

            ret['msg'] = '失败'

        return (JsonResponse(ret))

这是请求相应如下

方式二

# userlistView.py

创建类

class PagerSerializer(serializers.ModelSerializer):

    class Meta:

        model = User

        fields = "__all__"

直接上代码

# FileName : userListView.py

# Author   : Adil

# DateTime : 2019/8/2 1:46 PM

# SoftWare : PyCharm

from api import models

from django.http import JsonResponse

from rest_framework.views import APIView

from api.models import User

from api.utils.auth import Authentication

from api.common.PageHandle import MyLimitOffsetPagination

from rest_framework import serializers

class PagerSerializer(serializers.ModelSerializer):

    class Meta:

        model = User

        fields = "__all__"

class userListView(APIView):

    authentication_classes = [Authentication]   #  添加认证

    permission_classes = []      # 不尽兴权限控制

    def get(self,request,*args,**kwargs):

        # user1 = models.User.objects.all()

        #

        # print(user1)  # <QuerySet [<User: username: wang,password: 123456>,...

        # userInfoList = models.User.objects.values()

        # print('^^^^^')

        # for userlist in userInfoList:

        #

        #     # userlist = model_to_dict(userlist)

        #     print(type(userlist))

        #     print(userlist)

        # print(type(userInfoList))

        # print("!!!!!")

        # userInfoList = model_to_dict(userInfoList)

        #

        # print(type(userInfoList))

        # print(userInfoList)   #  <QuerySet [{'id': 1, 'username': 'wang', 'password': '123456', 'age': '20', 'e_mail': '272981562@qq.com', 'user_type': 2, 'create_time': datetime.datetime(2019, 7, 30, 21, 16, 12, 301365), 'update_time': datetime.datetime(2019, 7, 30, 21, 16, 12, 301396)}, {'id': 2, ...

        # for userList in userInfoList:

        #     #print(userList)

        # users = models.User.objects.values_list()

        # print("8***")

        # print(users)  # <QuerySet [(1, 'wang', '123456', '20', '272981562@qq.com', 2, datetime.datetime(2019, 7, 30, 21, 16, 12, 301365), datetime.datetime(2019, 7, 30, 21, 16, 12, 301396)), (2, 'yang', '....

        # for user in users:

        #     print(user)

        # 增加分页

        userInfoList = models.User.objects.values().order_by('id')

        print(userInfoList)

        page = MyLimitOffsetPagination()

        print(page)

        page_roles = page.paginate_queryset(queryset=userInfoList, request=request, view=self)

        print(page_roles)

        roles_ser = PagerSerializer(instance=page_roles, many=True)

        print(roles_ser.data)

        # return Response(roles_ser.data)  # 只返回数据

        # return page.get_paginated_response(roles_ser.data)  # 返回前后夜url

        ret = {'code': 1000, 'msg': None, 'data': None,'lens':None}

        try:

            ret['msg'] = '成功'

            ret['data'] = list(page_roles)

            print(len(page_roles))

            print(len(userInfoList))

            ret['lens'] = len(userInfoList)

        except Exception as e:

            ret['code'] = 1001

            ret['msg'] = '失败'

            # return (JsonResponse(ret))

        return (page.get_paginated_response(roles_ser.data))

前端

前端预期

添加router

import userlist from '@/components/userlist'

Vue.use(Router)

var router =  new Router({

  routes: [

    {

      path: '/userlist',

      name: 'userlist',

      component: userlist

    },

新建userlist.vue，里面有两种方式处理后端返回。

<template>

<el-container style="height: 100%; border: 1px solid #eee">

  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

    <el-menu :default-openeds="['1', '3']">

      <el-submenu index="">

        <template slot="title"><i class="el-icon-message"></i>导航一</template>

        <el-menu-item-group>

          <template slot="title">分组一</template>

          <el-menu-item index="1-1">选项1</el-menu-item>

          <el-menu-item index="1-2">选项2</el-menu-item>

        </el-menu-item-group>

        <el-menu-item-group title="分组2">

          <el-menu-item index="1-3">选项3</el-menu-item>

        </el-menu-item-group>

        <el-submenu index="1-4">

          <template slot="title">选项4</template>

          <el-menu-item index="1-4-1">选项4-1</el-menu-item>

        </el-submenu>

      </el-submenu>

      <el-submenu index="">

        <template slot="title"><i class="el-icon-menu"></i>导航二</template>

        <el-menu-item-group>

          <template slot="title">分组一</template>

          <el-menu-item index="2-1">选项1</el-menu-item>

          <el-menu-item index="2-2">选项2</el-menu-item>

        </el-menu-item-group>

        <el-menu-item-group title="分组2">

          <el-menu-item index="2-3">选项3</el-menu-item>

        </el-menu-item-group>

        <el-submenu index="2-4">

          <template slot="title">选项4</template>

          <el-menu-item index="2-4-1">选项4-1</el-menu-item>

        </el-submenu>

      </el-submenu>

      <el-submenu index="">

        <template slot="title"><i class="el-icon-setting"></i>导航三</template>

        <el-menu-item-group>

          <template slot="title">分组一</template>

          <el-menu-item index="3-1">选项1</el-menu-item>

          <el-menu-item index="3-2">选项2</el-menu-item>

        </el-menu-item-group>

        <el-menu-item-group title="分组2">

          <el-menu-item index="3-3">选项3</el-menu-item>

        </el-menu-item-group>

        <el-submenu index="3-4">

          <template slot="title">选项4</template>

          <el-menu-item index="3-4-1">选项4-1</el-menu-item>

        </el-submenu>

      </el-submenu>

    </el-menu>

  </el-aside>

  <el-container style="padding-bottom: 15px">

    <el-header style="text-align: right; font-size: 12px">

      <el-dropdown>

        <i class="el-icon-setting" style="margin-right: 15px"></i>

        <el-dropdown-menu slot="dropdown">

          <el-dropdown-item>退出</el-dropdown-item>

          <!-- <el-dropdown-item>新增</el-dropdown-item>

          <el-dropdown-item>删除</el-dropdown-item> -->

        </el-dropdown-menu>

      </el-dropdown>

      <span>Adil</span>

    </el-header>

    <el-main>

      <el-table :data="tableData">

        <el-table-column prop="create_time" label="日期" width="">

        </el-table-column>

        <el-table-column prop="username" label="姓名" width="">

        </el-table-column>

        <el-table-column prop="username" label="地址">

        </el-table-column>

      </el-table>

    </el-main>

         <el-pagination

         background

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page="currentPage"

      :page-sizes="[10, 20, 30, 50]"

      :page-size="pageSize"

      layout=" sizes, prev, pager, next, jumper"

      :total="total">

    </el-pagination>

  </el-container>

</el-container>

</template>

<style>

  .el-header {

    background-color: #B3C0D1;

    color: #333;

    line-height: 60px;

  }

  .el-aside {

    color: #333;

  }

</style>

<script>

import axios from 'axios';

  export default {

    data() {

      return {

        tableData: [],

        total: 0,

        currentPage: 1,

        pageSize: 10

      }

    },

    created(){

        this.getUserList()

    },

    methods:{

        handleSizeChange(size) {

            this.pageSize = size;

            this.getUserList();

        },

        handleCurrentChange(current) {

            this.currentPage = current;

            this.getUserList();

        },

        getUserList(){

            const token = localStorage.getItem('token');

            axios.get(`/home/userlist/?token=${token}`,

            {headers:{token:localStorage.getItem('token')},

                params: {

                    currentPage: this.currentPage,

                    pageSize: this.pageSize

                }

            }).then((res)=>

        {

            // 后台方式一

            // const data = res.data

            // this.tableData = data.data;

            // this.total = data.lens;

            // 后台方式二

            const data = res.data

            this.tableData = data.results;

            this.total = data.count;

        console.log(res.data);

        // if (res.data.code===1000){

        // //   localStorage.setItem('token',res.data.token);

        // //     this.$router.push({path:'/userlist'});

        // }

        });

        }

        }

// getUserList(){

//             axios.get('/home/userlist/').then((res)=>

//         {

//         console.log(res);

//         // if (res.data.code===1000){

//         // //   localStorage.setItem('token',res.data.token);

//         // //     this.$router.push({path:'/userlist'});

//         // }

//         });

//         }

//         }

  }

</script>

方式二的返回结果如下

django rest_framework vue 实现用户列表分页的更多相关文章

  1. django rest_framework vue 实现用户登录

    django rest_framework vue 实现用户登录 后端代码就不介绍了,可以参考  django rest_framework 实现用户登录认证 这里介绍一下前端代码,和前后端的联调过程 ...

  2. 巨蟒django之CRM2 展示客户列表&&分页

    1.展示客户列表 点击画红线中的views,进入下列界面 路径的查找顺序:应该是先查找外层的templates里边的html,然后查找app里边的templates 另一个会按照app的顺序进行寻找, ...

  3. Vue + ElementUI的电商管理系统实例03 用户列表

    1.通过路由展示用户列表页 新建user文件夹,里面新建Users.vue文件: <template> <div> <h3>用户列表组件</h3> &l ...

  4. 第三百八十八节，Django+Xadmin打造上线标准的在线教育平台—网站列表分页

    第三百八十八节,Django+Xadmin打造上线标准的在线教育平台—网站列表分页 分页可以用一个第三方分页模块django-pure-pagination 下载地址:https://github.c ...

  5. django rest_framework 实现用户登录认证

    django rest_framework 实现用户登录认证 1.安装 pip install djangorestframework 2.创建项目及应用 创建过程略 目录结构如图 3.设置setti ...

  6. python之Django rest_framework总结

    一.rest api    a.api就是接口         如: - http://www.oldboyedu.com/get_user/                - http://www. ...

  7. Django rest framework（7）----分页

    目录 Django rest framework(1)----认证 Django rest framework(2)----权限 Django rest framework(3)----节流 Djan ...

  8. Django rest_framework 实用技巧

    前言: 最近工作中需要用到Django rest_framework框架做API, 边学边写,记录了一些实际工作中需要用到的功能,不是很全也不系统,以后需要什么功能可以在这查询. 后续还会更新其它的用 ...

  9. Python之Django rest_Framework框架源码分析

    #!/usr/bin/env python # -*- coding:utf-8 -*- from rest_framework.views import APIView from rest_fram ...

随机推荐

  1. Mysql-多表数据记录查询

    多表数据记录查询 一.关系数据操作 并(UNION) 并就是把具有相同字段数目和字段类型的表合并到一起 笛卡尔积(CARTESIAN PRODUCT) 笛卡尔积就是没有连接条件表关系返回的结果. 内连 ...

  2. Spring Boot2.0+中，自定义配置类扩展springMVC的功能

    在spring boot1.0+,我们可以使用WebMvcConfigurerAdapter来扩展springMVC的功能,其中自定义的拦截器并不会拦截静态资源(js.css等). @Configur ...

  3. LG2272/BZOJ1093 「ZJOI2007」最大半连通子图 Tarjan缩点+DAG求最长链

    问题描述 LG2272 BZOJ1093 题解 观察半联通的定义,发现图中的一些结点,构成的链一定是一个半联通子图. 此时存在的环可能会干扰求解,于是\(\mathrm{Tarjan}\)缩点. 于是 ...

  4. JavaScript中的对象与原型—你不知道的JavaScript上卷读书笔记（四）

    一.对象 对象可以通过两种形式定义:声明(文字)形式和构造形式.即: var myObj = { key: value // ... }; 或: var myObj = new Object(); m ...

  5. 区块链自问自答 day2

    区块链自问自答 day2 区块链的自治性是如何达成的?为什么能够在去信任的环境下自由安全地交换数据? ​ 区块链中有众多的节点,包含了恶意节点.故障节点.正常节点,想要这些节点共同做出一致的决定就需要 ...

  6. cmd 批处理创建 IIS 站点

    windows 创建站点命令 appcmd C:\Windows\System32\inetsrv\appcmd.exe SITE 虚拟站点的管理 APP 管理应用程序 VDIR 管理虚拟目录 APP ...

  7. Linux配置DHCP服务器，DHCP中继配置

    配置dhcp服务器 第一步:配置网卡 第二步: 安装dhcp (需要先构建yum仓库,构建yum仓库的方法在之前的博客里有) 编写dhcp.conf文件 进去以后会出现这个内容 需要执行下面的内容将内 ...

  8. 雪花算法（snowflake）的JAVA实现

    snowflake算法由twitter公司出品,原始版本是scala版,用于生成分布式ID,结构图: 算法描述: 最高位是符号位,始终为0,不可用. 41位的时间序列,精确到毫秒级,41位的长度可以使 ...

  9. 用友U8删除采购转固卡片后，再次转固找不到采购订单，且其他订单转固报错

    问题描述 1.用户反馈删除两张之前通过采购转固定资产的卡片后,想要再次生成卡片时候,却找不到这两张卡片. 2.用户尝试对其他未转固定资产的订单进行转固,在保存卡片时提示“本次结转将放弃全部已完成的业务 ...

  10. javascirpt的json.stringify()方法在IE浏览器兼容性模式下出错的原因与解决办法

    今天开机混底薪的时候遇到一个JSON.stringify()在IE浏览器兼容模式下的问题. 问题描述 一个弹窗选择的功能原来好好的,突然就不行了. 想要调试调试不了,报错信息也看不到(一开F12这破I ...