springboot与vue前端数据交互代码

在Spring Boot与Vue前端之间进行数据交互，一种常见的方式是通过RESTful API进行通信。下面是一个简单的示例代码：

在Spring Boot后端：
1. 创建一个控制器类，用于处理前端的请求和返回数据：

@RestController
@RequestMapping("/api")
public class ApiController {

    @GetMapping("/data")
    public String getData() {
        // 处理获取数据的逻辑
        return "Hello from Spring Boot!";
    }

    @PostMapping("/data")
    public String saveData(@RequestBody String data) {
        // 处理保存数据的逻辑
        return "Data saved: " + data;
    }
}

2. 配置CORS（跨域资源共享）以允许前端访问后端接口。可以通过添加一个配置类实现：

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*");
    }
}

在Vue前端：
1. 在Vue组件中使用axios库来发送HTTP请求：

import axios from 'axios';

export default {
  data() {
    return {
      responseData: ''
    };
  },
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          this.responseData = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    saveData() {
      const data = 'Some data to save';
      axios.post('/api/data', data)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};

2. 在Vue模板中使用数据和方法：

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <p>{{ responseData }}</p>

    <button @click="saveData">Save Data</button>
  </div>
</template>

以上代码演示了在Spring Boot和Vue之间进行简单的数据交互。你可以根据实际需求进行扩展和修改。