保姆级课程：Spring Boot+Vue前后端分离开发（第一天）

这个问题看起来是想要获取一个Spring Boot和Vue前后端分离开发的入门教程。由于篇幅限制，我无法提供完整的教程内容，但我可以提供一个简化的概览和代码示例。

Spring Boot 初始化和配置

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

@RestController
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "Hello, Spring Boot!";
    }
}

Vue 初始化和配置

1. 使用Vue CLI创建Vue项目。
2. 创建一个简单的组件并使用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>

配置前后端分离

1. 在Spring Boot中配置跨域请求支持。
2. 确保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组件来调用它。这只是一个开始，实际项目中还需要考虑更多的细节，例如路由、状态管理、身份验证和授权等。