在这个问题中，我们将使用Spring Boot和Vue.js创建一个简单的前后端交互示例。后端将使用Spring Boot框架，并且前端将使用Vue.js。
后端(Spring Boot):
- 创建一个Spring Boot项目。
- 添加Spring Web依赖。
- 创建一个简单的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):
- 创建一个Vue.js项目。
- 使用axios进行HTTP请求。
- 创建一个简单的组件来发送请求并显示响应。
<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)处理，以及更安全的认证和授权方法。