NodeJs+Vue+MongoDB后台管理系统模板（2）vue实现分页

ゞ浴缸里的玫瑰 2023-08-17 16:02 149阅读 0赞

众所周知的是，所有的后台管理系统都离不开分页，而传统的分页实现，更多的是同后端的进行交互，传递页码并返回当前页所包含的数据，最终进行展示。这种做法存在的弊端就是用户在进行页码切换的时候，后耗费大量的时间，同样也会增加后端工程师的压力，这一次我们通过vue实现分页功能。

首先是数据问题，在node里直接查询所有的用户返回给前台。

// 获取全部用户信息
    router.get('/userList',(req,res)=>{
        DB.find('user', {},(err, users)=>{
            if(err){
                res.send({
                    code : 0 ,
                    msg : '查询失败'
                });
                return
            }
            res.send({
                code:1,
                users:users
            });
        });
    });

在store的action里定义了相关的获取。

async getUsers({commit}){
        const result = await reqUsers();
        if(result.code === 1){
            const users = result.users;
            commit(RECEIVE_USER,{users})
        }
    },

在mutation里进行了数据的更新。

[RECEIVE_USER](state,{users}){
        state.users = users
    },

就这样直接把所有用户的信息放在了vuex里进行了管理

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70][]

然后就是基本的HTML部分的内容了，大概说一下：判断用户的数量大于8的时候再显示分页的内容，在select里遍历每页多少条数据的数组，用于调整每页显示数据条数，封装跳转页码的函数chengPages（），最后是一个找转到指定页码的按钮。大概的代码如下。

<div class="page" v-if="users.length>8">
        <ul>
            <li style="padding: 0">
                <label>
                    <select class="selectPage" v-model="pageSize">
                        <option v-for="(pageData,index) in pageDataList" :value="pageData" :key="index">每页{
       {pageData}}条</option>
                    </select>
                </label>
            </li>
            <li @click="chengPages(1)">首页</li>
            <li v-for="i in pages" :key="i" @click="chengPages(i)" :class="{'on': pageNum ===i }" v-if="i-pageNum>-3 && i-pageNum<3">{
       { i }}</li>
            <li @click="chengPages(pages)">尾页</li>
            <li><input class="choisePage" type="text" v-model="choise" @keyup.enter="chengPages(choise)"><span @click="chengPages(choise)">跳转</span></li>
        </ul>
    </div>

整体的样式如下，具体的css就不进行展示了 。

![20190927203456607.png][]

下面说一下页面用到的东西：当前所在页的页码数，默认为1，每页显示的数据条数，我的默认值为8，跳转页码输入值，默认为空字符串，每页显示多少条数据的数组，一定要包含默认值，即pageSize。

data(){
        return{
            pageNum : 1, //当前页数
            pageSize : 8, //每页多少条数据
            choise:'',//跳转页数
            pageDataList:[2,4,8,10,15,20,30,50,100],//每页数据量数组
        }    
    }

下面就是相关的函数封装了,它的主要功能就是控制显示的页码，其中要加上相关的判断，判断是否小于1或大于总页数，小于1的情况下调到第一页，大于最大页的情况下，调到最后一页。

chengPages(number){ // 定义一个页数跳转函数
        number = number*1;
        if(number<=0){
            number = 1;
            this.choise = 1;
        }
        if(number>this.pages){
            number = this.pages;
            this.choise = this.pages;
        }
        this.pageNum = number
    }

用的多的当属计算属性了，第一个在引入mapState的情况下，直接拿得到所有用户的数据，接下来就是通过总用户数，每页显示数据条数，计算出总页数了，最后向上取整返回。重头戏就是通过上面所提到的数据，生成一个包含当前页数据的数组进行返回，最后在页面上进行遍历。

...mapState(['users']), //拿到所有的用户数据
    pages(){ //计算总共总共多少页
        let number = 0;
        const allUser = this.users;
        const pageSize = this.pageSize;
        number = allUser.length/pageSize;
        return Math.ceil(number);
    },
    pageData(){ //当前页显示的数据
        let users = [];
        const pageNum = this.pageNum; //当前页数
        const allUser = this.users; //所有用户
        const pageSize = this.pageSize; //每页多少条数据
        allUser.forEach((node,index)=>{
            if( index >= pageSize*(pageNum-1) && index < pageSize*pageNum){
                users.push(node)
            }
        });
        return users
    },

其实到这里已经差不多了，但是当每页数据量少时，可以改变一个相对大一点的页码数，当再次调整每页数据条数的时候，当前页不会改变，计算出当前页的数据为空，为了避免这种情况的发生，需要对当前页数据进行监听，当pageData的长度为零时，直接跳转到第一页，避免问题发生。

watch: {
        pageData(value) { //监听当前页数据，数据没有时跳转第一页
            if(value.length===0){
                this.pageNum = 1
            }
        }
    }

这样在进行页面的跳转的时候，就不会出现问题了。

最后想要完整代码的，欢迎访问我的[GitHub][]，最好来个Star，哈哈。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70]: /images/20230810/a7a8b58bad754b81a152298e621c0025.png
[20190927203456607.png]: /images/20230810/888c53f622f84899a0d4d85170720273.png
[GitHub]: https://github.com/hushuaibo/mobileBooksCampusAdmin/blob/master/src/page/user/user.vue