Vue发送get和post请求,Springboot后端接受数据

16 篇文章 1 订阅
5 篇文章 0 订阅

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数据封装到对象当中

  • 4
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,我可以回答关于Spring Boot和Vue之间的数据交互问题。在Spring Boot中,可以使用@RestController注解来定义RESTful服务接口,然后通过Vue的$http库发送AJAX请求来获取数据。具体实现可以根据具体需求来设计。 ### 回答2: Spring Boot和Vue是两个独立的技术,分别用于后端开发和前端开发。在Spring Boot中,我们可以使用Spring MVC来创建RESTful API,从而与前端进行数据交互。而在Vue中,我们可以使用Axios来发送HTTP请求,获取后端数据。 在Spring Boot中,我们可以定义控制器类,使用 @RestController 注解,来处理前端请求。我们可以定义不同的方法来处理不同的请求,比如GET、POST、PUT、DELETE等。在方法中,我们可以注入Service层的组件,从数据库中获取数据,并返回给前端。可以使用 @RequestBody 注解来接收前端传递的JSON格式数据。 在Vue中,我们可以使用 Axios 库来发送HTTP请求。我们可以在组件中使用生命周期钩子函数,比如 mounted,来在组件加载后发送请求。可以使用 axios.get(url) 发送GET请求,axios.post(url, data) 发送POST请求,axios.put(url, data) 发送PUT请求,axios.delete(url) 发送DELETE请求。可以通过 then 方法获取服务器返回的数据。 为了实现前后端数据交互,需要确保后端和前端的请求路径是一致的。比如,后端请求路径为 /api/users,前端发送GET请求时,也需要发送到 /api/users。 在后端返回数据给前端时,可以返回一个JSON格式的数据。前端可以通过 then 方法获取到这个JSON格式的数据,并对其进行解析、展示等操作。 总而言之,Spring Boot和Vue可以通过RESTful API实现数据的交互。后端使用Spring MVC创建API,前端使用Axios发送HTTP请求并解析返回的JSON数据。通过定义一致的请求路径和数据格式,实现前后端数据交互。 ### 回答3: 在Spring Boot和Vue中进行数据交互可以通过以下几种方式实现: 1. RESTful API: 在Spring Boot中创建一个RESTful API来提供数据Vue通过发送HTTP请求来获取数据。可以使用Spring Boot的注解 `@Controller` 或者 `@RestController` 来定义API接口,并通过 `@RequestMapping` 或者 `@GetMapping` 等注解来指定路由地址和请求方法。在Vue中使用Axios或者Fetch等HTTP库发送请求并处理服务器返回的数据。 2. WebSockets: 使用Spring Boot和Vue都支持的WebSockets协议来进行实时数据交互。在Spring Boot中使用Spring WebSocket来创建一个WebSocket服务器,而在Vue中使用WebSocket API与服务器建立连接并发送、接收数据。 3. AJAX: 在Vue中可以使用Vue Resource或者Axios等库发送异步请求Spring Boot服务器获取数据。在Spring Boot中使用`@RestController`注解来创建API接口,并使用`@RequestMapping`注解来指定路由地址和请求方法。Vue发送请求时可以通过URL传递参数来从服务器获取特定的数据。 4. GraphQL: 使用GraphQL来定义和查询API接口。在Spring Boot中使用GraphQL Java Tools或者其他GraphQL库来创建GraphQL接口,并在Vue中使用Apollo等库来发送GraphQL查询请求。 需要注意的是,在实现数据交互之前,需要先确保Spring Boot和Vue项目都已正确配置和启动,并且服务器可以正确处理和响应请求。另外,还需要处理跨域问题,可以在Spring Boot中通过使用`@CrossOrigin`注解或者自定义过滤器来解决。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值