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


Posted in Javascript onFebruary 10, 2018

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>

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;
}

}

以上这篇vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
深入分析javascript中console命令
Aug 14 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
js评分组件使用详解
Jun 06 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 #Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 #Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 #Javascript
Vue组件和Route的生命周期实例详解
Feb 10 #Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 #Javascript
vue.js 微信支付前端代码分享
Feb 10 #Javascript
详解如何实现一个简单的 vuex
Feb 10 #Javascript
You might like
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
python中for语句简单遍历数据的方法
2015/05/07 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
二手书店创业计划书
2014/01/16 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
拉歌口号大全
2014/06/13 职场文书
节约粮食标语
2014/06/18 职场文书
自我管理的活动方案
2014/08/25 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
详解OpenCV曝光融合
2022/04/29 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers