Springboot+mybatis使用PageHelper实现vue前端分页

1、未分页前的vue前端效果图

2、Springboot+mybatis使用PageHelper分页逻辑：

（1）Springboot、mybatis、PageHelper的版本：

（2）yml文件配置pagehelper：

pagehelper:
    # 分页插件会自动检测当前的数据库链接，自动选择合适的分页方式（可以不设置）
    helper-dialect: mysql
    # 上面数据库设置后，下面的设置为true不会改变上面的结果（默认为true）
    auto-dialect: true
    page-size-zero: false
    reasonable: true
    # 默认值为 false，该参数对使用 RowBounds 作为分页参数时有效。（一般用不着）
    offset-as-page-num: false
    # 默认值为 false，RowBounds是否进行count查询（一般用不着）
    row-bounds-with-count: false
    # 用于控制默认不带 count 查询的方法中，是否执行 count 查询，这里设置为true后，total会为-1
    default-count: false
    supportMethodsArguments: true
    params: count=countSql
    autoRuntimeDialect: true

此处我是配置在spring层级下的：

（3）controller、serviceimpl层级逻辑：

controller层：要接收前端传的当前页、页面数据量，没有就设置默认值，避免出现异常。

impl层：Mapper以及Service都不需要更改，直接在impl中加入分页方法即可。
PageHelper.startPage(pageNum, pageSize);

eg：PageHelper.startPage(2, 10)==>即查询第二页的数据，每页是10条数据。

3、前端vue的分页逻辑：

（1）外部：

如果传入了 page-size，且布局包含 page-size 选择器（即 layout 包含 sizes），必须监听 page-size 变更的事件。

<Switch v-model:value="status" /> //v-model等价于@update:value="status=$event"

<el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="sizes, prev, pager, next"
                :total="countProducts"
                @size-change="handleSizeChange"
                @current-change="handleSizeChange"
        />

（2）内部：

前端设置默认赋值：

data () {
            return {
                // accountInfo数据绑定对象
                productInfos: [],
                show: true,
                countProducts: 20,//总数据默认20条
                currentPage: 1,//默认当前第一页
                pageSize: 10,//页面大小，默认十条
                selectMode: 'single'
            }
        }

内部的请求方法：

进入列表时自动请求展示数据（第一页的10条数据，以及获取总数分页码）

productInfo() {
                const proInfo = this.$http.post('productByPage')
                proInfo.then((dd) => {
                    const res = dd
                    console.log(res)
                    if (res.data.code !== 1) {
                        alert("发生某些错误，请重试")
                        this.$router.push('/userIndex')
                    }
                    // turn in /home
                    if (res.data.code === 1)
                        this.productInfos = res.data.data
                    console.log(this.productInfos)
                })

                const countProduct = this.$http.post('productTotal')
                countProduct.then((dd) => {
                    const res = dd
                    console.log(res)
                    if (res.data.code !== 1) {
                        alert("发生某些错误，请重试")
                        this.$router.push('/userIndex')
                    }
                    // turn in /home
                    if (res.data.code === 1)
                        this.countProducts = res.data.data
                    console.log(this.countProducts)
                })
            }

切换页码时下一页或者指定页码的请求方法：此处切换页面数据量大小（外部对应@current-change=“handleSizeChange”）和切换页码（外部对应@size-change=“handleSizeChange”）均用此方法。

handleSizeChange(){
                const proInfo = this.$http.post('productByPage?pageNum='+ this.currentPage + '&pageSize=' +this.pageSize)
                proInfo.then((dd) => {
                    const res = dd
                    console.log(res)
                    if (res.data.code !== 1) {
                        alert("发生某些错误，请重试")
                        this.$router.push('/userIndex')
                    }
                    // turn in /home
                    if (res.data.code === 1)
                        this.productInfos = res.data.data
                    console.log(this.productInfos)
                })

                const countProduct = this.$http.post('productTotal')
                countProduct.then((dd) => {
                    const res = dd
                    console.log(res)
                    if (res.data.code !== 1) {
                        alert("发生某些错误，请重试")
                        this.$router.push('/userIndex')
                    }
                    // turn in /home
                    if (res.data.code === 1)
                        this.countProducts = res.data.data
                    console.log(this.countProducts)
                })
            }

4、分页后的vue前端效果图

至此，Springboot+mybatis使用PageHelper实现了vue前端分页功能（支持页码切换和展示的数据量切换）。

参考资料：
1、vue-element3官方分页组件使用：https://element-plus.gitee.io/zh-CN/component/pagination.html
2、你不知道的PageHelper：（主要参考配置文件需要配置的参数）https://zhuanlan.zhihu.com/p/77147210