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數據封裝到對象當中