解决springboot+vue+mybatis中，将后台数据分页显示在前台，并且根据页码自动跳转对应页码信息

解决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('(resp) { _this.tableData = resp.data.books _this.total = resp.data.totals }) }

分页

​​ :page-size="6"​​：自定义页面展示几条数据​​ :total="total"​​​：查询到的数据总数通过这两个数据就可以计数出有几个页面

动态改变页面展示信息

page(currentPage){ const _this = this axios.get('(resp) { _this.tableData = resp.data.books _this.total = resp.data.totals }) }

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。