vue springboot前后端分离项目一步步创建

### 创建Vue和Spring Boot的前后端分离项目

#### 项目结构规划
为了实现高效的开发流程，建议将前端和后端分别存放在不同的仓库中。这不仅有助于团队协作，还能简化版本管理和持续集成/部署(CI/CD)[^4]。

#### 后端设置：Spring Boot
1. **初始化Spring Boot应用程序**
使用Spring Initializr创建一个新的Spring Boot项目，选择必要的依赖项如`Spring Web`, `Spring Data JPA` 和 `H2 Database`(用于快速原型设计)。

   @SpringBootApplication
   public class BackendApplication {
       public static void main(String[] args) {
           SpringApplication.run(BackendApplication.class, args);
       }
   }

2. **配置REST API接口**
定义控制器类来处理HTTP请求并返回JSON响应给客户端[^1]。

   @RestController
   @RequestMapping("/api")
   public class UserController {

       private final UserService userService;

       @Autowired
       public UserController(UserService userService){
           this.userService = userService;
       }

       @GetMapping("/users")
       public ResponseEntity<List<User>> getAllUsers(){
           List<User> users = userService.findAll();
           return new ResponseEntity<>(users, HttpStatus.OK);
       }
   }

#### 前端设置：Vue.js
1. **搭建Vue环境**
利用Vue CLI工具快速建立一个新项目，并安装所需插件比如Element UI组件库以增强用户体验[^2]。

   npm install -g @vue/cli
   vue create my-project
   cd my-project
   vue add element

2. **构建页面布局**
设计主要的应用程序框架，包括侧边栏导航菜单以及主要内容展示区。

   <!-- src/App.vue -->
   <template>
     <el-container style="height: 500px; border: 1px solid #eee">
       <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
         <sidebar />
       </el-aside>

       <el-main>
         <router-view></router-view>
       </el-main>
     </el-container>
   </template>

   <script>
   import Sidebar from './components/Sidebar'

   export default {
     name: 'App',
     components: { Sidebar },
   }
   </script>

#### 实现前后端交互
通过Axios或其他类似的HTTP客户端，在Vue组件内部发起API调用来获取来自服务器的数据。

// src/api/userApi.js
import axios from "axios";

const BASE_URL = process.env.VUE_APP_API_BASE_URL || "/api"; // 设置默认的基础URL路径

export function fetchAllUsers() {
    return axios.get(`${BASE_URL}/users`);
}

在适当的地方引入此服务函数并与视图逻辑相结合即可完成基本功能模块的开发工作。