我想将一个变量从 vue js 传递给 spring boot答案

【问题标题】：I want to pass a variable from vuejs tospring boot我想将一个变量从 vue js 传递给 spring boot
【发布时间】：2021-02-21 06:09:00
【问题描述】：

在本地主机 8080 上的 vue.js 代码前端中，因此当单击按钮“r1”时，postpost 方法将“calcoperation”变量发送到本地主机 8085 上的 spring boot。

  <div class="home">
    <h1>{{title}}</h1>
    
    <h2>You can enter the operation by buttons or by keyboard</h2>
    
    <input type="text" v-model="calcoperation" id="calculationid"  >
    <br>

    <button class="r1" v-on:click="postPost()">=</button>
  </div>
</template>

<script>
import axios from 'axios';
export default{
  name:"home",
  
  data(){
    return{
    
      title: "",
      
      calcoperation: "" ,
      errors: []
    };
  },

  mounted(){ //from spring boot to vue
    fetch("http://localhost:8085")
      .then(response =>{
        return response.text();
      })
      .then(data =>{
        this.title=data;
      });
      
  },

postPost() {
    axios.post(`http://localhost:8085`, {
      body: this.calcoperation
    })  
 } 
}
</script>

然后我想请求该帖子并将其传递给它 calcvalue，但是当我尝试将 calcvalue 发送到 vue 中的标题变量并将其显示在“h1”中时它不起作用。

@RestController
@CrossOrigin
public class homecontroller {
    String calcvalue;

    @RequestMapping(value = "http://localhost:8080")
    void getcalcoperation(@RequestParam String calc) {
        calcvalue = calc ;
    }

    @GetMapping("/") // from spring boot to vue
    public String home() {
        return calcvalue;
    }

【问题讨论】：

标签： javascript spring-boot vue.js spring-mvc backend

【解决方案1】：

您正在使用具有相同路径和方法的两个端点。我认为请求映射的默认值是get，如果一个是get，另一个是post，那么您需要指定它，或者如果您打算使用相同的方法使用两个rest端点，则需要使它们指向不同的路径.

@RequestMapping(value = "/", method = RequestMethod.POST)
void getcalcoperation(@RequestParam String calc) {
    calcvalue = calc ;
}

@GetMapping("/") // from spring boot to vue
public String home() {
    return calcvalue;
}

此外，您使用两种不同的 API 来调用后端（fetch 和 axios），建议您只使用一个，即使这不会给您带来任何问题。

【讨论】：

@Dharman ，对不起，我试过了，但它不起作用，因为 spring boot 中的变量“calcvalue”没有从 vue.js 接收数据，然后再次将其发送到变量“title”在 vue.js 中。
@OmarAshraf 请停止 ping 我。我不是这个答案的作者。不是我写的。
@OmarAshraf 前端似乎首先获取 get 映射，然后将值发布到后端。要对此进行测试，请尝试为后端变量 calcvalue 赋予默认值，并查看是否在前端正确显示。页面渲染后立即触发挂载。
@OmarAshraf 还有他们在下面所说的需要做的事情。
我按照你说的做了，下面也做了，当我给它一个默认值时，它可以工作并显示这个值，但 postPost 似乎也不起作用。 @PaoloA。

【解决方案2】：

postPost() 方法必须在这样的方法对象内

methods:{
  postPost() {
    axios.post(`http://localhost:8085`, {
      body: this.calcoperation
    });
  }
}

并且mounted的方法不会被自动调用。您可能还需要将其放入方法中并手动调用它以将数据设置为 title 数据属性。您可以使用回调来实现它。

【讨论】：

同样在模板部分，将“postPost()”替换为“postPost”