vue2向springboot传值接收不到-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2向springboot传值接收不到。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我们在开发项目时，经常会前后端分离，这样方便开发和测试。但是前后端分离也会导致许多的BUG出现。

这是一段vue2代码：

let url = this.urls.search + "/" + this.currentPage + "/" + this.pageSize;
axios({
    method: "POST",
    url: url,
    data: this.searchForm
}).then((res) => {
    if (res.status === 200) {
      this.loading = false;
      this.menuList = res.data.data;
    } else {
        this.$message({
        type: 'error',
        message: res.data.msg
      });
    }
}).catch((error) => {
    console.log(error);
    this.loading = false;
    this.$message.error("服务器异常，请稍后再试");
});

这是一个常见的axios方法，其作用是进行分页+条件查询。在这个方法中，我们需要向后端传的值有currentPage（当前页码）、pageSize（一页数据条数）和查询的对象。我们再来看后端代码：

    @PostMapping("/list")
    public Result<List<BusinessVO>> list(Integer pageIndex, Integer pageSize, BusinessDTO businessDTO) {
        return Result.getSuccessResult(businessService.list(pageIndex, pageSize, businessDTO));
    }

这是后端controller层的方法，通过url来实现方法的调用。

但是这样写的话，会发现一个问题：前端的参数后端（controller）接收不到。

原因是在接收前端的参数时需要在后端参数前加注解。正确代码如下：

    @PostMapping("/list/{pageIndex}/{pageSize}")
    public Result<List<BusinessVO>> list(@PathVariable Integer pageIndex, @PathVariable Integer pageSize, @RequestBody BusinessDTO businessDTO) {
        return Result.getSuccessResult(businessService.list(pageIndex, pageSize, businessDTO));
    }

一般传参数时，页数，页面大小等和数据库无关的字段会直接加在url上，@PostMapping("/list/{pageIndex}/{pageSize}") 在这里加上这两个参数，在参数前面加上@PathVariable注解；前端直接把这两个参数加在url后面即可this.urls.search + "/" + this.currentPage + "/" + this.pageSize。

而条件查询的参数一般不外显，直接使用@RequestBody会更方便，前端数据放在data里面。