数据库 + Spring Boot + Vue 全栈交互逻辑详解

目次

• 整体架构概述
  
• 技术栈说明
  
• 数据库计划规范
  
• Spring Boot 后端架构
  
• Vue 前端架构
  
• 完备交互流程
  
• 关键技术实现细节
  
• 安全与性能优化
  
• 异常处理机制
  

---

整体架构概述

1. graph TD
2.     A[Vue 前端] -->|HTTP 请求| B(Spring Boot 后端)
3.     B -->|JDBC/ORM| C[(数据库)]
4.     C -->|返回数据| B
5.     B -->|JSON 响应| A
6.     A -->|状态管理| D[Vuex Store]
7.     B -->|缓存| E[Redis]
8.     B -->|消息队列| F[RabbitMQ/Kafka]

复制代码

技术栈说明

数据库层

• MySQL 8.0+：关系型数据库
  
• MongoDB 4.4+：非结构化数据存储
  
• Redis 6+：缓存数据库
  
• 连接池：HikariCP
  
• ORM：MyBatis-Plus 或 Spring Data JPA
  

---

后端层

• 核心框架：Spring Boot 2.7+
  
• 安全框架：Spring Security + JWT
  
• API 文档：Swagger/OpenAPI 3.0
  
• 构建工具：Maven/Gradle
  
• 其他组件：
  
  
  
  • Spring Cache
    
  • Spring Validation
    
  • Spring Batch（批处理）
    
  • Quartz Scheduler（定时任务）
    
  
  

---

前端层

• 核心框架：Vue 3 + Composition API
  
• 状态管理：Vuex/Pinia
  
• UI 框架：Element Plus/Ant Design Vue
  
• 路由管理：Vue Router 4
  
• 请求库：Axios
  
• 构建工具：Vite 4+
  

---

数据库计划规范

计划步骤

• 需求分析 →ER图计划 →范式化计划 →反范式优化 →索引策略 →分库分表规划
  

---

表结构示例

