前后端交互：axios 和 json；springboot 和 vue

在Spring Boot和Vue之间进行前后端交互时，通常使用axios在Vue中发送HTTP请求，并处理JSON格式的数据。以下是一个简单的例子：

后端（Spring Boot）:

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
 
@RestController
public class ExampleController {
 
    @GetMapping("/data")
    public Map<String, String> getData() {
        Map<String, String> data = new HashMap<>();
        data.put("key", "value");
        return data;
    }
}

前端（Vue.js）:

<template>
  <div>
    {{ data }}
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>

在这个例子中，Spring Boot后端提供了一个简单的API /data，返回JSON格式的数据。Vue前端使用axios来发送HTTP GET请求，并在成功获取响应后将数据存储在组件的data属性中。

确保在实际部署时，前后端的交互需要遵循安全最佳实践，例如使用HTTPS，避免XSS攻击，以及适当的认证和授权机制。