本文主要为大家分享一篇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 getPageList(int startpage, int endpage) throws IOException {
// TODO Auto-generated method stub
init();
List 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 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 //console.log("res.data[i] is " + i + " " + JSON.stringify(res.data[i]));
var object = eval(res.data[i]);
object.index = i+1;
totalNum ++;
if(ithis.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 //console.log("res.data[i] is " + i + " " + JSON.stringify(res.data[i]));
var object = eval(res.data[i]);
object.index = (curpage-1)*this.pagerData.page.pageSize +1 + i;
if(ithis.pagerData.data.push(object);
}
}
//this.pagerData.page.totalCount = totalNum;
})
登录后复制
后台代码（Java）：
//判断不是初始化过程
if((params.getString("init")).equals("false")) {
PrintWriter out = response.getWriter();
List 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如何实现真分页的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2778215.html