1. CREATE TABLE `sys_user` (
2.   `id` BIGINT(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
3.   `username` VARCHAR(50) NOT NULL UNIQUE COMMENT '登录账号',
4.   `password` VARCHAR(100) NOT NULL COMMENT '加密后的密码',
5.   `nickname` VARCHAR(50) COMMENT '用户昵称',
6.   `email` VARCHAR(100) COMMENT '电子邮箱',
7.   `status` TINYINT(1) NOT NULL DEFAULT 1 COMMENT '状态 0-禁用 1-正常',
8.   `create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
9.   `update_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
10.   PRIMARY KEY (`id`),
11.   INDEX `idx_username` (`username`),
12.   INDEX `idx_email` (`email`)
13. ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

复制代码

索引策略

• 组合索引遵照最左前缀原则
• WHERE 条件中的高筛选率字段优先
• 制止在频仍更新的字段上建索引
• 使用覆盖索引优化查询性能
Spring Boot 后端架构

分层结构

1. src/main/java
2. ├── config          // 配置类
3. ├── controller      // REST API 入口
4. ├── service         // 业务逻辑层
5. │   ├── impl       // 接口实现
6. ├── dao/repository // 数据访问层
7. ├── entity/domain  // 实体类
8. ├── dto            // 数据传输对象
9. ├── vo             // 视图对象
10. ├── exception      // 自定义异常
11. ├── interceptor    // 拦截器
12. ├── filter         // 过滤器
13. └── util           // 工具类

复制代码

典型 Controller 示例

1. @RestController
2. @RequestMapping("/api/users")
3. @Tag(name = "用户管理", description = "用户相关操作")
4. public class UserController {
6.     @Autowired
7.     private UserService userService;
9.     @PostMapping
10.     @Operation(summary = "创建用户")
11.     public ResponseEntity<ResultVO<UserVO>> createUser(@Valid @RequestBody UserCreateDTO dto) {
12.         UserVO createdUser = userService.createUser(dto);
13.         return ResponseEntity.created(URI.create("/users/"+createdUser.getId()))
14.                            .body(ResultVO.success(createdUser));
15.     }
17.     @GetMapping("/{id}")
18.     @Operation(summary = "获取用户详情")
19.     public ResponseEntity<ResultVO<UserVO>> getUserById(@PathVariable Long id) {
20.         return ResponseEntity.ok(ResultVO.success(userService.getUserById(id)));
21.     }
22. }

复制代码

Vue 前端架构

项目结构

1. src/
2. ├── api/           // 接口定义
3. ├── assets/        // 静态资源
4. ├── components/    // 公共组件
5. ├── router/        // 路由配置
6. ├── store/         // Vuex 状态管理
7. ├── utils/         // 工具函数
8. ├── views/         // 页面组件
9. └── main.js        // 入口文件

复制代码

典型 API 调用

1. // api/user.js
2. import request from '@/utils/request'
4. export function login(data) {
5.   return request({
6.     url: '/auth/login',
7.     method: 'post',
8.     data
9.   })
10. }
12. export function getUserInfo() {
13.   return request({
14.     url: '/api/users/me',
15.     method: 'get'
16.   })
17. }

复制代码

Axios 拦截器设置

1. // utils/request.js
2. const service = axios.create({
3.   baseURL: process.env.VUE_APP_BASE_API,
4.   timeout: 10000
5. })
7. // 请求拦截
8. service.interceptors.request.use(
9.   config => {
10.     if (store.getters.token) {
11.       config.headers['Authorization'] = 'Bearer ' + getToken()
12.     }
13.     return config
14.   },
15.   error => {
16.     return Promise.reject(error)
17.   }
18. )
20. // 响应拦截
21. service.interceptors.response.use(
22.   response => {
23.     const res = response.data
24.     if (res.code !== 200) {
25.       Message.error(res.message || 'Error')
26.       return Promise.reject(new Error(res.message || 'Error'))
27.     } else {
28.       return res.data
29.     }
30.   },
31.   error => {
32.     Message.error(error.message)
33.     return Promise.reject(error)
34.   }
35. )

复制代码

完备交互流程

1. 用户操作触发

1. <template>
2.   <el-button @click="handleSubmit">提交</el-button>
3. </template>
5. <script setup>
6. const handleSubmit = async () => {
7.   try {
8.     await formRef.value.validate()
9.     const res = await api.createUser(formData.value)
10.     // 处理成功逻辑
11.   } catch (error) {
12.     // 错误处理
13.   }
14. }
15. </script>

复制代码

2. API 请求发送

1. POST /api/users HTTP/1.1
2. Content-Type: application/json
3. Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
5. {
6.   "username": "testuser",
7.   "password": "P@ssw0rd!"
8. }

复制代码

3. Spring Boot 处理流程

1. sequenceDiagram
2.   participant C as Controller
3.   participant S as Service
4.   participant D as DAO
5.   participant DB as Database
6.   
7.   C->>S: 接收DTO并校验
8.   S->>D: 调用数据访问方法
9.   D->>DB: 执行SQL
10.   DB-->>D: 返回结果集
11.   D-->>S: 返回Entity
12.   S->>S: 业务逻辑处理
13.   S->>C: 返回VO对象
14.   C-->>Client: 封装ResultVO响应

复制代码

4. 数据库事件处理

1. @Transactional(rollbackFor = Exception.class)
2. public UserVO createUser(UserCreateDTO dto) {
3.     // 1. 数据校验
4.     validateUserInfo(dto);
5.    
6.     // 2. 转换对象
7.     User user = convertToEntity(dto);
8.    
9.     // 3. 保存到数据库
10.     userRepository.save(user);
11.    
12.     // 4. 发送领域事件
13.     eventPublisher.publishEvent(new UserCreatedEvent(user));
14.    
15.     return convertToVO(user);
16. }

复制代码

5. 相应处理与状态更新

1. .then(response => {
2.   // 更新本地状态
3.   store.commit('user/addUser', response.data)
4.   // 刷新列表数据
5.   fetchUserList()
6.   // 提示成功
7.   ElMessage.success('创建成功')
8. })

复制代码

---

关键技术实现细节

鉴权与安全

JWT 验证流程

1. graph LR
2.   A[登录请求] --> B[验证用户名密码]
3.   B --> C[生成JWT]
4.   C --> D[返回Token给客户端]
5.   D --> E[后续请求携带Token]
6.   E --> F[验证Token有效性]
7.   F --> G[访问受保护资源]

复制代码

Spring Security 设置

1. @Configuration
2. @EnableWebSecurity
3. public class SecurityConfig extends WebSecurityConfigurerAdapter {
4.    
5.     @Override
6.     protected void configure(HttpSecurity http) throws Exception {
7.         http
8.             .csrf().disable()
9.             .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
10.             .and()
11.             .authorizeRequests()
12.                 .antMatchers("/auth/**").permitAll()
13.                 .antMatchers("/api/**").authenticated()
14.             .and()
15.             .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
16.     }
17. }

复制代码

文件上传处理

后端接收文件

1. @PostMapping("/upload")
2. public ResultVO<String> uploadFile(@RequestParam("file") MultipartFile file) {
3.     String filePath = fileStorageService.store(file);
4.     return ResultVO.success(filePath);
5. }

复制代码

前端上传组件

1. <template>
2.   <el-upload
3.     action="/api/upload"
4.     :before-upload="beforeUpload"
5.     :on-success="handleSuccess">
6.     <el-button type="primary">点击上传</el-button>
7.   </el-upload>
8. </template>

复制代码

---

安全与性能优化

安全措施

• ​SQL 注入防护
  
  
  
  • 使用预编译语句（MyBatis #{} 语法）
    
  • 启用Druid SQL防火墙
    
  
  
• ​XSS 防护
  
  
  
  • 前端使用DOMPurify过滤HTML
    
  • 后端设置Http头
    
  1. http.headers()
  2.     .xssProtection()
  3.     .and()
  4.     .contentSecurityPolicy("script-src 'self'");

  复制代码
  
  

性能优化

• ​二级缓存设置（MyBatis）​
  
  1. <cache eviction="LRU" flushInterval="60000" size="512" readOnly="true"/>

  复制代码
• ​接口相应优化
  
  
  
  • 启用Gzip压缩
    
  • 使用DTO投影减少数据传输量
    
  1. @Query("SELECT new com.example.dto.UserDTO(u.id, u.username) FROM User u")
  2. List<UserDTO> findAllUserDTOs();

  复制代码
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。