先看效果


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中,将后台数据分页显示在前台,并且根据页码自动跳转对应页码信息的更多相关文章

  1. SpringBoot 集成MyBatis 中的@MapperScan注解

    SpringBoot 集成MyBatis 中的@MapperScan注解 2018年08月17日 11:41:02 文火慢炖 阅读数:398更多 个人分类: 环境搭建 在SpringBoot中集成My ...

  2. el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除

    前几天遇到一个题,el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除,在这上面用到了递归算法,废话不多说,直接上代码 <template> & ...

  3. EXTJS中grid的数据特殊显示,不同窗口的数据传递

    //EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...

  4. Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容

    >>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...

  5. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  6. 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)

    mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...

  7. MyBatis中批量插入数据对插入记录数的限制

    <基于Mybatis框架的批量数据插入的性能问题的探讨>(作者:魏静敏 刘欢杰 来源:<计算机光盘软件与应用> 2013 年第 19 期)中提到批量插入的记录数不能超过1000 ...

  8. 解决在Vue项目中时常因为代码缩进导致页面报错的问题

    前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...

  9. Vue表格中,对数据进行转换、处理

    众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...

随机推荐

  1. 一文搞懂│XSS攻击、SQL注入、CSRF攻击、DDOS攻击、DNS劫持

    目录 XSS 攻击 SQL 注入 CSRF 攻击 DDOS 攻击 DNS 劫持 XSS 攻击 全称跨站脚本攻击 Cross Site Scripting 为了与重叠样式表 CSS 进行区分,所以换了另 ...

  2. [原创] RestartPC64-中文版v1.0.0.9

    原来发布的RestartPC-中文版和英文版v1.0.0.5,在PE64下无效.所以重新编译了64位版的RestartPC64-中文版v1.0.0.9,可以在PE64下面.正常Win64系统下面重启关 ...

  3. LuoguAT2827 LIS (LIS)

    裸题 #include <iostream> #include <cstdio> #include <cstring> #include <algorithm ...

  4. Luogu3850 [TJOI2007]书架 (平衡树)

    将要插入位置前和前前splay,再连在右子树上. #include <iostream> #include <cstdio> #include <cstring> ...

  5. 图片系列(6)不同版本上 Bitmap 内存分配与回收原理对比

    请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] ...

  6. Docker与GU 安装管理配置

    Linux 下的 Docker 安装与使用 一.安装与配置 1.安装依赖包 1 sudo yum install -y yum-utils device-mapper-persistent-data ...

  7. PowerPoint 常识备忘录

    一句科普 插入超链接时所链接的目标不能是幻灯片中的某个对象.可以给文本.图形等对象添加超链接,链接的对象可以是文件或网页,不能是幻灯片中的某个对象. 名词解释 视图 视图指的是显示幻灯片的方式.视图的 ...

  8. CAD二次开发---关于JoinEntity出现eNotApplicable的问题

    作者在使用JoinEntity时出现eNotApplicable的问题,查阅了Autodesk论坛的相关帖子,发现大多数人都有遇到这个问题,但没有找到合适的解决方法,可能原因是进行Join时两Curv ...

  9. 牛客CSP-S模拟题——十二桥问题

    题面 n <= 50000,m <= 200000,k <= 12 题解 可以从K条边的两端和1结点出发各进行一次O(nlogn)的Dijk,然后就浓缩成了一个最多只有25个点的小完 ...

  10. FFT快速傅立叶变换:解析wav波频图、Time Domain、Frequency Domain

    您好,此教程将教大家使用scipy.fft分析wav文件的波频图.Time Domain.Frequency Domain. 实际案例:声音降噪,去除高频. 结果: 波频图: Time Domain: