使用SpringBoot Vue与MyBatis实现前后端数据分页

文章目录

先看效果

1、要考虑的问题，对数据进行分页查询

2、前端和后台的交互

先看效果

1、要考虑的问题，对数据进行分页查询

mapper文件这样写从每次开始查询的位置，到每页展示的条数，

select * from bookss limit #{startIndex},#{pageSize}

dao、service、serviceimpl略看controller关键在这边，传入的page和size是从前台改变页码到指定页

@GetMapping("/findAll/{page}/{size}")

public Map findAll(@PathVariable("page") Integer Page,@PathVariable("size") Integer size) {

//查询所有的书籍信息

@GetMapping("/findAll/{page}/{size}")

public Map findAll(@PathVariable("page") Integer Page,@PathVariable("size") Integer size) {

//准备数据 通过这两个参数，可以算出start 计算方法 start=size(page-1)

int currentPage = Page;//当前是第几页

int pageSize = size; //页面大小

Map map = new HashMap();

map.put("startIndex",(currentPage-1)*pageSize);

map.put("pageSize",pageSize);

List booklist = bookService.queryBookList(map);

HashMap result = new HashMap<>();

Long totals = bookService.findTotals();

result.put("books",booklist);

result.put("totals",totals);

return result;

}

此外还要向前台传输查询到的所有的数量的个数，目的是计算根据总条数和页面大小计算出分几页。mapper

select count(*) from bookss

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"：查询到的数据总数通过这两个数据就可以计数出有几个页面

background

layout="prev, pager, next"

:page-size="6"

:total="total"

@current-change="page">

动态改变页面展示信息

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

})

}