解决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的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...
随机推荐
- React报错之useNavigate() may be used only in context of Router
正文从这开始~ 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时,会产生"useNavigate() may be used only i ...
- Redis 10 位图
参考源 https://www.bilibili.com/video/BV1S54y1R7SB?spm_id_from=333.999.0.0 版本 本文章基于 Redis 6.2.6 概述 Redi ...
- Reader和Writer区别final.finally.finalize区别
Reader和Writer是字符操作流,Writer是输出的,而Reader是输入的. 首先找到一个文件,比如:File file=new File("."+File.separa ...
- java学习第一天.day06
方法 方法的优点 1. 使程序变得更简短而清晰. 2. 有利于程序维护. 3. 可以提高程序开发的效率. 4. 提高了代码的重用性. static的作用 static在方法中如果没有添加就只能用对象调 ...
- HCIA-datacom 4.3 实验三:网络地址转换配置实验
实验介绍: 网络地址转换NAT(Network Address Translation)是将IP数据报文头中的IP地址转换为另一个IP地址的过程.作为减缓IP地址枯竭的一种过渡方案,NAT通过地址重用 ...
- tty的crash分析
crash> btPID: 410629 TASK: ffff883fea379fa0 CPU: 10 COMMAND: "jupyter-lab"#0 [ffff8823c ...
- 来开源吧!发布开源组件到 MavenCentral 仓库超详细攻略
请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] ...
- java基础———break,continue
break通常用在循环语句之中用来跳出循环: continue终止某次循环过程,跳过尚未执行的语句:接着执行下次是否执行循环的判定:
- Spring集成测试
Spring 集成测试 需要再类的头部加入 @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration({"classpath ...
- 玩转Configmap配置应用的各种姿势
在 k8s 中使用配置主要可以有以下几种方式来实现: 1. 向容器传递命令行参数 2. 为每个容器指定自定义的环境变量 3. 通过特殊类型的卷将配置文件挂载到容器中 在 k8s 中覆盖命令行参数 和 ...