本文主要为大家分享一篇vue.js如何实现真分页的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧。
思路：      前端在初始化过程中，第一步先请求总的条数，然后，再请求第一页数据，然后根据点击翻页事件根据请求页码用ajax（axios和qs）去后台取得数据。
过程：    页码配置项：pagerdata:{
data:[],
page:{
//分页数
arrpagesize:[10,20,30,40],
//分页大小
pagesize:10,
//总分页数
pagecount:1,
//当前页面
pagecurrent:1,
//总数
totalcount:80
}
},

服务impl： @override
public list<a> getpagelist(int startpage, int endpage) throws ioexception {
// todo auto-generated method stub
init();
list<a> list = amapper.selectbypage(startpage,endpage,null);
return list;
}
@override
public integer getcount() throws ioexception {
// todo auto-generated method stub
init();
integer count = (int) amapper.countbyexample(null);
return count;
}

1请求总数vue.js（javascript）代码：created(){
//请求总页数
this.$axios.post("http://localhost:8088/web/listservlet",
{params:{
init:true
}}
,
{
headers:{'content-type': 'application/x-www-form-urlencoded;charset=utf-8'}
}
)
.then(res=>{
console.log(json.stringify(res.data));
var object = eval(res.data);
var totalnum = object["count"];
console.log("totalnum:" + totalnum);
this.pagerdata.page.totalcount = totalnum;
});}

后台代码（java）：string querystring = readrequest(request);
jsonobject object = null;
object = jsonobject.fromobject(querystring);
jsonobject params = (jsonobject) object.get("params");
//判断是是初始化过程
if((params.getstring("init")).equals("true")) {
integer count = service.getcount();
printwriter out = response.getwriter();
jsonobject result = new jsonobject();
result.put("count", count);
logger.info(result.tostring());
out.write(result.tostring());
out.close();
return;
}
logger.info(params.get("startpage"));
logger.info(params.get("endpage"));
//判断不是初始化过程
if((params.getstring("init")).equals("false")) {
printwriter out = response.getwriter();
list<a> list = service.getpagelist(integer.parseint((params.getstring("startpage"))),
integer.parseint((params.getstring("endpage"))));
jsonarray array = jsonarray.fromobject(list);
out.write(array.tostring());
out.close();
return;
}
public string readrequest(httpservletrequest request) throws ioexception {
bufferedreader reader = new bufferedreader(new inputstreamreader(request.getinputstream(),"utf-8"));
string temp = "";
string s = "";
while((temp = reader.readline()) != null)
{
s = s + temp;
}
return s;
}

2请求首页和后续页码vue.js（javascript）代码：//请求首页 1-10
this.$axios.post("http://localhost:8088/web/listservlet",
{params:{
init:false,
startpage:1,
endpage:10
}}
,
{
headers:{'content-type': 'application/x-www-form-urlencoded;charset=utf-8'}
}
)
.then(res=>{
console.log(json.stringify(res.data));
var object = eval(res.data);
var totalnum = object["count"];
console.log("totalnum:" + totalnum);
for(var i = 0; i < res.data.length; i++){
//console.log("res.data[i] is " + i + "\n " + json.stringify(res.data[i]));
var object = eval(res.data[i]);
object.index = i+1;
totalnum ++;
if(i<=10){ //初始化获取数据的过程中，将前10个默认加入分页data
this.pagerdata.data.push(object);
}
}
//this.pagerdata.page.totalcount = totalnum;
});
this.loading = false;
}

翻页（change）：this.$axios.post('http://localhost:8088/web/listservlet',
{params:{
init:false,
startpage:((curpage-1)*this.pagerdata.page.pagesize +1),
endpage:curpage*this.pagerdata.page.pagesize
}},
{
headers:{'content-type':'application/x-www-form-urlencoded;charset=utf-8'}
}
).then(res=>{
console.log(json.stringify(res.data));
var object = eval(res.data);
for(var i = 0; i < res.data.length; i++){
//console.log("res.data[i] is " + i + "\n " + json.stringify(res.data[i]));
var object = eval(res.data[i]);
object.index = (curpage-1)*this.pagerdata.page.pagesize +1 + i;
if(i<=this.pagerdata.page.pagesize){
this.pagerdata.data.push(object);
}
}
//this.pagerdata.page.totalcount = totalnum;
})

后台代码（java）：//判断不是初始化过程
if((params.getstring("init")).equals("false")) {
printwriter out = response.getwriter();
list<a> list = service.getpagelist(integer.parseint((params.getstring("startpage"))),
integer.parseint((params.getstring("endpage"))));
jsonarray array = jsonarray.fromobject(list);
//logger.info(array.get(1).tostring());
out.write(array.tostring());
out.close();
return;
}

额外：                            可添加配置：pagesize，从前台传入后台，修改分页大小
example，条件查询，可在params里配置，用mybatis example配置查询
总结：        这是一个比较原生的真分页方法，如果想要实现更加复杂的分页，需要使用相关分页插件。
以上就是vue.js如何实现真分页的详细内容。