vue父子组件传参分页

Diango的view.py里 # 后台接口 views 导入：from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage PageNotAnInteger 获取的页码不是整形，抛异常 EmptyPage 超过范围，获取不到页面数据，抛异常 # p.count 总数量 # p.num_pages() 分页数 # p.page_range() 列表形式返回当前可有的页数[1,2,3] ############ 分页 接口 class Index(APIView): def get(self,request): # 获取 ？号传参的页数**query_params page_num = request.query_params.get('page_num') # 如果没有获取的页数就默认赋值为1 if not page_num: page_num = 1 # 查询出当前user表的所有数据进行分页 user = models.User.objects.all() # 每页四条 Paginator【俩个参数，第一个要分页的对象】 p = Paginator(user,4) # 分页user数据，每页显示4条数据 # 把定义好的赋值给p,p就相当于一个分好的盘子 try: # get_page 获取用户输入的页码 user_data = p.get_page(page_num) except PageNotAnInteger: user_data = p.get_page(1) except EmptyPage: user_data = p.get_page(1) # get_page数据拿完后进行序列化，或反序列化。 res = UserSerializer(instance=user_data,many=True) # user_data 代表内容被切成几份的值 res = UserSerializer(user_data,many=True) # 序列化之后返回分页需要的信息 return Response({ 'data':res.data, 'num_pages':p.num_pages, # 最大页码 'page_range':list(p.page_range), # 分了多少页数 }) 接着我们开始搞vue的页面（首先先启动vue服务）

启动 命令 npm run dev

定义一个子组件 # 子组件 <template> <div id="zu"> <!--逻辑介绍：1、子组件中显示页码 2、将当前页码的值通过$emit方法传递到父组件--> <button @click="sub_page">上一页</button> <!--每一页的页码数，点击每一页出每一页的内容--> <button v-for="i in page_range" @click="get_page(i)">{{i}}</button> <button @click="mul_page">下一页</button> </div> </template> <script> export default { name: "zu", data:function () { return { //定义当前页码数的位置 current_page:2 } }, //子组件接收父组件的参数，用props接收（列表） props:['num_pages','page_range'], methods:{ //点击上一页 -1 ，判断如果为第一页的时候，则结束-1 sub_page:function () { if(this.current_page == 1){ return; } this.current_page -= 1; // 将当前的页数封装到一个参数里传递过去 let data = { 'page_num':this.current_page }; //子组件向父组件传参用this.$emit,有俩个参数一个是（'点击事件的日志','传递的内容'） this.$emit('change_page',data) }, //点击下一页进行 +1 mul_page:function () { //在这一块我们需要从后台获取最大分页的次数 if(this.current_page == this.num_pages){ return; } this.current_page += 1; // 将当前的页数封装到一个参数里传递过去 let data = { 'page_num':this.current_page }; //子组件向父组件传参用this.$emit,有俩个参数一个是（'点击事件的日志','传递的内容'） this.$emit('change_page',data) }, // 当前点击页码的变化值 get_page:function (i) { //需要获取到后台page_range的每个数值 this.current_page = i; // 将当前的页数封装到一个参数里传递过去 let data = { 'page_num':this.current_page }; //子组件向父组件传参用this.$emit,有俩个参数一个是（'点击事件的日志','传递的内容'） this.$emit('change_page',data) }, } } </script> 定义一个父组件 # 父组件 <template> <div id="showgoods"> # 用表格渲染页面 <table border="1"> <tr> <td>商品名称</td> <td>商品价格</td> <td>商品图片</td> <td>所属分类</td> </tr> <tr v-for="i in goodslist"> <td>{{i.name}}</td> <td>{{i.price}}</td> <td><img :src="i.image_url" width="100" height="100"> </td> <td>{{i.naem}}</td> </tr> </table> <h1>第{{page_num}}页</h1> <!--向子组件传参的用以下方法--> // @change_page点击传递的日志，就出触发get_num方法 <zu @change_page="get_num" :num_pages="num_pages" :page_range="page_range"></zu> </div> </template> <script> //组件嵌套导入子组件，显示在页面 import zu from '@/components/zu' export default { name: "showgoods", // 组件关联进来 components:{ zu:zu }, data:function () { return { //定义所需要用到的参数 page_range:[], num_pages:'', page_num:1, goodslist:[], } }, methods:{ //将传递的第一个参数作为点击事件，@change_page="get_num"，data作为参数，将data中的当前页码参数赋值给page_num get_num:function (data) { this.page_num = data.page_num; //在methods请求点击接口，获取所有内容 this.axios({ url:'/api/goodslist/?page_num='+this.page_num, method: 'get', }).then(res=>{ console.log(res) if(res.data.code==200){ this.goodslist = res.data.message; } }) } }, //钩子函数，在我们进入页面首先要渲染第一页数据所以--以下 mounted() { //在钩子函数中，请求接口，把当前页码的内容，总页码数，一共多少页，获取到。 this.axios({ url:'/api/goodslist/', method:'get', }).then(res=>{ console.log(res); if(res.data.code==200){ console.log(res); //把当前页码的内容获取到。 this.goodslist = res.data.message; //把当前页码的总页码数获取到。 this.num_pages = res.data.num_pages; //把当前页码的一共多少页，获取到。 this.page_range = res.data.page_range; } }).catch(err=>{ console.log(err) }) }, } </script>

接下来我们搞一种简单的vue分页

view.py #使用CBV书写接口 class S_news(APIView): #定义参数pi def get(self,request,pi): #查询表中的所有数据 cn = models.Create_news.objects.all() # 将获取的数据看做是一个大蛋糕，然后定义分成几份 p = Paginator(cn,2) # 用内置函数获取到前台传递参数 pe = p.get_page(pi) # 将内容进行序列化转为json串（前提把序列化配好） ser = Create_newsSerializer(pe,many=True) return Response({'code':200,'message':ser.data,'page_range':list(p.page_range)}) 路由必须的对应上 path('s_news/<pi>',views.S_news.as_view()), vue页面 //钩子函数的运用 mounted() { this.axios({ //首先默认页面为第一页 url:'/api/showgoodapiview/1', method:'get' }).then(res=>{ if(res.data.code==200){ console.log(res) //将所有的数据接收来 this.gg = res.data.data //将后台的页码范围数接收到 this.page_list = res.data.page_list } }).catch(err=>{ console.log(err) }) }, -------------------------------------------------------------------------------------------- //将获取数据的遍历，并且创造一个点击事件 <button v-for="i in page_list" @click="get_page(i)">{{i}}</button> data:function () { return { gg:[], page_list:[] } }, ------------------------------------------------------------------------------------------------ //定一个方法 i 代表参数 get_page(i){ this.axios({ url:'/api/showgoodapiview/' + i, method:'get' }).then(res=>{ if(res.data.code==200){ console.log(res) //将所有的数据接收来 this.gg = res.data.data //将后台的页码范围数接收到 this.page_list = res.data.page_list } }).catch(err=>{ console.log(err) }) } }