Vue发送get和post请求,Springboot后端接受数据
Vue发送get和post请求,Springboot后端接受数据发送Get请求get请求不携带参数Get请求携带参数Post请求发送Get请求get请求不携带参数前端代码:this.$http({url: this.$http.adornUrl('/verification/abnormalrecord/list'),method: 'get'}).then(({data}) => {if
·
Vue发送get和post请求,Springboot后端接受数据
发送Get请求
get请求不携带参数
前端代码:
this.$http({
url: this.$http.adornUrl('/verification/abnormalrecord/list'),
method: 'get'
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
在这里只需要指定请求的路径和请求的方式为get就行了。
后端代码:
@GetMapping("/list")
@ApiOperation(value = "异常列表")
public R list() {
PageUtils page = abnormalRecordService.queryPage();
return R.ok().put("page", page);
}
指定接受的请求为get,所以用@GetMapping注解
Get请求携带参数
前端代码:
this.$http({
url: this.$http.adornUrl('/verification/abnormalrecord/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'key': this.dataForm.key,
'abnormalTime': this.abnormalTime.toString(),
'isHandle': this.isHandle
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
这里注意,携带的参数一定要是params,我在之前把它写成data后端就会接受不到参数。
后端代码:
@GetMapping("/list")
@ApiOperation(value = "异常列表")
public R list(@RequestParam Map<String, Object> params) {
PageUtils page = abnormalRecordService.queryPage(params);
return R.ok().put("page", page);
}
如果要传入单个参数,且参数为非比传参数可以这样写
@GetMapping("/conditionQuery")
@ApiOperation(value = "根据条件查询")
public R conditionQuery( @RequestParam(required = false) String abnormalTime,@RequestParam(required = false) Integer isHandle){
PageUtils page= abnormalRecordService.conditionQuery(abnormalTime, isHandle);
return R.ok().put("page",page);
}
Post请求
前端代码:
this.$http({
url: this.$http.adornUrl(`/verification/abnormalrecord/${!this.dataForm.ids ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'ids': this.dataForm.ids || undefined,
'createdate': this.dataForm.createdate,
'abnormalReason': this.dataForm.abnormalReason,
'handleFeedback': this.dataForm.handleFeedback,
'abnormalGrade': this.dataForm.abnormalGrade,
'checkIds': this.dataForm.checkIds,
'formName': this.dataForm.formName
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
注意这里请求的数据为Json格式,并且数据一定要在data: this.$http.adornData()
里面。
后端代码:
/**
* 保存
*/
@PostMapping("/save")
public R save(@RequestBody AbnormalRecordEntity abnormalRecord){
abnormalRecordService.save(abnormalRecord);
return R.ok();
}
在这里用@RequestBody接受对象,会自动把json数据封装到对象当中
更多推荐
已为社区贡献2条内容
所有评论(0)