Vue+mockJs+axios 实现分页功能

最新推荐文章于 2024-05-06 21:36:41 发布

ι丶小叫花子灬

最新推荐文章于 2024-05-06 21:36:41 发布

阅读量637

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_25245553/article/details/105644695

版权

vue 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

参考芳姐的课程，由于本人不会写接口，直接使用mock模拟了一个接口

效果图
在这里插入图片描述
html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页功能</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/style.css">
    <script type="text/javascript" src="./js/common/mock.js"></script>
    <script type="text/javascript" src="./js/common/axios.js"></script>
    <script type="text/javascript" src="./js/common/vue.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript" src="./js/pagination.js"></script>
</head>
<body>
    <div id="page">
        <div class="page-container">
            <!-- 头部 -->
            <div class="page-head">
                <h2>Vue+mockJs+axios 实现分页功能</h2>
            </div>
            <!-- 内容 -->
            <div class="page-content">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>商品详情</th>
                        </tr>
                    </thead>
                    <tbody v-if="pageList.rows && pageList.rows.length > 0">
                        <tr v-for="(row, i) in pageList.rows" :key="i">
                            <td>{{productId(i)}}</td>
                            <td>{{row.name}}</td>
                            <td>{{row.price | priceFilter}}</td>
                            <td>
                                <button class="btn btn-success">商品详情</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 分页 -->
            <div class="page-content" style="text-align: right" v-if="pageList.rows.length > 0">
                <ul class="pagination" style="display: inline-block;"> 
                    <li class="page-item" @click="jumpTo(pageList.pageIndex - 1)">
                        <button href="#9lala" :disabled="pageList.pageIndex == 1">&laquo;</button>
                    </li>
                    <li class="page-item" @click="jumpTo(1)" v-show="pageList.pageIndex > 1">
                        <button>1</button>
                    </li>
                    <li class="page-item" v-show="pageList.pageIndex > 3 && pageList.pageNum > 10">
                        <button>···</button>
                    </li>
                    <li class="page-item" v-for="(item, index) in middlePages" :key="index" @click="jumpTo(item)">
                        <button :class="item === pageList.pageIndex ? 'active' : ''">{{item}}</button>
                    </li>
                    <li class="page-item" v-show="pageList.pageNum > 10 && pageList.pageIndex < 15">
                        <button>···</button>
                    </li>
                    <li class="page-item"  @click="jumpTo(pageList.pageNum)">
                        <button>尾页</button>
                    </li>
                    <li class="page-item" @click="jumpTo(pageList.pageIndex + 1)">
                        <button href="#9lala" :disabled="pageList.pageIndex == pageList.pageNum">&raquo;</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Css部分

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    cursor: pointer;
}

.page-container {
    width: 98%;
    margin: 1%;
    border: 1px #e5ebe3 solid;
    border-radius: 5px;
}

.page-container .page-head {
    width: 100%;
    background-color: #ddedd8;
    color: #3d6f41;
    padding: 1%;
}

.page-container .page-content {
    width: 100%;
    padding: 1%;
}

.page-content tr th,td {
    text-align: center;
    color: #5d8b8b;
}

.page-left-tip, .page-right-tip {
    font-size: 16px;
    color: #5d8b8b;
}

.page-left-tip {
    float: left;
    padding-top: 1.5%;
}

.page-right-tip {
    float: right;
    padding-top: 1.5%;
}

.page-item {
    display: inline-block;
    font-size: 14px;
    padding: auto;
    margin-right: 5px;
}

.page-item button {
    width: 35px;
    height: 35px;
    border: none;
    border-radius: .3rem;
    box-shadow: 0 0 0 .5px #7d9191;
}

.page-item button:hover {
    background: #449D44;
}

.active {
    background: #5CB85C;
    color: #fff;
}

这里说一下思路，我是根据当前页码，采用数组的slice来得到中间要显示的页码
js部分

window.onload = () => {
    new Vue({
        el: '#page',
        data: {
            pageList: {
                rows: [],
                pageIndex: 1,
                pageSize: 6,
                pageNum: 0,
                totalPages: []
            }
        },

        mounted () {
            this.getList()
        },

        filters: {
            priceFilter (price) {
                return '￥' + price
            }
        },

        computed: {
            productId () {
                return function (i) {
                    return (this.pageList.pageIndex - 1) * this.pageList.totalPages + (i + 1)
                }
            }

			middlePages () {
                if(this.pageList.totalPages.length <= 6) {
                    return this.pageList.totalPages.slice(1, this.pageList.totalPages.length - 1)
                }else {
                    if(this.pageList.pageIndex - 1 < 2) {
                        return this.pageList.totalPages.slice(this.pageList.pageIndex - 1, this.pageList.pageIndex + 4)
                    } else {
                        if (this.pageList.pageNum - this.pageList.pageIndex < 4) {
                            return this.pageList.totalPages.slice(this.pageList.totalPages.length - 5, this.pageList.totalPages.length)
                        }else {
                            return this.pageList.totalPages.slice(this.pageList.pageIndex - 2, this.pageList.pageIndex + 3)
                        }
                        
                    }
                }
            }
        },

        methods: {
            async getList (i) {
                this.pageList.pageIndex = i || this.pageList.pageIndex
                await axios.post('http://localhost:8080/list', {
                    pageIndex: this.pageList.pageIndex,
                    pageSize: this.pageList.pageSize
                }).then(res => {
                    console.log(res.data)
                    this.pageList.rows = res.data.data.rows
                    this.pageList.totalPages = res.data.data.totalPages
                }).catch(err => {
                    console.log(err)
                })
            },

            toggleArray (num) {
                for(let i = 0; i < num; i++) {
                    this.pageList.totalPages.push(i + 1)
                }
            },

            jumpTo (index) {
                this.pageList.pageIndex = index
                this.getList(index)
            },
        }
    })
}

mockJs部分

const Random =  Mock.Random
const pageList = []

for(let i = 0; i< 104; i++) {
    const page = {
        'id': i + 1,
        'name': Random.title(3),
        'price': Random.integer(1, 100)
    }

    pageList.push(page)
}

// 分页接口
Mock.mock('http://localhost:8080/list', 'post', (params) => {
    const info = JSON.parse(params.body)
    console.log(info)
    const [index, size, total] = [info.pageIndex, info.pageSize, pageList.length]
    const len = total/size
    const totalPages = len - parseInt(len) > 0 ? parseInt(len) : len
    const curPageList = pageList.slice(index * size, (index + 1) * size)
    return {
        'code': '0',
        'message': 'success',
        'data': {
            'pageIndex': index,
            'pageSize': size,
            'rows': curPageList,
            'total': total,
            'totalPages': totalPages
        }
    }
})

总结，分页一般包括（一次性请求-数据量少的情况、后端根据前端需求返回固定数量条数），总的来说还是不难理解的，最重要的是要明白需要定义哪些驱动数据（比如页码、总页数、总条数）一般后端是要传过来包括（总页数和总条数，只传总条数前端也可以自己计算），后面的就是一些业务逻辑和mock的接口的配置了

ι丶小叫花子灬

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue+mockJs+axios 实现分页功能

Vue+mockJs+axios 实现分页功能参考芳姐的课程，由于本人不会写接口，直接使用mock模拟了一个接口html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
复制链接

扫一扫