这个问题看起来是想要获取一个Spring Boot和Vue前后端分离开发的入门教程。由于篇幅限制，我无法提供完整的教程内容，但我可以提供一个简化的概览和代码示例。
Spring Boot 初始化和配置
- 使用Spring Initializr生成Spring Boot项目。
- 添加Web依赖。
- 创建一个简单的REST控制器。
@RestController
public class HelloController {
@GetMapping("/hello")
public String hello() {
return "Hello, Spring Boot!";
}
}
Vue 初始化和配置
- 使用Vue CLI创建Vue项目。
- 创建一个简单的组件并使用axios进行后端API调用。
<template>
<div>
{{ message }}
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
message: ''
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
axios.get('/api/hello')
.then(response => {
this.message = response.data;
})
.catch(error => {
console.error('There was an error!', error);
});
}
}
};
</script>
配置前后端分离
- 在Spring Boot中配置跨域请求支持。
- 确保Vue项目正确地代理API请求到Spring Boot应用。
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("http://localhost:8080");
}
}
在Vue项目的vue.config.js中配置代理：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
};
以上代码提供了一个简单的框架，展示了如何初始化和配置Spring Boot和Vue项目，以及如何创建一个简单的REST API和Vue组件来调用它。这只是一个开始，实际项目中还需要考虑更多的细节，例如路由、状态管理、身份验证和授权等。