springboot ，vue前后端分离项目结构

### Spring Boot 和 Vue.js 构建的前后端分离项目结构

#### 1. 项目整体布局
在一个典型的Spring Boot和Vue.js构建的前后端分离项目中，整个工程通常被划分为两个独立的部分：后端服务部分由Spring Boot负责实现业务逻辑处理；前端展示层则交给了基于Vue.js的应用程序。两者之间通过RESTful API进行通信。

#### 2. 后端（Spring Boot）
后端主要关注于数据存取、业务流程控制以及提供API接口给前端调用等功能模块的设计与开发工作。其目录结构如下所示：

- `src/main/java/com/example/demo`：放置Java源文件的位置，在此路径下的子包可以按照功能划分进一步细分。
- `controller`: 定义控制器类用于接收HTTP请求并响应JSON格式的数据[^1]。
- `service`: 封装具体的业务操作方法。
- `repository`: 如果涉及到了数据库的操作，则在此处定义持久化组件。
- `config`: 存放各种配置信息比如安全设置、跨域资源共享(CORS)策略等[^3]。

- `src/main/resources/static`：静态资源存放位置，对于纯HTML页面或者其他不需要经过服务器渲染的内容可以直接放入该文件夹内供客户端直接访问[^4]。

// 示例 Controller 类
@RestController
@RequestMapping("/api")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/users/{id}")
    public ResponseEntity<User> getUserById(@PathVariable Long id){
        User user = userService.findById(id);
        if (user != null) {
            return new ResponseEntity<>(user, HttpStatus.OK);
        } else {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }
    }

}

#### 3. 前端（Vue.js）

前端采用单页应用程序(SPA)模式设计，利用Vue CLI工具快速初始化项目模板，并集成必要的依赖库完成视图层的构建。以下是常见的前端项目结构说明：

- `public/index.html`：作为入口html文档引入编译后的JavaScript脚本。

- `src/assets`：存储图片、样式表之类的公共资源。

- `src/components`：用来保存可复用的小型UI部件，如按钮、输入框等基础控件或是更复杂的列表项、卡片等形式化的组合构件。

- `src/views`：代表不同路由对应的完整页面级组件，每个view内部可能会嵌套多个component形成完整的用户体验界面。

- `src/router`：管理应用内的导航规则，即URL变化时应该加载哪个组件显示出来。

- `src/store`：当存在状态共享需求时，可以通过Vuex来集中管理和维护全局的状态树。

- `src/api`：封装向后端发起网络请求的方法，简化其他地方对该过程的调用方式[^2]。

import axios from 'axios';

const instance = axios.create({
  baseURL: '/api', // 设置默认的基础url前缀
});

export function fetchUser(userId) {
  return instance.get(`/users/${userId}`);
}