vue.js分页中单击页码更换页面内容(配合spring springmvc)

html代码：

{{item.releasetime.substring(0,19)}}

{{item.title}}

{{item.author}}

{{item.remark}}

阅读全文
浏览量 : {{item.reading}}

• 
  {{page}}
  {{page}}
  


• next

js:

/查询相关新闻种类下的所有新闻记录
var vm = new Vue({
   el: '.page-home', //需要注入的模板的父元素
   data: {
    items :  [],
    pages : [],
    currentPage : []
   }, //end data
   created:function(){
    $.post("/island/stage/queryOneCategoryAllNews.do",{"categoryid":parseInt(categoryid),"currentPage":1},function(data){
    vm.pages = data.totalPage; //总页码
    vm.items = data.list; //循环内容
    vm.currentPage = data.currentPage; //当前页(添加高亮样式)
    }); //end post
   }, //created
   methods:{
    clickpage:function(event){
    var currentPage = $(event.currentTarget).text();
    $.post("/island/stage/queryOneCategoryAllNews.do",{"categoryid":parseInt(categoryid),"currentPage":parseInt(currentPage)},function(data){
    vm.items = data.list; //循环内容
    vm.pages = data.totalPage; //总页码
    vm.currentPage = data.currentPage; //当前页(添加高亮样式)
}); //end post
   } //end method
   }
 }); //end vue

java后台:

package com.zrq.util;


import java.util.List;


import org.springframework.stereotype.Component;


@Component
public class PageUtil {
/*
* // 默认的每页记录数量(10条) private static final int DEFAULT_PAGE_SIZE = 10; //
* 默认当前页 private static final int DEFAULT_CURRENT_PAGE = 1;
*/
// 1.每页显示数量(everyPage)
private int everyPage;
// 2.总记录数(totalCount)
private long totalCount;
// 3.总页数
private long totalPage;
// 4.当前页(currentPage)
private int currentPage;
// 5.起始下标(beginIndex)
private int beginIndex;
// 6.判断是否有上一页
private boolean next;
// 7.判断是否有下一页
private boolean previous;
// 8.返回列表
private List list;


/* 获取总页数 */
public long getTotalPage() {
long remainder = totalCount % this.getEveryPage(); // 剩余数
if (remainder == 0)
totalPage =  totalCount / this.getEveryPage();
else
totalPage =  totalCount / this.getEveryPage() + 1;
return totalPage;
}


/* 判断是否有上一页 */
public void hasPrevious() {
if (currentPage > 1)
this.setPrevious(true);
else
this.setPrevious(false);
}


/* 判断是否有下一页 */
public void hasNext() {
if (currentPage < this.getTotalCount())
this.setNext(true);
else
this.setNext(false);
}


public boolean isNext() {
return next;
}


public boolean isPrevious() {
return previous;
}


public void setTotalPage(long totalPage) {
this.totalPage = totalPage;
}


public void setNext(boolean next) {
this.next = next;
}


public void setPrevious(boolean previous) {
this.previous = previous;
}


public int getEveryPage() {
return everyPage;
}


public long getTotalCount() {
return totalCount;
}


public int getCurrentPage() {
return currentPage;
}


public int getBeginIndex() {
return beginIndex;
}


public List getList() {
return list;
}


public void setEveryPage(int everyPage) {
this.everyPage = everyPage;
}


public void setTotalCount(long totalCount) {
this.totalCount = totalCount;
}


public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}


public void setBeginIndex(int beginIndex) {
this.beginIndex = beginIndex;
}


public void setList(List list) {
this.list = list;
}


public PageUtil(int currentPage, int pageSize) {
this.currentPage = currentPage;
this.everyPage = pageSize;
}


public PageUtil() {
/*
* this.currentPage = DEFAULT_CURRENT_PAGE; this.everyPage =
* DEFAULT_PAGE_SIZE;
*/
}


public PageUtil(int everyPage, int totalCount, int currentPage,
int beginIndex, List list) {
super();
this.everyPage = everyPage;
this.totalCount = totalCount;
this.currentPage = currentPage;
this.beginIndex = beginIndex;
this.list = list;
}


}