SpringBoot 3.x + Vue 3 实战：从零搭建一个校园社团活动管理后台（附完整源码）

weixin_30420305

392人浏览 · 2026-05-31 09:12:29

weixin_30420305 · 2026-05-31 09:12:29 发布

SpringBoot 3.x + Vue 3 实战：从零搭建校园社团活动管理后台

1. 技术选型与架构设计

在开始构建校园社团活动管理系统之前，我们需要明确技术选型的核心考量。现代Web开发已经进入前后端分离的时代，SpringBoot 3.x和Vue 3的组合为我们提供了高效、灵活且易于维护的解决方案。

为什么选择SpringBoot 3.x？

内置Tomcat 10支持，完美适配Java 17+特性
改进的自动配置机制，减少样板代码
更强大的Actuator端点，便于系统监控
原生支持GraalVM原生镜像编译

Vue 3的优势体现在：

组合式API提供更好的逻辑复用
更小的打包体积和更快的渲染速度
更好的TypeScript支持
更灵活的状态管理方案

系统架构采用经典的三层设计：

前端层(Vue 3)
│
├─ 展示组件
├─ 业务组件
└─ 状态管理

API网关层
│
├─ 认证授权
├─ 请求路由
└─ 负载均衡

后端服务层(SpringBoot 3.x)
│
├─ 控制器层
├─ 服务层
└─ 数据访问层

2. 开发环境准备

2.1 后端环境配置

首先确保你的开发环境满足以下要求：

JDK 17或更高版本
Maven 3.6.3+
MySQL 8.0或PostgreSQL 14

使用Spring Initializr创建项目时，选择以下关键依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt-api</artifactId>
        <version>0.11.5</version>
    </dependency>
</dependencies>

提示：SpringBoot 3.x默认使用Jakarta EE 9+，注意包名从javax. 变为jakarta.

2.2 前端环境搭建

Vue 3项目初始化推荐使用Vite：

npm create vite@latest campus-activity-frontend --template vue-ts
cd campus-activity-frontend
npm install axios vue-router@4 pinia @element-plus/icons-vue

关键依赖版本建议：

包名	推荐版本	作用
vue	^3.3.0	核心框架
pinia	^2.1.0	状态管理
element-plus	^2.3.0	UI组件库
axios	^1.4.0	HTTP客户端

3. 核心功能实现

3.1 用户认证模块

后端实现JWT认证的核心代码：

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .csrf(AbstractHttpConfigurer::disable)
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/api/auth/**").permitAll()
                .anyRequest().authenticated()
            )
            .sessionManagement(session -> 
                session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
            .addFilterBefore(jwtAuthenticationFilter(), 
                UsernamePasswordAuthenticationFilter.class);
        return http.build();
    }
    
    @Bean
    public JwtAuthenticationFilter jwtAuthenticationFilter() {
        return new JwtAuthenticationFilter();
    }
}

前端登录组件关键逻辑：

<script setup>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
const form = ref({
  username: '',
  password: ''
})

const handleLogin = async () => {
  try {
    await authStore.login(form.value)
    // 登录成功后的跳转逻辑
  } catch (error) {
    // 错误处理
  }
}
</script>

3.2 活动管理模块

设计活动实体时考虑校园场景特点：

@Entity
@Table(name = "activities")
public class Activity {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @NotBlank
    private String title;
    
    @NotNull
    private LocalDateTime startTime;
    
    @NotNull
    private LocalDateTime endTime;
    
    @ManyToOne
    @JoinColumn(name = "club_id")
    private Club organizer;
    
    @OneToMany(mappedBy = "activity")
    private Set<Participation> participants = new HashSet<>();
    
    // 其他字段和方法...
}

前端活动列表采用组合式API实现：

<script setup>
import { onMounted, ref } from 'vue'
import { useActivityStore } from '@/stores/activity'

const activityStore = useActivityStore()
const activities = ref([])
const loading = ref(false)

onMounted(async () => {
  loading.value = true
  try {
    await activityStore.fetchActivities()
    activities.value = activityStore.activities
  } finally {
    loading.value = false
  }
})
</script>

4. 前后端交互设计

4.1 API规范设计

采用RESTful风格设计接口，遵循以下原则：

资源使用复数名词： /api/activities
过滤使用查询参数： /api/activities?club=1&status=ongoing

分页统一格式：

{
  "data": [],
  "pagination": {
    "page": 1,
    "size": 10,
    "total": 100
  }
}

4.2 全局异常处理

后端统一异常处理：

@RestControllerAdvice
public class GlobalExceptionHandler {
    
    @ExceptionHandler(MethodArgumentNotValidException.class)
    public ResponseEntity<ErrorResponse> handleValidationExceptions(
        MethodArgumentNotValidException ex) {
        List<String> errors = ex.getBindingResult()
            .getFieldErrors()
            .stream()
            .map(FieldError::getDefaultMessage)
            .collect(Collectors.toList());
        
        return ResponseEntity.badRequest()
            .body(new ErrorResponse("Validation failed", errors));
    }
    
    // 其他异常处理...
}

前端封装统一的HTTP客户端：

import axios from 'axios'

const http = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000
})

http.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

http.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response?.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error)
  }
)

export default http

5. 部署与优化

5.1 后端部署配置

生产环境推荐使用Docker部署：

FROM eclipse-temurin:17-jdk-jammy
WORKDIR /app
COPY target/campus-activity-backend.jar app.jar
ENTRYPOINT ["java", "-jar", "app.jar"]

关键JVM参数优化：

参数	推荐值	说明
-Xms	256m	初始堆大小
-Xmx	512m	最大堆大小
-XX:MaxMetaspaceSize	256m	元空间上限
-XX:+UseG1GC	-	启用G1垃圾回收器

5.2 前端性能优化

Vite生产构建配置：

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  },
  plugins: [
    // 其他插件...
  ]
})

静态资源CDN配置示例：

<!-- index.html -->
<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/element-plus@2.3.0/dist/index.css"
>
<script 
  src="https://cdn.jsdelivr.net/npm/vue@3.3.0/dist/vue.global.prod.js"
></script>

6. 项目扩展与维护

6.1 持续集成方案

GitHub Actions配置示例：

name: CI Pipeline

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    
    - name: Set up JDK 17
      uses: actions/setup-java@v3
      with:
        java-version: '17'
        distribution: 'temurin'
    
    - name: Build with Maven
      run: mvn -B package --file pom.xml
      
    - name: Upload Artifact
      uses: actions/upload-artifact@v3
      with:
        name: backend-jar
        path: target/*.jar

6.2 监控与日志

SpringBoot Actuator配置：

management:
  endpoints:
    web:
      exposure:
        include: health,info,metrics
  endpoint:
    health:
      show-details: always
    metrics:
      enabled: true

前端错误监控推荐使用Sentry：

import * as Sentry from '@sentry/vue'

app.use(Sentry, {
  dsn: 'YOUR_DSN',
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router)
    })
  ],
  tracesSampleRate: 0.2
})

在项目开发过程中，我发现Element Plus的表格组件在处理大量数据时性能表现优异，配合Vue 3的虚拟滚动可以轻松应对校园活动列表的展示需求。后端使用Spring Data JPA时，合理设计实体关联和查询方法能显著提升开发效率，特别是在处理多对多关系如"学生-活动"报名场景时。

亚马逊云科技技术品牌专区

更多推荐