• 利用vue模拟element-ui的分页器效果

    前文提要：

    本篇文章实现的是客户端发送请求需要请求

     那些数据，服务器根据请求实现分段数据发送

      比如客户端点击的是第一页，

       服务器发送全部数据的前四条

    目录

    自定义分页器

    1. 思路

    1.1客户端

    1.2服务器

    2.服务器

    2.1创建数据

    2.2创建接口

     3.客户端

    3.1创建静态页面

    3.2请求数据

    3.3解析逻辑

    4.总结

     

    自定义分页器

    效果展示：

    3442122209d74273a0bd6dfb942046ff.gif

     

    1. 思路

    1.1客户端

    利用vue相关的知识搭建基本页面，

    上面四张图片，下面是分页器基本

    效果静态显示。点击分页器实现

    不同数据请求，显示不同图片

    1.2服务器

    根据客户端发送的数据进行数据

    分段传输，比如，点击的是那一页

    分页器每次需要展示几个数据，

    2.服务器

    创建数据（存放图片的网址，以及id）

    创建接口，发送数据。

    2.1创建数据

    创建一个文件夹，下载express

    npm i express

    在该文件先创建一个

    images.json文件使用

    1. [
    2.     {
    3.      "id":1,
    4.      "imgUrl":"图片网址"
    5.     }，
    6.     {
    7.      "id":2,
    8.      "imgUrl":"图片网址"
    9.     }
    10.      .
    11.      .
    12.      .
    13.      .
    14. ]

    2.2创建接口

    根据得到pageNo(用于显示在第几页)，pageSize（一页显示多少数据）

    比如在第一页，那么就是数组的第0项到第四项（pageSize）

    采用切片的方法，我们可以得到一个等式及

    每一项的开始值为当前页减一在乘与pageSize

    start=(pageNo-1)*pageSize

    1. const express=require('express')
    2. const fs=require('fs')
    3. const app=express()
    4. fs.readFile('./images.json',(err,data)=>{
    5.     if(err) return console.log(err)
    6.     let result=JSON.parse(data)
    7.     app.get('/imgsDate',(req,res)=>{
    8.         
    9.         let start=0
    10.  
    11.         let {pageNo,pageSize}=req.query
    12.  
    13.         start=(pageNo-1)*pageSize
    14.  
    15.         let end=parseInt(start)+parseInt(pageSize)
    16.  
    17.         //解决跨域问题
    18.         res.setHeader('Access-Control-Allow-Origin', '*');
    19.         res.setHeader('Access-Control-Allow-Headers', '*');
    20.         console.log(start,end)
    21.  
    22.         //用于分段传输数据(切片方法一次传递4条数据)
    23.         let data=result.slice(start,end)
    24.  
    25.         res.send({data,total:result.length})
    26.     })
    27. })
    28.  
    29.  
    30. app.listen(8000,()=>{
    31.     console.log("开启成功")
    32. })

    结果展示：

    cd94fbefe7a7401e9b08deeeca4869d1.gif

     3.客户端

    需要完成的三大步

    1.创建基本静态页面

    2.请求数据展示

    3.创建逻辑方法

     

    3.1创建静态页面

    home组件内包含分页器组件

    1. <ul >
    2.    <li><img src="">li>
    3. ul>
    4.  <pagetionItem/>

    分页器组件

    1. <div class="pagination">
    2.         <button  >上一页button>
    3.         <button >1button>
    4.         <button >.....button>
    5.  
    6.         
    7.         <button>button>
    8.  
    9.         <button v-if="startAndEnd.end>......button>
    10.         <button>总页数button>
    11.  
    12.         <button >下一页button>
    13.  
    14.         <button style="margin-left: 30px">共 {{}} 条button>
    15. div>

    3.2请求数据

    根据前面的内容，我们需要两个参数pageNo，pageSize

    home组件逻辑

    1.