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

前文提要:

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

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

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

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

目录

自定义分页器

1. 思路

1.1客户端

1.2服务器

2.服务器

2.1创建数据

2.2创建接口

 3.客户端

3.1创建静态页面

3.2请求数据

3.3解析逻辑

4.总结


 

自定义分页器

效果展示:

利用vue模拟element-ui的分页器效果_第1张图片

 


1. 思路

1.1客户端

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

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

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

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

1.2服务器

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

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

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


2.服务器

创建数据(存放图片的网址,以及id)

创建接口,发送数据。

2.1创建数据

创建一个文件夹,下载express

npm i express

在该文件先创建一个

images.json文件使用

[
    {
     "id":1,
     "imgUrl":"图片网址"
    },
    {
     "id":2,
     "imgUrl":"图片网址"
    }
     .
     .
     .
     .
]

2.2创建接口

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

比如在第一页,那么就是数组的第0项到第四项(pageSize)

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

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

start=(pageNo-1)*pageSize

const express=require('express')
const fs=require('fs')
const app=express()
fs.readFile('./images.json',(err,data)=>{
    if(err) return console.log(err)
    let result=JSON.parse(data)
    app.get('/imgsDate',(req,res)=>{
        
        let start=0

        let {pageNo,pageSize}=req.query

        start=(pageNo-1)*pageSize

        let end=parseInt(start)+parseInt(pageSize)

        //解决跨域问题
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Allow-Headers', '*');
        console.log(start,end)

        //用于分段传输数据(切片方法一次传递4条数据)
        let data=result.slice(start,end)

        res.send({data,total:result.length})
    })
})


app.listen(8000,()=>{
    console.log("开启成功")
})

结果展示:

利用vue模拟element-ui的分页器效果_第2张图片


 3.客户端

需要完成的三大步

1.创建基本静态页面

2.请求数据展示

3.创建逻辑方法

 

3.1创建静态页面

home组件内包含分页器组件

分页器组件

3.2请求数据

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

home组件逻辑

 


data() {
        return {
            //得到数据
            imgs: [],
            //总数
            total:null,
            //请求参数
            searchParams: {
                pageNo: 3,
                pageSize: 4
            }
        }
    },
    created() {
        this.img()
    },
    methods: {
        async img() {
            let result = await axios.get("http://localhost:8000/imgsDate",
                {
                    params: {
                        pageNo: this.searchParams.pageNo,
                        pageSize: this.searchParams.pageSize
                    }
                })
            this.imgs = result.data.data
            this.total=result.data.total
        },
        //用于处理分页器传递的当前页数,利用全局总线得到数据
        getPages(pageNo){
        this.searchParams.pageNo=pageNo
        this.img()
        }
    }

分页器组件


  

                    
                    

你可能感兴趣的:(node,扩展知识,vue.js,前端,javascript)