Vue+Springboot+MySQL 实现分页

自己想的一个分页的逻辑，分享给大家。
在这里插入图片描述

Vue部分

<template>
    <div>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="userName"
                    label="用户名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="realName"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="useType"
                    label="用户类别">
            </el-table-column>
            <el-table-column
                    prop="docTitleID"
                    label="职称">
            </el-table-column>
            <el-table-column
                    prop="isScheduling"
                    label="是否排班">
            </el-table-column>
            <el-table-column
                    prop="deptID"
                    label="科室">
            </el-table-column>
        </el-table>
        <el-pagination
                small
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total" @current-change="page">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "PageOne",
        created() {
            const _this = this;

            axios.get('http://localhost:8089/userList?pageNum=0&pageSize=' + this.pageSize)
                .then((response) => {
                    _this.tableData = response.data.userList
                    _this.total = response.data.TotalNum
                })
        },
        methods: {
            page(currentPage) {
                const _this = this

                axios.get('http://localhost:8089/userList?pageNum=' + (currentPage - 1) + '&pageSize=' + this.pageSize)
                    .then((response) => {
                        _this.tableData = response.data.userList
                    })
            }
        },
        data() {
            return {
                total: 0,
                pageSize: 5,
                tableData: []
            }
        }
    }
</script>

使用ElementUI做了一个表格。

<el-table-column>标签就是每一列的信息。
<el-pagination>标签就是页码。
@current-change该事件在切换页码时触发。对应的函数page中参数currentPage不需传参，它表示切换的页码，即点击page2，它的值就是2。
在created时，默认请求第一页的数据，这里是用axios发送请求，附带两个参数，即页码数pageNum和每一页要几条数据pageSize。这里的axios还要请求数据的总条数，以ElementUI生成页码。
const _this = this是考虑到axios的回调函数中this指向的不确定性。

Springboot部分

这里只关注Controller部分和Mapper.xml部分。

    @ResponseBody
    @RequestMapping("/userList")
    public Map<String, Object> userList(Integer pageSize, Integer pageNum) {
        Map<String, Object> map = new HashMap<>();
        List<User> userList = userService.findUserList(pageSize, pageNum * pageSize);
        Integer TotalNum = userService.userTotalNum();

        map.put("userList", userList);
        map.put("TotalNum", TotalNum);
        return map;
    }

很简单的逻辑，userService.findUserList(pageSize, pageNum * pageSize)这里的两个参数，就是sql中limit语法中开始索引，索引条数。

  <select id="findUserList" resultType="user">
       SELECT * FROM `user`
       WHERE DelMark = 1
           LIMIT #{pageNum},#{pageSize}
   </select>
    <select id="userTotalNum" resultType="Integer">
        SELECT COUNT(delMark = 1) FROM `user`
    </select>