115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】

在这个问题中，我们将使用Spring Boot和Vue.js创建一个简单的前后端交互示例。后端将使用Spring Boot框架，并且前端将使用Vue.js。

后端(Spring Boot):

1. 创建一个Spring Boot项目。
2. 添加Spring Web依赖。
3. 创建一个简单的REST控制器。

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class HelloController {
 
    @GetMapping("/hello")
    public String hello() {
        return "Hello, Vue!";
    }
}

前端(Vue.js):

1. 创建一个Vue.js项目。
2. 使用axios进行HTTP请求。
3. 创建一个简单的组件来发送请求并显示响应。

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

确保你的Spring Boot应用运行在http://localhost:8080，并且你的Vue.js应用能够正确地访问这个地址。

这个例子展示了如何使用Spring Boot和Vue.js创建一个简单的前后端交互应用。在实际的应用中，你可能需要进行更复杂的配置，例如跨域资源共享(CORS)处理，以及更安全的认证和授权方法。