众所周知的是,所有的后台管理系统都离不开分页,而传统的分页实现,更多的是同后端的进行交互,传递页码并返回当前页所包含的数据,最终进行展示。这种做法存在的弊端就是用户在进行页码切换的时候,后耗费大量的时间,同样也会增加后端工程师的压力,这一次我们通过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里进行了管理
然后就是基本的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就不进行展示了 。
下面说一下页面用到的东西:当前所在页的页码数,默认为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,哈哈。