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 相关文章推荐
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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编程最快明白》第三讲:php数组
2010/11/01 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
axios 封装上传文件的请求方法
2018/09/26 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python网络爬虫采集联想词示例
2014/02/11 Python
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python 实现绘制整齐的表格
2019/11/18 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
大学生个人自我鉴定
2013/12/03 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
跑吧孩子观后感
2015/06/10 职场文书
一年级语文教学随笔
2015/08/14 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
win10更新失败无限重启解决方法
2022/04/19 数码科技