发表于： 2020-03-06 20:58:49

今天完成的事情

今天主要完成的是分页的功能，通过循环遍历出我们的总页数数目。总页数数目是通过计算得出。在我们得到的get数据中res.data.data.size是每页的条数，res.data.data.total则代表着在数据库中所有的条数。通过res.data.data.total/res.data.data.size而后使用Math.ceil的向上取整功能得到对应的页码，通过在我们的列表项中循环可以得到不同的页码。而后给<li>标签中添加点击事件，并将index参数传入点击事件中，在这个点击事件中我们可以使用之前请求data的回调函数getform

choosepage(index){
            
            this.getform(index+1)
        },

并且在getform中做一个判断，关于我们给出请求地址的判断

 getform(index){
            let _this=this
            this.pagenow=index||this.pagenow     
            axios({
                url:`/api/a/article/search?size=${this.pagesize}&page=${this.pagenow}`,

这样之后就能够实现我们点击哪个页码能够对应的跳转到那一页去了。在这其中我们要给每一个列表项判断一下是否是点击了他才能够出现点击后class变成active的状态，所有我们

:class="index+1==pagenow?'active':''"

并且还有一个是我们的上下页按钮，我们需要给他加入上下页的条件而后使用回调函数。

//上一页
        cutpage(){
            if(this.pagenow>1){
                this.pagenow--
                this.getform(this.pagenow)
            }
        },
        //下一页
        pluspage(){
            if(this.pagenow<this.pagenum){
                this.pagenow++
                this.getform(this.pagenow)
            }
        },

在上下页中需要判断是第一页或者是最后一页时出现的不能操作按钮功能。

 :class="pagenow<=1?'disabled':''"

:class="pagenow>=pagenum?'disabled':''"

这样就不能选中了。之后再我们的两个输入框中确定条数和那一页的问题，使用的是双向绑定的效果，我们通过和get请求中的地址拼接从而确定是什么数字。

     <input type="text" class="paginationGo text-center" v-model="pagesize" >

 <input type="text" class="paginationGo text-center" v-model="pagewhich">

之后我们确定的点击事件中内容还要加上赋值和判断，判断是因为我们在不向输入框中绑定内容时我们刷新出的页码不会在1页上回消失不见所以加上一个判断

   //确定是什么size是什么页码
        getaxios(){
            this.pagenow=this.pagewhich
            if(this.pagewhich==0){
                this.pagenow=1
            }
            this.getform()
        },