解决springboot+vue+mybatis中,将后台数据分页显示在前台,并且根据页码自动跳转对应页码信息
先看效果
1、要考虑的问题,对数据进行分页查询
mapper文件这样写
从每次开始查询的位置,到每页展示的条数,
<!-- 分页查询-->
<select id="queryBookList" parameterType="Map" resultType="com.zheng.pojo.Books">
select * from bookss limit #{startIndex},#{pageSize}
</select>
dao、service、serviceimpl略
看controller
关键在这边,传入的page和size是从前台改变页码到指定页
@GetMapping("/findAll/{page}/{size}")
public Map<String,Object> findAll(@PathVariable("page") Integer Page,@PathVariable("size") Integer size) {
//查询所有的书籍信息
@GetMapping("/findAll/{page}/{size}")
public Map<String,Object> findAll(@PathVariable("page") Integer Page,@PathVariable("size") Integer size) {
//准备数据 通过这两个参数,可以算出start 计算方法 start=size(page-1)
int currentPage = Page;//当前是第几页
int pageSize = size; //页面大小
Map<String, Integer> map = new HashMap<String, Integer>();
map.put("startIndex",(currentPage-1)*pageSize);
map.put("pageSize",pageSize);
List<Books> booklist = bookService.queryBookList(map);
HashMap<String,Object> result = new HashMap<>();
Long totals = bookService.findTotals();
result.put("books",booklist);
result.put("totals",totals);
return result;
}
此外还要向前台传输查询到的所有的数量的个数,目的是计算根据总条数和页面大小计算出分几页。
mapper
<select id="findTotals" resultType="Long">
select count(*) from bookss
</select>
dao中的方法
//查询总数
Long findTotals();
2、前端和后台的交互
关键部分代码:
- 这个是请求地址,页面首次加载展示的信息,默认从1开始,页面展示6条信息
const _this = this
区分对象resp.data.books
获取后台的数据resp.data.totals
获取后台的数据_this.tableData
,前台数据变量prop="address"
和后台的属性一致,获取哪个属性的信息
created(){
const _this = this
axios.get('http://localhost:8181/book/findAll/1/6').then(function (resp) {
_this.tableData = resp.data.books
_this.total = resp.data.totals
})
}
分页
:page-size="6"
:自定义页面展示几条数据:total="total"
:查询到的数据总数
通过这两个数据就可以计数出有几个页面
<el-pagination
background
layout="prev, pager, next"
:page-size="6"
:total="total"
@current-change="page">
</el-pagination>
动态改变页面展示信息
page(currentPage){
const _this = this
axios.get('http://localhost:8181/book/findAll/'+currentPage+'/6').then(function (resp) {
_this.tableData = resp.data.books
_this.total = resp.data.totals
})
}
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="bookName"
label="书籍名称"
width="150">
</el-table-column>
<el-table-column
prop="bookAuthor"
label="书籍作者"
width="120">
</el-table-column>
<el-table-column
prop="price"
label="书籍价格"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="书籍出版社"
width="120">
</el-table-column>
<el-table-column
prop="impression"
label="印刷次数"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:page-size="6"
:total="total"
@current-change="page">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
},
page(currentPage){
const _this = this
axios.get('http://localhost:8181/book/findAll/'+currentPage+'/6').then(function (resp) {
_this.tableData = resp.data.books
_this.total = resp.data.totals
})
}
},
created(){
const _this = this
axios.get('http://localhost:8181/book/findAll/1/6').then(function (resp) {
_this.tableData = resp.data.books
_this.total = resp.data.totals
})
},
data() {
return {
total:null,
tableData: []
}
}
}
</script>
解决springboot+vue+mybatis中,将后台数据分页显示在前台,并且根据页码自动跳转对应页码信息的更多相关文章
- SpringBoot 集成MyBatis 中的@MapperScan注解
SpringBoot 集成MyBatis 中的@MapperScan注解 2018年08月17日 11:41:02 文火慢炖 阅读数:398更多 个人分类: 环境搭建 在SpringBoot中集成My ...
- el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除
前几天遇到一个题,el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除,在这上面用到了递归算法,废话不多说,直接上代码 <template> & ...
- EXTJS中grid的数据特殊显示,不同窗口的数据传递
//EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...
- Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容
>>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...
- 在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...
- 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)
mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...
- MyBatis中批量插入数据对插入记录数的限制
<基于Mybatis框架的批量数据插入的性能问题的探讨>(作者:魏静敏 刘欢杰 来源:<计算机光盘软件与应用> 2013 年第 19 期)中提到批量插入的记录数不能超过1000 ...
- 解决在Vue项目中时常因为代码缩进导致页面报错的问题
前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...
- Vue表格中,对数据进行转换、处理
众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...
随机推荐
- 技术分享 | load data导致主键丢失的神秘问题
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 1 ...
- 【安全通告】关于 DolphinScheduler 漏洞情况的说明
点击上方 蓝字关注我们 [安全通报] [影响程度:低] Apache DolphinScheduler 社区邮件列表最近通告了 1 个漏洞,考虑到有很多用户并未订阅此邮件列表,我们特地在此进行情况说明 ...
- Luogu[YNOI2019]排序(DP,线段树)
要最优?就要一步到位,不能做"马后炮",走"回头路",因此将序列映射到一个假定最优序列,发现移动原序列等价于删除原序列元素,以便生成最大不下降子序列.可线段树维 ...
- B/S结构通信系统原理
本文介绍JavaWeb的B/S结构通信原理 概念: Javaweb中B/S架构是一种系统架构形式,这里的B是Browser(浏览器),S是Server(服务器),是一种系统的架构形式,有 ...
- 详解GaussDB(DWS) 资源监控
摘要:本文主要着重介绍资源池资源监控以及用户资源监控. 本文分享自华为云社区<GaussDB(DWS)资源监控之用户.队列资源监控>,作者: 一只菜菜鸟. GaussDB(DWS)资源监控 ...
- KingbaseES timestamp 和 timestamptz 差异比较
KingbaseES 提供两种存储时间戳的数据类型: 不带时区的 TIMESTAMP 和带时区的 TIMESTAMPTZ. TIMESTAMP 数据类型可以同时存储日期和时间,但它不存储时区.这意味着 ...
- flutter系列之:flutter中常用的container layout详解
目录 简介 Container的使用 旋转Container Container中的BoxConstraints 总结 简介 在上一篇文章中,我们列举了flutter中的所有layout类,并且详细介 ...
- MAC MySQL安装配置
1. 下载 下载地址:https://dev.mysql.com/downloads/mysql/ 注意选择对应的版本,M系列芯片对应ARM 2. 安装 参考官网教程, 点击地址查看, 一直点击继续即 ...
- 从零打造“乞丐版” React(一)——从命令式编程到声明式编程
这个系列的目的是通过使用 JS 实现"乞丐版"的 React,让读者了解 React 的基本工作原理,体会 React 带来的构建应用的优势 1 HTML 构建静态页面 使用 HT ...
- 内网横向渗透 之 ATT&CK系列一 win7的yxcms
Yxcms渗透 前言 通过phpMyAdmin慢日志查询Getshell后,蚁剑连接,发现win7下面还有个cms靶场,于是就兴致勃勃的去打了一波. cms渗透 进入页面后,搜刮了页面所有可见信息,发 ...