vue实现分页_翻页组件paginator

今天做vue翻页，查了好多都很麻烦，我相信一定会有简单的方法，果然，朋友们，往下看
首先进入vue项目里面安装一个模块

cnpm install vue-paginator-simple --save-dev

接下来在你的components文件夹里面创一个paginator.vue组件

在该组件里面复制粘贴上一下代码

<template lang="html">
        <div class="pagination">
            <ul>
                <li :class="{disabled: curPage == 1}" @click="prevPage" v-if="pageCount > 1">上一页</li>
                <li :class="{active: curPage == 1}" @click="page(1)">1</li>
                <li class="ellipsis" v-show="curPage > 5 && pageCount > 10">...</li>
                <li :class="{active: curPage == index+offset}" v-for="(item,index) in middlePages" @click="page(index+offset)">{{index+offset}}</li>
                <li class="ellipsis" v-show="curPage < bigLimit && pageCount > 10">...</li>
                <li :class="{active: curPage == pageCount}" @click="page(pageCount)" v-if="pageCount > 1">{{pageCount}}</li>
                <li :class="{disabled: curPage == pageCount}" @click="nextPage" v-if="pageCount > 1">下一页</li>
            </ul>
        </div>
    </template>
    
    <script>
        export default {
            props:['pageCount'],
            data(){
                return {
                    curPage: 1,
                };
            },
            computed:{
                middlePages(){
                    if(this.pageCount <= 2){
                        return 0;
                    }else if(this.pageCount> 2 && this.pageCount <= 10){
                        return this.pageCount-2;
                    }else{
                        return this.curPage > 999 ? 5 : 8;
                    }
                },
                bigLimit(){
                    return this.middlePages > 5 ? this.pageCount-6 : this.pageCount -3;
                },
                offset(){
                    if(this.curPage <= 5){
                        return 2;
                    }else if(this.curPage >= this.bigLimit){
                        return this.bigLimit-2;
                    }else{
                        return this.middlePages > 5 ? this.curPage-3 : this.curPage-2;
                    }
                }
            },
            methods:{
                page(indexPage){
                    this.$emit('togglePage',indexPage);
                    this.curPage = indexPage;
                },
                prevPage(){
                    if(this.curPage != 1){
                        this.page(this.curPage-1);
                    }
                },
                nextPage(){
                    if(this.curPage != this.pageCount){
                        this.page(this.curPage+1);
                    }
                }
            }
        };
    </script>
    
    <style lang="css" scoped>
        @import 'styles/vars.css';
        .pagination{
            width: 660px;
            text-align: center;
            ul{
                margin: 40px 0 60px 0;
                li{
                    cursor: pointer;
                    display: inline-block;
                    padding: 5px 9px;
                    border: 1px solid #e1e1eb;
                    margin-right: 5px;
                    &.active{
                        background: #4078c0;
                        color: #fff;
                    }
                    &.ellipsis{
                        border: none;
                    }
                    &.disabled{
                        color: #dcdcdc;
                    }
                }
            }
        }
    </style>

它封装好了翻页和样式，我们接下来在用到的vue组件里引用

 <!-- 在你的 template 里面找个合适地方粘上这行代码，它是一个点击事件，点击某一页 -->
            <template>
               <paginator :pageCount="pageCount" :initPage="initPage" @togglePage="togglePage($event)"></paginator>
            </template>

在你的 script 下面引入这个模块

import vuePaginator from 'vue-paginator-simple';

接下来要给上面的点击事件里的两个变量初始值

在 script 里面 ，data下面使用模块

    components:{
            'paginator': vuePaginator,
        },

然后将翻页 样式导入进来

  <style lang="css">
        @import 'vue-paginator-simple/dist/vue-paginator-simple.css';
    </style>

接下来该定义点击事件了，咱们最上面是有一个点击某一页的点击事件，它是携带参数的，点击那一页它会带着哪一页的参数过来，这个很重要

methods:{
            togglePage(indexPage){
                //打印出当前页数
                console.log(indexPage);
                var zipFormData = new FormData();
                zipFormData.append('num', indexPage);
                this.axios.post('/api/get_data/',zipFormData).then(res=>{
                    // console.log(res.data.mes)
                    var code = res.data.code
                    if(code==200){
                        console.log(res.data.mes)
                        this.spider_list = res.data.mes
                        this.pageCount = res.data.total
                    }
                    
                }).catch(function(error){
                    console.log(error)
                })

            },

目前为止前台翻页样式和点击功能已经做好了，接下来看看后台怎么处理的
后台view里面导入模块

from django.core.paginator import Paginator

后台获取到当前第几页就可以根据django分页模块处理数据了

class Get_data(APIView):
    def post(self,request):
        spideras = Spider_data.objects.all()[:10]    # 取10条，这个自便
        
        current_page = request.data['num']   # 获取当前第几页   
        page_count = 3                       # 每页显示多少条   自己设定     
        page = Paginator(spideras,page_count) # 分页操作  
        spiderlist = page.get_page(current_page)  # 根据当前页显示信息   
        total_page = page.num_pages             # 计算一共有多少页
        spider_list = spiderModelSerializer(spiderlist,many=True)   # 将数据序列化

        mes = {'code':200,'mes':spider_list.data,'total':total_page}  # 返回数据和总页数
        return Response(mes)

终于写完了，简单的Demo，效果如下