Django 分页 & Vue父子组件 实现_子组件写个分页 ,请求接口在父组件 怎么写

运用 Django 的 Paginator 实现 分页、传递给 Vue 父子组件展示。
首先创建 Django 项目

然后在 子应用的 settings 里 解决跨域
MIDDLEWARE 向我这样的 配置顺序来 配置
然后 在 子应用 的 models 随意的创建一张表 然后 终端 数据库迁移

这里默认使用的是 Django 的 sqlite3

添加后，点击 DB 保存一下 数据就存在了。

然后写视图层， 先注册路由

写 视图层， 引入 需要的资源 Paginator 分页器，Serializer 序列化器，Response 返回响应。
先 在数据库 把 所有数据 拿出来以供使用，然后先定义好一个序列化器（反正代码少）

```python
在这里插入代码片
1
2
3

from django.shortcuts import render  #渲染django模板
from rest_framework.views import APIView  #导入休息框架 接口框架
from rest_framework.response import Response  #接收字典数据
from rest_framework import serializers
from . import models #导入表
# Create your views here.
from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage

class Indexserializers(serializers.Serializer):  #进行序列化
     name=serializers.CharField(max_length=50)



"""
数据化 负责添加数据
反序化 负责查找数据
"""

```python
class Index(APIView):  #首先定义一个类 继承rest_framework
    def get(self,request):  #使用get请求  常见的请求分为get和post
        page_num=request.query_params.get('page_num')
        if not page_num:
            page_num=1

        authers=models.Auther.objects.all()

        p=Paginator(authers,4)

        try:
            authers_data=p.get_page(page_num)
        except PageNotAnInteger:
            authers_data=p.get_page(1)
        except EmptyPage:
            authers_data=p.get_page(1)

        res=Indexserializers(instance=authers_data,many=True)
        print(p.num_pages)
        print(p.page_range)
        return Response({
            'data':res.data,
            'num_pages':p.num_pages,
            'page_range':list(p.page_range)

        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

1

引入 相关的配置，定义序列化器 先前台返回数据，定义分页的类视图，获取GET的参数，来确定用户想要的页数，在查询所有数据。
这个 request 的 query_params.get() 在官方文档明确标出 专门获取 GET 传参，当然也可以 query_params[‘参数’] 这样获取，但是这样 参数为空的时候 就会报错 很不符合逻辑

这两个 方法 都有对应的注释
然后 创建 我们的 Vue 页面 注册到 index.js 里，因为要做父子组件 所以创建 两个页面

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Fy from '@/components/Fy'
import ShowBook from '@/components/ShowBook'
import Login from '@/components/Login'
import Fenye from '@/components/Fenye'
import Show from '@/components/Show'
import AddT from '@/components/AddT'
import AddC from '@/components/AddC'
import AddS from '@/components/AddS'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/fy',
      name: 'Fy',
      component: Fy
    },


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在 main.js 里 注册 axios 全局解决跨域

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import axios from 'axios'
import $ from 'jquery'


Vue.prototype.axios = axios    //把axios挂载到vue的原型中，在vue中每个组件都可以使用axios发送请求
Vue.prototype.HOME = '/api' 

Vue.config.productionTip = false
Vue.prototype.axios = axios;

    
router.beforeEach((to,from,next)=>{
  if(to.path=='/login' || localStorage.getItem('id')){ 
    
  }else{ alert('请重新登录'); next('/login'); 
  } 
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

父子组件连接，设置 mounted 把 后台发送的数据全部返回过来 使用，

<template>
    <div>
     <h3>第{{ page_num }}页</h3>     <!--  页码 显示第几页 -->
     <li v-for="a in authers">{{ a.name }}</li>  <!-- 循环分页的数据  -->
     <Fy :aaa='page_range' num_pages='num_pages' @change_page_num='get_page_num'></Fy>  <!--使用父子组件 -->
    </div>
</template>
<script>
import Fy from "@/components/Fy";
export default {
    data(){
        return{
            page_range:new Array(), // 定义一个列表 
            num_pages:0,  // 初始化一个值
            page_num:1,   // 初始化页码值
            authers:new Array()  // 定义一个列表
        }
    },
    components:{
        Fy
    },
    mounted(){
        this.axios({   
            url:'http://127.0.0.1:8000/',  //接口 和Django后端对接
            method:'get'  //使用get请求
        }).then((res)=>{
            this.authers=res.data.data,  // 数据
            this.num_pages=res.data.num_pages,  //最大页
            this.page_range=res.data.page_range,  //页码数据遍历
            console.log(this.num_pages)
        })
    },
    methods:{
        get_page_num(data){
            this.page_num=data.page_num // 定义初始化值
            this.axios({
                url:'http://127.0.0.1:8000/?page_num='+this.page_num,  // 将其拼接
                method:'get'
            }).then((res)=>{
                this.authers=res.data.data
            })
        }
    }
}
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

获取 页面需要的数据，说明一下，用的父子组件 父组件展示数据，子组件 展示 分页的下一页 第几页什么的。

父组件 此时 就已经出现数据了，但是没有点击的东西 看子组件。

<template>
    <div>
     <button @click="sub_page_num">上一页</button>  <!-- 当点击 按钮 执行点击事件  将页码减一 -->
     <button v-for="num in aaa" @click="get_num(num)">{{ num }}</button>   <!-- 显示一共有多少页 -->
     <button @click="add_page_num">下一页</button>     <!-- 当点击按钮  执行点击事件  将页码减一 -->
    </div>
</template>
<script>
export default {
    data(){
        return{
            current_page:1 
        }
    },
    props:['num_pages','aaa'],
    methods:{ // 点击事件
        sub_page_num(){   // 上一页
            if(this.current_page==1){  // 判断页码为1时   证明了已经是最起始的页面
                return    //  直接返回   也就是不做任何操作
            }
            this.current_page-=1   //  否则的话  也就是不是第1页  就让他页码减1
            let data={  // 并传递给服务端端   服务端通过传递的页码返回对应页的数据
                page_num:this.current_page
            }
            this.$emit('change_page_num',data) //这个函数 就是 接收 子组件 多个 $emit 发送的多个参数，接收 data，这个 data 就是子组件
        },
        add_page_num(){   // 下一页
            if(this.current_page==this.num_pages){  // 判断页码为最大页的时候 证明了 是最后一页了  数据已经展示完了
                return  // 直接返回   不做任何操作
            }
            this.current_page+=1  // 否则  也就是不是最后一页  后面还有数据  就让他页码加1
            let data={   // 并传递给服务端  服务端通过页码返回数据
                page_num:this.current_page
            }
            this.$emit('change_page_num',data) //这个函数 就是 接收 子组件 多个 $emit 发送的多个参数，接收 data，这个 data 就是子组件
        },
        get_num(num){  // 循环出来的页码  也就是上一页 和下一页  中间的  1,2,3,4,页
            this.current_page=num
            let data={  // 通过传递的 页码  来传递给服务端  获取数据
                page_num:this.current_page
            }
            this.$emit('change_page_num',data)  //这个函数 就是 接收 子组件 多个 $emit 发送的多个参数，接收 data，这个 data 就是子组件
        }
    }
}
</script>






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

然后 拿着获取的数据 去请求 后台的接口，.then 展示 页面的数据。
然后收工