解决springboot+vue+mybatis中,将后台数据分页显示在前台,并且根据页码自动跳转对应页码信息
2023-09-14 09:07:25 时间
先看效果
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+shiro+redis(集群redis版)整合教程
- JavaWeb-SpringBoot_(下)腾讯云点播服务之视频的显示-demo
- 轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
- springboot+vue实现前后端分离之后端spring部分(spring boot 2.5.4/vue.js 3.2.4)
- Spring、SpringMVC和Springboot的区别(网摘)
- mybatis如何根据mapper接口生成其实现类(springboot)
- 前后端分离解决跨域问题:springboot做后端+vue做前端
- SpringBoot 解决主键雪花算法配置
- SpringBoot+VUE 前端加密算法 RSA+DES
- springboot配置shiro多项目实现session共享的详细步骤
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- 在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- SpringBoot微服务项目打包成Docker镜像详解
- 基于Java+SpringBoot+Vue+Uniapp前后端分离健身预约系统设计与实现
- 基于Java+SpringBoot+Vue前后端分离驾校管理系统设计与实现(有视频讲解)
- 基于Java+SpringBoot+Vue前后端分离旅游度假系统设计与实现(有视频讲解)
- 基于Java+SpringBoot+Vue前后端分离即时通讯系统设计与实现
- 基于Java+SpringBoot+Vue前后端分离学生宿舍管理系统设计与实现
- 基于Java+SpringBoot+Vue前后端分离商城系统设计与实现
- 基于Java+SpringBoot+Vue求职招聘系统设计与实现(有50页论文)
- IDEA整合SpringBoot-Vue项目
- 仓库管理系统-前后端分离项目(SpringBoot+Vue)
- 【项目实战】SpringBoot整合Oshi实现访问计算机硬件和操作系统信息
- springboot+jwt+shiro+vue+elementUI+axios+redis+mysql简易博客项目