SpringBoot+Vue高校选题管理系统开发实践-育师

1. 项目概述：Web课程设计选题管理ABO信息管理系统

这个基于SpringBoot+Vue+MySQL的全栈项目，是一个专门为高校课程设计环节开发的选题管理系统。我在实际开发中发现，传统的手工登记选题方式存在效率低下、数据易丢失、统计困难等问题。这套系统通过ABO（Admin-Basic-Other）三级权限设计，实现了从课题发布、双向选择到过程管理的全流程数字化。

系统最核心的价值在于解决了三个痛点：一是学生选题的公平性问题，通过算法实现志愿优先级自动匹配；二是教师课题管理的便捷性，支持批量导入和智能分组；三是管理员的全局监控能力，实时生成各类统计报表。整套代码采用前后端分离架构，后端基于SpringBoot 2.7.5开发，前端使用Vue 3组合式API，数据库选用MySQL 8.0，保证了系统的可维护性和扩展性。

2. 技术架构解析

2.1 后端技术栈设计

SpringBoot框架的选择经过了多维度考量。相比原生Spring，它内置的starter机制大幅简化了配置工作。项目中特别使用了：

spring-boot-starter-data-jpa 实现ORM映射
spring-boot-starter-security 处理权限控制
spring-boot-starter-mail 用于通知推送

数据库设计采用三范式原则，核心表包括：

CREATE TABLE `topic` ( `id` bigint NOT NULL AUTO_INCREMENT, `teacher_id` bigint NOT NULL, `title` varchar(100) NOT NULL, `description` text, `max_select` int DEFAULT '1', `current_select` int DEFAULT '0', `status` tinyint DEFAULT '1', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2.2 前端工程化实践

Vue3的组合式API让代码组织更灵活。项目中使用的主要技术点包括：

Vue Router实现动态路由加载
Pinia替代Vuex进行状态管理
Element Plus组件库加速开发
Axios封装了带JWT验证的HTTP客户端

一个典型的API请求封装示例：

const service = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, timeout: 5000 }) service.interceptors.request.use( config => { if (store.getters.token) { config.headers['Authorization'] = `Bearer ${store.getters.token}` } return config }, error => { return Promise.reject(error) } )

3. 核心功能实现

3.1 ABO权限控制系统

系统采用RBAC模型设计，通过JWT实现认证。权限层级分为：

Admin：系统管理员（增删用户、导入导出）
Basic：教师用户（发布课题、选择学生）
Other：学生用户（选题、提交材料）

Spring Security配置关键代码：

@Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/admin/**").hasRole("ADMIN") .antMatchers("/teacher/**").hasAnyRole("TEACHER","ADMIN") .anyRequest().authenticated() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())) .addFilter(new JwtAuthorizationFilter(authenticationManager())); } }

3.2 智能选题匹配算法

系统采用改进的稳定婚姻算法实现双向选择，核心流程：

学生填报志愿（最多5个）
系统按GPA排序生成优先级队列
教师查看申请列表并确认
未匹配学生进入二轮补选

算法实现关键逻辑：

public Map<Long, Long> matchTopics(List<Student> students, List<Topic> topics) { students.sort(Comparator.comparingDouble(Student::getGpa).reversed()); Map<Long, Long> result = new HashMap<>(); // 算法核心实现... return result; }

4. 系统部署指南

4.1 环境准备

需要预先安装：

JDK 1.8+
Node.js 14+
MySQL 8.0+
Maven 3.6+

推荐使用Docker快速搭建环境：

docker run --name mysql -e MYSQL_ROOT_PASSWORD=123456 -p 3306:3306 -d mysql:8.0

4.2 后端启动步骤

导入数据库脚本
修改application.yml中的数据库配置
打包部署：

mvn clean package java -jar target/abo-system-1.0.0.jar

4.3 前端运行方法

npm install npm run dev

生产环境构建：

npm run build

5. 常见问题解决方案

5.1 跨域问题处理

开发环境下需配置代理：

devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }

5.2 数据库连接失败

检查要点：

MySQL服务是否启动
连接字符串中的时区设置
用户权限配置

典型配置示例：

spring: datasource: url: jdbc:mysql://localhost:3306/abo?useSSL=false&serverTimezone=Asia/Shanghai username: root password: 123456

5.3 前端路由刷新404

需要配置Nginx重定向：

location / { try_files $uri $uri/ /index.html; }

6. 项目优化建议

6.1 性能优化方向

引入Redis缓存热门数据
使用MyBatis替代JPA提升复杂查询效率
前端组件异步加载

6.2 功能扩展思路

增加在线文档协作功能
集成钉钉/微信通知
添加查重检测模块

我在实际部署时发现，系统内存占用主要来自三个方面：JVM堆内存设置、MySQL缓冲池配置和Node.js进程管理。建议生产环境至少分配4GB内存，并通过Nginx做负载均衡提升并发能力。

SpringBoot+Vue高校选题管理系统开发实践