Spring boot+vue前后端分离

要实现Spring Boot与Vue的前后端分离，你需要做以下几步：

1. 创建Spring Boot后端服务。
2. 创建Vue前端项目。
3. 配置前端以调用后端API。
4. 部署并运行前后端应用。

以下是简化的代码示例：

后端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后端服务。在实际应用中，你可能需要进一步处理权限、数据持久化、路由保护等问题。