SpringBoot+Vue集成Element实现分页管理以及CRUD

分页管理

后端这里采用了MP来实现数据CRUD操作，具体代码查看：

@GetMapping("/selectPage")
    public IPage<User> findPage(@RequestParam Integer pageNum,
                                @RequestParam Integer pageSize,
                                @RequestParam(defaultValue = "") String username,
                                @RequestParam(defaultValue = "") String email,
                                @RequestParam(defaultValue = "") String address) {
        IPage<User> page = new Page<>(pageNum, pageSize);
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        if (!"".equals(username)) {
            queryWrapper.like("username", username);
        }
        if (!"".equals(email)) {
            queryWrapper.like("email", email);
        }
        if (!"".equals(address)) {
            queryWrapper.like("address", address);
        }
        queryWrapper.orderByAsc("id");
        return userMapper.selectPage(page,queryWrapper);
    }

这里的pageNum是我们前端传来的第1，2，3...页码，但是mysql的limit后的第一个参数应该是（pageNum-1）*pageSize

前端这里的使用axios来请求后端，完成交互

request.get("http://localhost:9090/user/selectPage",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.PageSize,
          username:this.username,
          email:this.email,
          address:this.address
        }
      }).then(res => {
        this.tableData = res.records
        this.total = res.total
      })

//这里的load是放在created里面执行的！

 created(){
    this.load()
  },

 下面的分页是根据element-ui官网找的

<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>

size-change 代表 每页条数 触发的事件，这个事件有一个参数就是每页条数

current-change 代表 当前页 触发的事件，这个事件有一个参数就是当前页的页码

handleSizeChange(pageSize){
      this.PageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      this.load()
    }

每次点击这个页码的时候就回发送pageNum和pageSize。