20180227.修复BUG并实现关注、粉丝的pagination页码效果

20180227.修复BUG并实现关注、粉丝的pagination页码效果

作者: chenhaoting 
时间: 2018-02-27 
分类: 科研项目日志 
评论
之前的版本看似没问题，调试后发现出现很多新BUG，所以，需要换一下思路，
从后端改起将传递的json字符串改成一段而不是多段，
String result="";
for(int i=0;i<followList.size();i++){

result += followList.get(i).getName()+",";

}
result_obj.addProperty("result", result);
前端再登录后发送异步请求获取：
this.$http.post('/api/UserManager/ReadFollow?name='+sessionStorage.getItem('login_user'))

.then((response)=>{

if(response.data.result){

sessionStorage.setItem('follow',response.data.result);

}

})
.catch(function(err){
console.log(err);
});

在对应的组件里添加钩子函数，确保挂载之前就有收到后端传来的信息：
mounted: function () {

var i=0,j=1;
if(sessionStorage.getItem("login_user")!=null){
this.items.pop();
this.items1.pop();
var arr=new Array();
arr=sessionStorage.getItem("follow").split(',');

j=(arr.length-1)/5;
this.b=j;

for(i=1;i<j+1;i++){
this.items1.push({
page:i,
})
}

//显示5个关注的人
for(i=0;i<arr.length-1&&i<5;i++){
this.items.push({
username:arr[i],
})
}
}else{

}
},

最后要实现页码效果：
html部分代码
<p id="follow_p" class="form-control" v-for="item in items">{{item.username}}<button id="follow_btn" class="btn btn-outline-success">取消关注</button>
</p>

l class="pagination pagination-sm" id="follow_pag">
<li class="page-item">
<a class="page-link" @click="turn_to_first" href="#">«</a>
</li>
<li class="page-item" v-for="(item,index) in items1" ref="menuItem">
<a class="page-link" @click="turn_to_page(index)" href="#">{{item.page}}</a>
</li>

<li class="page-item">
<a class="page-link" @click="turn_to_last" href="#">»</a>
</li>
ul>

功能部分：
turn_to_first:function(){

this.items.pop();
this.items.pop();
this.items.pop();
this.items.pop();
this.items.pop();
this.b=1;
this.a=0;

for(this.a=0;this.a<this.arr.length-1&&this.a<5;this.a++){
this.items.push({
username:this.arr[this.a],
})
}

},
turn_to_last:function(){
this.items.pop();
this.items.pop();
this.items.pop();
this.items.pop();
this.items.pop();
this.b=Math.floor((this.arr.length-1)/5)+1;

for(this.a=this.b*5-5;this.a<this.arr.length-1;this.a++){
this.items.push({
username:this.arr[this.a],
})
}
},
turn_to_page(index){
this.items.pop();
this.items.pop();
this.items.pop();
this.items.pop();
this.items.pop();
this.b=this.$refs.menuItem[index].innerText
for(this.a=this.b*5-5;this.a<this.b*5;this.a++){
if(this.arr[this.a]){
this.items.push({
username:this.arr[this.a],
})
}
}
},