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 相关文章推荐
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
Javascript模块化编程详解
Dec 01 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
php基于redis处理session的方法
Mar 14 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 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
非常不错的MySQL优化的8条经验
2008/03/24 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
JS实现密码框效果
2020/09/10 Javascript
用Python3创建httpServer的简单方法
2018/06/04 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
工程竣工验收申请报告
2015/05/15 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
六年级作文之自救
2019/12/19 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS