🤖 Assistant

1
2
3
4
5
6
7
8
9
10
11
12
# 🌱 SpringBoot + Vue 全栈开发指南

## 🏗️ 一、技术架构概览
### 后端技术栈 (SpringBoot)
```mermaid
graph TD
    A[SpringBoot] --> B[Spring MVC]
    A --> C[Spring Security]
    A --> D[MyBatis/MyBatis-Plus]
    A --> E[Spring Data JPA]
    F[MySQL/PostgreSQL] --> D
    G[Redis] --> C

前端技术栈 (Vue)

1
2
3
4
5
6
graph TD
    A[Vue3] --> B[Vue Router]
    A --> C[Pinia/Vuex]
    A --> D[Axios]
    A --> E[Element Plus/Ant Design Vue]
    A --> F[Vite]

📚 二、完整学习路径

1. 基础阶段（2-4周）

后端基础

  • ✅ SpringBoot核心特性
    • 自动配置原理
    • Starter机制
    • Actuator监控
  • ✅ RESTful API设计
    • 常用注解：@RestController, @RequestMapping
    • 统一响应封装
    • 全局异常处理

前端基础

  • 🖥️ Vue3核心语法
    • Composition API
    • 响应式原理(ref/reactive)
    • 组件通信
  • 🌐 Vue Router 4.x
    • 动态路由
    • 导航守卫
    • 路由懒加载

2. 进阶阶段（3-5周）

后端进阶

  • 🛡️ 安全控制
    • JWT实现
    • Spring Security配置
    • 权限注解(@PreAuthorize)
  • 🔄 数据持久化
    • MyBatis动态SQL
    • 多数据源配置
    • 事务管理

前端进阶

  • 🏪 状态管理
    • Pinia基础
    • 模块化设计
    • 持久化存储
  • 📡 网络请求
    • Axios封装
    • 请求拦截器
    • 错误统一处理

🚀 三、项目快速搭建指南

1. 环境准备

1
2
3
4
5
6
7
8
# 后端环境
JDK 17+
Maven 3.8+
MySQL 8.0

# 前端环境
Node.js 16+
npm/yarn/pnpm

2. 项目初始化

后端创建

1
2
3
4
5
6
7
8
# 使用Spring Initializr
https://start.spring.io/

选择依赖：
- Spring Web
- Lombok
- MyBatis Framework
- MySQL Driver

前端创建

1
2
3
npm create vite@latest frontend --template vue
cd frontend
npm install vue-router pinia axios element-plus

3. 关键配置示例

后端配置

1
2
3
4
5
6
7
8
9
10
// application.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/demo
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis:
  mapper-locations: classpath:mapper/*.xml

前端配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath } from 'url'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

🔧 四、开发实用技巧

跨域解决方案

1
2
3
4
5
6
7
8
9
10
11
// 后端配置CORS
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .maxAge(3600);
    }
}

全局异常处理

1
2
3
4
5
6
7
8
9
@ControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(Exception.class)
    @ResponseBody
    public Result<String> handleException(Exception e) {
        return Result.error(e.getMessage());
    }
}

前端API封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// src/api/index.js
import axios from 'axios'

const service = axios.create({
  baseURL: '/api',
  timeout: 10000
})

// 请求拦截器
service.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
})

// 响应拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

📦 五、部署方案

1. 后端打包

1
2
mvn clean package -DskipTests
java -jar target/demo-0.0.1-SNAPSHOT.jar

2. 前端打包

1
npm run build

3. 部署架构选择

1
2
3
4
5
6
7
8
9
10
11
1. 传统部署
   - Nginx反向代理
   - 静态资源部署

2. Docker化部署
   - Docker Compose编排
   - Nginx容器配置

3. CI/CD方案
   - Jenkins Pipeline
   - GitHub Actions

📝 六、学习资源推荐

  • 书籍：
    • 《Spring Boot实战》
    • 《Vue.js设计与实现》
  • 视频：
    • B站尚硅谷SpringBoot+Vue全栈课程
  • 文档：
  • 社区：
    • StackOverflow
    • GitHub热门开源项目

🚨 常见问题排查

  1. 端口冲突：检查8080/3000端口占用
  2. 数据库连接失败：检查MySQL服务状态和账号权限
  3. 跨域问题：确保前后端CORS配置正确

  4. 前端路由404：配置Nginx重定向规则

    1