[
    {
     "id":1,
     "imgUrl":"圖片網(wǎng)址"
    }，
    {
     "id":2,
     "imgUrl":"圖片網(wǎng)址"
    }
     .
     .
     .
     .
]

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)
 
        //用于分段傳輸數(shù)據(jù)(切片方法一次傳遞4條數(shù)據(jù))
        let data=result.slice(start,end)
 
        res.send({data,total:result.length})
    })
})
 
 
app.listen(8000,()=>{
    console.log("開啟成功")
})

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

<div class="pagination">
        <button  >上一頁</button>
        <button >1</button>
        <button >.....</button>
 
        <!-- 中間連續(xù)頁碼的地方:v-for、數(shù)組、對象、數(shù)字、字符串 -->
        <button></button>
 
        <button v-if="startAndEnd.end<totalPage-1">......</button>
        <button>總頁數(shù)</button>
 
        <button >下一頁</button>
 
        <button style="margin-left: 30px">共 {{}} 條</button>
</div>

 <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 {
            //得到數(shù)據(jù)
            imgs: [],
            //總數(shù)
            total:null,
            //請求參數(shù)
            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
        },
        //用于處理分頁器傳遞的當前頁數(shù)，利用全局總線得到數(shù)據(jù)
        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>
 
        <!-- 中間連續(xù)頁碼的地方:v-for、數(shù)組、對象、數(shù)字、字符串 -->
        <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>
  
<script>
export default {
    name: "pagetionItem",
    props: ["total", "pageSize", "pageNo", "pagerCount"],
    computed: {
        //分頁器一共多少頁【總條數(shù)/每頁展示條數(shù)】
        totalPage() {
            //向上取整數(shù)
            return Math.ceil(this.total / this.pageSize);
        },
        //底下的代碼是整個分頁器最重要的地方[算出連續(xù)五個數(shù)字、開頭、結(jié)尾]
        startAndEnd() {
            //算出連續(xù)頁碼:開始與結(jié)束這兩個數(shù)字
            let start = 0,
                end = 0;
            const { totalPage, pagerCount, pageNo } = this;
            //特殊情況:總共頁數(shù)小于連續(xù)頁碼數(shù)
            if (totalPage < pagerCount) {
                start = 1;
                end = totalPage;
            } else {
                //正常情況：分頁器總頁數(shù)大于連續(xù)頁碼數(shù)
                start = pageNo - parseInt(pagerCount / 2);
                end = pageNo + parseInt(pagerCount / 2);
                //約束start|end在合理范圍之內(nèi)
                //約束頭部
                if (start < 1) {
                    start = 1;
                    end = pagerCount;
                }
                //約束尾部
                if (end > totalPage) {
                    end = totalPage;
                    start = totalPage - pagerCount + 1;
                }
            }
            return { start, end };
        },
    }
};