您现在的位置是：网站首页> 编程资料编程资料

利用Vue模拟实现element-ui的分页器效果_vue.js_

2023-05-24 200人已围观

简介 利用Vue模拟实现element-ui的分页器效果_vue.js_

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("开启成功") })

结果展示：

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() } }

分页器组件