vue2向springboot传值接收不到的解决方法
作者：苏禾呀
本文主要介绍了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里面。
注意：在使用@RequestBody注解时，方法必须使用@PostMapping（POST请求）！！！如使用@GetMapping（Get请求）则会报错！！！
到此这篇关于vue2向springboot传值接收不到的解决方法的文章就介绍到这了,更多相关vue2 springboot传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！