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

本文链接：https://blog.youkuaiyun.com/2401_84435866/article/details/138377101

效果展示：

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组件内包含分页器组件

<ul >
   <li><img src=""></li>
</ul>
 <pagetionItem/>

分页器组件

<div class="pagination">
        <button  >上一页</button>
        <button >1</button>
        <button >.....</button>

        <!-- 中间连续页码的地方:v-for、数组、对象、数字、字符串 -->
        <button></button>

        <button v-if="startAndEnd.end<totalPage-1">......</button>
        <button>总页数</button>

        <button >下一页</button>

        <button style="margin-left: 30px">共 {{}} 条</button>
</div>

3.2请求数据

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

home组件逻辑

 <template >
    <div>
        <ul v-for="img in imgs" :key="img.id">
            <li><img :src="img.imgUrl"></li>
        </ul>
        <pagetionItem
        :pageNo="searchParams.pageNo"
        :pageSize="searchParams.pageSize" 
        :total='total' 
        :pagerCount='5'
        class="page"
        @getPages="getPages"/>
    </div>
</template>


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

分页器组件

<template>
    <div class="pagination">
        <button :disabled="pageNo==1" 
        @click="$emit('getPages',pageNo-1)">上一页</button>
        <button v-if="startAndEnd.start > 1"
            @click="$emit('getPages',1)" :class="{active:pageNo==1}">1</button>
        <button v-if="startAndEnd.start > 2">.....</button>

        <!-- 中间连续页码的地方:v-for、数组、对象、数字、字符串 -->
        <button v-for="(page,index) in startAndEnd.end" 
        :key="index" v-if="page >=startAndEnd.start"
        @click="$emit('getPages',page)" :class="{active:pageNo==page}">{{page}}</button>


        <button v-if="startAndEnd.end<totalPage-1">......</button>
        <button v-if="startAndEnd.end<totalPage"
        @click="$emit('getPages',totalPage)" :class="{active:pageNo==total}">{{ totalPage }}</button>

        <button :disabled="pageNo==totalPage" 
        @click="$emit('getPages',pageNo+1)">下一页</button>

        <button style="margin-left: 30px">共 {{total}} 条</button>
    </div>
</template>
  
**前端资料汇总**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)



我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。



更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。