一:vue.js发送get请求并携带参数到springboot后端的代码
1.错误写法:get(‘/warehouse/list’, this.queryInfo.papeNum,this.queryInfo.pageSize)
export default {
data() {
return {
//获取仓库列表的参数对象
queryInfo: {
query: '',
papeNum: 1, //当前页数
pageSize: 2, //当前每页显示条目个数
},
};
},
created() {
this.getWarehourseList();
},
methods: {
// 获取仓库列表
getWarehourseList() {
this.$http
.get('/warehouse/list', this.queryInfo.papeNum,this.queryInfo.pageSize)
.then((res) => {
if (res.data.code == 200) {
this.warehouselist = res.data.data.list;
} else {
this.$message.error('获取数据失败!');
}
})
.catch(function (error) {
console.log(error);
});
},
},
};
二:正确写法如下:参数有格式要求,要写成这样{params:{papeNum: this.queryInfo.papeNum,pageSize: this.queryInfo.pageSize,}}
export default {
data() {
return {
//获取仓库列表的参数对象
queryInfo: {
query: '',
papeNum: 1, //当前页数
pageSize: 2, //当前每页显示条目个数
},
};
},
created() {
this.getWarehourseList();
},
methods: {
// 获取仓库列表
getWarehourseList() {
this.$http
.get('/warehouse/list', {
params: {
papeNum: this.queryInfo.papeNum,
pageSize: this.queryInfo.pageSize,
},
})
.then((res) => {
if (res.data.code == 200) {
this.warehouselist = res.data.data.list;
} else {
this.$message.error('获取数据失败!');
}
})
.catch(function (error) {
console.log(error);
});
},
},
};
2.springboot后端代码如下
// 返回所有仓库
@GetMapping(value = "/list")
public CommonResult<CommonPage<Warehouse>> list(@RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum,
@RequestParam(value = "pageSize",defaultValue = "10") Integer pageSize){
Page page = warehouseService.list(pageNum,pageSize); //该Page导入的包是import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
return CommonResult.success(CommonPage.restPage(page));
}