Day28 vue.js搜寻栏 分页(pagination)功能

延续昨日
今天我们且战且走
首先先把最简单的排序专案方法搞定
先创一个sortby function

methods:{
       sortBy(val){
         this.projects.sort((a,b)=>a[val]>b[val] ? -1:1)
       },

以person为例
这个function是 a[person]>b[person]会排序成这样
至於谁大谁小就是按照ascii code吧??
总之这个就可以实现排序
在来添加一个搜寻栏位
首先在这个排序法上面新增一个textfield

并在data设一个search变数

   data(){
       return{
        search:"",
        useraccount:"",
        username:"",
        db_api:global.db_api,
        projects:[]
       }
     },

目前画面长这样

新增一个computed (计算属性)

 computed:{
      filitered(){
        return this.projects.filter((project)=>{
          return project.title.match(this.search)
        });
      }
    }

设定一个 function 叫做filitered
Return this.projects.filiter(project)这段是把原本return的文章阵列做filiter後回传
至於filiter什麽 就是把里面的project.title.match(this.search) 就是把这串回传
所以新的阵列就会变成 project.title要match search的内容(原本的search是空字串所以match所有)
把原本的v-for projects in project 改成project in filitered就完成啦!!

看一下成果


接下来把drawer的图片加上去
接取照片的src方式基本上跟昨天的一模一样


我觉得一页最多就3篇文章就好 接下来就让我们来实行分页
先创几个data

再创一个function 叫做 pagination

 Pagination(){
       this.sliced=this.projects.slice((this.currentpage*this.pagesize)-this.pagesize,(this.currentpage*this.pagesize))
     }

这个funciton的意思是把projects的阵列进行分割後丢到sliced阵列
那麽再来解释这段程序码projects.slice((this.currentpage乘this.pagesize)-this.pagesize,(this.currentpage乘this.pagesize)
首先slice的意思是将阵列拆成几个部分後回传
可以参考 https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

EX projects(0,10)意思是回传阵列的0~10笔"前"的资料
也就是回传projects的第0 1 2 3 4 5 6 7 8 9笔资料
所以我这个sliced阵列回传了第(this.currentpage乘this.pagesize)-this.pagesize~(this.currentpage乘 this.pagesize)笔资料
那麽看到上面的data
currentpage=1pagsize=3(意思是当前是第一页 最大文章为3)
也就是 1乘3-3=0
所以”目前”sliced阵列是等於projects的0~3笔"前"的资料
(也就是projects的 第0笔 第1笔 第2笔)
那如果currentpage变成2呢
就会是第3~6笔"前"的资料
(也就是projects的第3笔 第4笔 第5笔)

然後在我们的getsession里面也跑这个function 确保每次都是第一页

async  GetSession(){
     let articles =await axios.get(`${this.db_api}`+"articles")
     this.projects=articles.data
     this.pagelen=parseInt(this.projects.length/this.pagesize)+1
    this.Pagination()
     let user=sessionStorage.getItem('user-info')
     this.useraccount=JSON.parse(user).id
     this.username=JSON.parse(user).username

并且回传 this.pagelen=parseInt(this.project.lenth/this.pagesize)+1
这麽做的目的是知道我们需要几个切换页

那目前的pagelen的值会是4/3=1.3取整数 然後+1等於2
所以最大页数会是2

再来就刚刚做的filitered也要修改
跑一次pagination然後把原本的this.projects改成sliced

  filitered(){
        //搜寻方法
        this.Pagination()
        return this.sliced.filter((project)=>{   
          return project.title.match(this.search)
        });

然後处理layout(vuetify直接抄)
v-model=currentpage(会知道目前在第几页)
:length=pagelen(会知道最大页数)

最後就完成啦!!

而且可以依照自己的习惯修改pagesize 你一页要放15篇文章也可以
端看自己的layout怎麽设计
今天研究超久的 终於搞定搜寻栏跟分页了
目前剩下的进度
1.完善团队介绍
2.新增管理者帐号功能删帐号删除文章等等
3.把专案打包成docker
看起来是有望完成了!!!
我们明天见!