本文主要为大家分享一篇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 < 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 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配置查询
总结：
这是一个比较原生的真分页方法，如果想要实现更加复杂的分页，需要使用相关分页插件。
伤心森林订单留言系统
下载
功能简介：1.用户留言功能2.用户定货功能3.定制货货功能4.定制网页样式和其实设置(比如主页)5.强大的管理功能(现在的程序都是管理功能大于应用功能:)6.管理功能支持查看订货单，留言，分页，删除等功能管理页面：login.asp管理密码：admin
