运用 Django 的 Paginator 实现 分页、传递给 Vue 父子组件展示。
首先创建 Django 项目
然后在 子应用的 settings 里 解决跨域
MIDDLEWARE 向我这样的 配置顺序来 配置
然后 在 子应用 的 models 随意的创建一张表 然后 终端 数据库迁移
这里默认使用的是 Django 的 sqlite3
添加后，点击 DB 保存一下 数据就存在了。
然后写视图层， 先注册路由
写 视图层， 引入 需要的资源 Paginator 分页器，Serializer 序列化器，Response 返回响应。
先 在数据库 把 所有数据 拿出来以供使用，然后先定义好一个序列化器（反正代码少）
```python
在这里插入代码片
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)
})
引入 相关的配置，定义序列化器 先前台返回数据，定义分页的类视图，获取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
},
在 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/>'
})
父子组件连接，设置 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>
获取 页面需要的数据，说明一下，用的父子组件 父组件展示数据，子组件 展示 分页的下一页 第几页什么的。
父组件 此时 就已经出现数据了，但是没有点击的东西 看子组件。
<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>
然后 拿着获取的数据 去请求 后台的接口，.then 展示 页面的数据。
然后收工
722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
