vue异步分页+初始化页面

Posted 2021-01-26 njm-f

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;

}

 

}