mybatis实现分页

后端数据：

UserController：

package com.jok.controller;

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserMapper userMapper;

    @Autowired
    private UserService userService;


    //接口路径：user/page?pageNum=5&pageSize=6
    //@RequestParam接受👆
    //分页原理：limit第一个参数 = （pageNum-1）* pageSize
    @GetMapping("/page")
    public Map<String, Object> findAll(@RequestParam Integer pageNum,@RequestParam Integer pageSize){
        pageNum = (pageNum-1) * pageSize;
        List<User> data = userMapper.selectPage(pageNum, pageSize);
        Integer total = userMapper.selectTotal();
        Map<String, Object> map = new HashMap<>();
        map.put("data",data);
        map.put("total",total);
        return map;
    }
}

UserMapper:

package com.jok.mapper;

@Mapper
public interface UserMapper {

    @Select("select * from sys_user limit #{pageNum},#{pageSize}")
    List<User> selectPage(Integer pageNum, Integer pageSize);

    @Select("select count(*) from sys_user")
    Integer selectTotal();
}

设置mybatis扫描：

mybatis:
  mapper-locations: classpath:mapper/*.xml  #扫描所有mybatis的xml文件
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

以上就是输出数据库的数据，data[ ]和total[ ]

前端接收：

分页div

<div style="padding: 10px">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
          </div>

export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 2,
      collapseBtnClass: "el-icon-s-fold",
      isCollapse: false,
      sideWidth: 200,
      headerBg: 'headerBg'
    }
  },
  created() {
    //请求分页的数据
    this.load()
  },
  methods: {
    collapse(){
      this.isCollapse = !this.isCollapse
      if(this.isCollapse){
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
      }else {
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
      }
    },
    load(){//请求分页的数据
      fetch("http://localhost:8081/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(res => res.json()).then(res => {
        console.log(res)
        this.tableData = res.data
        this.total = res.total
      })
    },
    handleSizeChange(pageSize){
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    }
  }
};