vue异步分页+初始化页面

html代码：

< section class = "container page-home" >

< div id = "main-content" class = "wrap-container zerogrid" >

< article id = "news_content" v-for = "item in items" >

< div class = "col-1-2 right" >

< img :src = "item.coverimage" class = "news_image" />

<!-- :要与img标签之间有空格 -->

</ div >

< div class = "col-1-2 left" >

< a class = "art-category left" href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >{{item.releasetime.substring(0,19)}}</ a >

< div class = "clear" ></ div >

< div class = "art-content" >

< h2 >{{item.title}}</ h2 >

< div class = "info" >

< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >{{item.author}}</ a >

</ div >

< div class = "line" ></ div >

< p >{{item.remark}}</ p >

< a v-bind:href = "['/island/stage/newscontent.html?id='+item.id+'&categoryid='+item.categoryid]" rel = "external nofollow" class = "more" >阅读全文</ a >

< span href = "javascript:;" rel = "external nofollow" class = "more" style = "margin-left:50px;" >浏览量 : {{item.reading}}</ span >

</ div >

</ div >

</ article >

<!-- 循环结束(新闻) -->

</ div >

 

< div id = "pagination" class = "clearfix" >

< ul >

< li v-for = "page in pages" >

< a class = "current" href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" v-if = "currentPage == page" >{{page}}</ a >

<!-- 高亮显示当前页 -->

< a class = "choose_page" v-if = "currentPage != page" @ click = "clickpage" >{{page}}</ a >

</ li >

< li v-if="pages > 1">< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >next</ a ></ li >

</ ul >

</ div >

 

</ section >

 

 

 

 

 

 

vue代码：

 

/查询相关新闻种类下的所有新闻记录

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;

}

 

}