要实现Spring Boot与Vue的前后端分离，你需要做以下几步：
- 创建Spring Boot后端服务。
- 创建Vue前端项目。
- 配置前端以调用后端API。
- 部署并运行前后端应用。
以下是简化的代码示例：
后端Spring Boot代码（Controller层）:
@RestController
@RequestMapping("/api")
public class ExampleController {
@GetMapping("/data")
public ResponseEntity<String> getData() {
return ResponseEntity.ok("Hello from Spring Boot backend");
}
}确保你的Spring Boot应用配置了CORS支持，以便Vue前端可以从不同的域调用API。
前端Vue代码（使用axios发送请求）:
<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/api/data')
.then(response => {
this.message = response.data;
})
.catch(error => {
console.error('There was an error!', error);
});
}
}
};
</script>确保你的Vue前端项目配置了代理，以便在开发时代理API请求到后端服务器。
Vue前端代理配置:
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
};在部署时，确保前后端分别部署到不同的服务器，并且后端服务允许跨域请求。
以上代码示例提供了一个简单的前后端分离架构，并展示了如何使用axios在Vue应用中发送HTTP请求到Spring Boot后端服务。在实际应用中，你可能需要进一步处理权限、数据持久化、路由保护等问题。