Vue.js与Spring Boot变量传递异常：后端结果无法在前端回显求助

我看了你的代码，问题出在前后端请求的参数传递不匹配、后端接口的路由配置错误这几个核心点上，下面一步步帮你把功能调通：

一、Vue前端代码修复 #

你的axios.post请求传参方式和后端期望的不匹配，而且缺少请求后的页面数据刷新逻辑，修复后代码如下：

<template>
  <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(){
    // 从Spring Boot获取初始标题
    fetch("http://localhost:8085")
      .then(response => response.text())
      .then(data => {
        this.title = data;
      })
      .catch(err => {
        console.error("获取初始标题失败:", err);
      });
  },
  postPost() {
    // 后端用@RequestParam接收，所以把参数放到URL查询参数中
    axios.post(`http://localhost:8085/calc`, {
      params: {
        calc: this.calcoperation // 参数名要和后端@RequestParam的名称完全一致
      }
    })
    .then(() => {
      // 提交成功后，重新请求后端获取更新后的标题
      return fetch("http://localhost:8085");
    })
    .then(response => response.text())
    .then(data => {
      this.title = data;
    })
    .catch(err => {
      this.errors.push("提交失败，请检查请求");
      console.error("请求错误:", err);
    });
  }
}
</script>

前端修改说明： #

• 调整POST请求的目标路径为/calc，和后端接口路径对应
• 用params传递查询参数，匹配后端@RequestParam的接收方式
• 增加错误处理逻辑，方便调试排查问题
• 提交成功后重新调用GET请求，刷新页面的title数据

二、Spring Boot后端代码修复 #

你的后端接口存在路由路径错误、请求方法未指定、参数不匹配的问题，修复后代码如下：

import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin(origins = "http://localhost:8080") // 精确配置跨域，只允许前端8080域名访问
public class HomeController {
    // 加volatile保证多线程下的变量可见性，同时给初始值避免空返回
    private volatile String calcvalue = "初始计算标题";

    // 处理POST请求，接收calc参数
    @PostMapping("/calc") // 使用相对路径，明确指定POST请求方法
    public void getCalcOperation(@RequestParam String calc) {
        this.calcvalue = calc;
    }

    // 返回当前的计算值给前端
    @GetMapping("/")
    public String home() {
        return calcvalue;
    }
}

后端修改说明： #

• 把错误的@RequestMapping改成@PostMapping("/calc")，明确是POST请求，路径用相对路径（Spring Boot接口不需要写完整域名）
• 确保@RequestParam String calc的参数名和前端传递的calc一致
• 给calcvalue设置初始值，避免第一次访问时返回null
• 优化跨域配置，只允许你的前端8080域名访问，更安全
• 给calcvalue加volatile关键字，因为Spring Boot的Controller是单例，多线程环境下修改成员变量需要保证可见性（如果是用户专属数据，建议用Session存储，这里假设是全局演示场景）

三、为什么之前的代码失效？ #

1. 参数传递不匹配：你用axios.post传递的是请求体数据，但后端用@RequestParam接收的是URL查询参数，导致后端拿不到值
2. 接口路由错误：@RequestMapping(value = "http://localhost:8080")是错误写法，Spring Boot接口路径应该用相对路径，且未指定POST方法，导致前端POST请求找不到对应接口
3. 缺少数据刷新：即使后端拿到了值，你也没有重新请求后端获取更新后的calcvalue，页面title自然不会变化

替换修复后的代码后，点击=按钮，前端会把输入框内容POST到后端，后端保存后，前端会自动刷新获取最新值并显示在h1标签里，功能就能正常运行了。

内容的提问来源于stack exchange，提问作者Omar Ashraf