创建一个简单的spring boot+vue前后端分离项目

以下是创建一个简单的Spring Boot后端和Vue前端分离项目的步骤：

后端（Spring Boot）:

1. 使用Spring Initializr（https://start.spring.io/）生成Spring Boot项目骨架。
2. 添加必要的依赖，比如spring-boot-starter-web。
3. 创建一个简单的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, Spring Boot!";
    }
}

前端（Vue.js）:

1. 使用Vue CLI创建新项目或手动创建文件夹。
2. 安装axios进行HTTP请求。
3. 创建简单的组件发送请求并显示响应。

<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应用运行在8080端口，并且Vue项目能够正确代理API请求到Spring Boot应用。

package.json中的代理配置示例（Vue项目）:

"devServer": {
  "proxy": {
    "/api": {
      "target": "http://localhost:8080",
      "changeOrigin": true
    }
  }
}

然后在Vue组件中，你可以使用/api前缀来发送请求到Spring Boot服务。

运行应用:

1. 首先运行Spring Boot应用。
2. 然后运行Vue前端，确保Vue代理指向Spring Boot应用。
3. 访问Vue应用，它将从Spring Boot应用获取数据。

这个简单的例子展示了如何设置和运行一个前后端分离的项目。在实际应用中，你可能需要进一步配置路由、认证、权限等安全和非功能性需求。