Vue發送get和post請求,Springboot後端接受數據

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章