SpringBoot+Vue3实战：手把手教你从零搭建一个毕业论文管理系统（附完整源码）

2026/7/1 9:23:13

SpringBoot+Vue3实战：从零构建高可用毕业论文管理系统

1. 项目架构设计与技术选型

在高校信息化建设中，毕业论文管理系统作为连接学生、导师和教务部门的核心平台，需要兼顾易用性、安全性和扩展性。我们采用SpringBoot+Vue3的前后端分离架构，结合Element Plus组件库和RESTful API规范，打造一套符合现代Web开发标准的解决方案。

核心技术栈对比分析：

技术方向	选型方案	优势说明
前端框架	Vue3 + Composition API	更小的打包体积、更好的TypeScript支持、响应式性能提升30%以上
UI组件库	Element Plus	专为Vue3优化，提供丰富的表单、表格等管理后台常用组件
状态管理	Pinia	比Vuex更简洁的API设计，完美支持Vue3的setup语法
后端框架	SpringBoot 3.x	内嵌Tomcat服务器、自动配置机制、完善的生态扩展能力
持久层框架	MyBatis-Plus	强大的CRUD操作封装、Lambda表达式查询、分页插件
安全认证	JWT + Spring Security	无状态认证、细粒度权限控制、防止CSRF攻击

实际开发中，我们特别选择了Vite作为前端构建工具，相比传统Webpack能带来以下提升：

冷启动时间缩短80%以上
HMR热更新几乎瞬间完成
按需编译避免全量构建

// 示例：SpringSecurity配置核心代码 @Configuration @EnableWebSecurity public class SecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http.csrf().disable() .authorizeRequests() .antMatchers("/api/auth/**").permitAll() .antMatchers("/api/admin/**").hasRole("ADMIN") .anyRequest().authenticated() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())) .sessionManagement() .sessionCreationPolicy(SessionCreationPolicy.STATELESS); return http.build(); } }

2. 数据库设计与业务建模

毕业论文管理涉及多方协作流程，我们需要建立科学的数据库模型来支撑以下核心业务场景：

学生选题与开题报告提交
导师指导过程记录
论文多轮修改版本管理
答辩安排与成绩评定

核心表结构设计：

CREATE TABLE `sys_user` ( `id` bigint NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL COMMENT '学号/工号', `password` varchar(100) NOT NULL, `real_name` varchar(50) DEFAULT NULL, `college` varchar(100) DEFAULT NULL COMMENT '学院', `major` varchar(100) DEFAULT NULL COMMENT '专业', `role` enum('STUDENT','TEACHER','ADMIN') NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `idx_username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE `thesis` ( `id` bigint NOT NULL AUTO_INCREMENT, `title` varchar(200) NOT NULL, `student_id` bigint NOT NULL, `teacher_id` bigint NOT NULL, `status` enum('DRAFT','SUBMITTED','APPROVED','REJECTED','DEFENSE_PASSED') NOT NULL DEFAULT 'DRAFT', `submit_time` datetime DEFAULT NULL, `defense_time` datetime DEFAULT NULL, `final_score` decimal(5,2) DEFAULT NULL, PRIMARY KEY (`id`), KEY `idx_student` (`student_id`), KEY `idx_teacher` (`teacher_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

注意：所有敏感字段如密码必须进行加密存储，推荐使用BCryptPasswordEncoder

业务建模时特别需要注意的几点：

论文版本控制采用单独的表设计，保留历史修改记录
导师指导学生关系建议建立中间表，支持一对多指导
答辩安排需要考虑时间冲突检测机制
文件上传需独立服务，避免数据库存储大文件

3. 前端工程化实践

基于Vue3的组合式API，我们可以构建更模块化的前端架构。项目采用以下目录结构：

src/ ├── api/ # API请求封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 ├── styles/ # 全局样式 ├── utils/ # 工具函数 └── views/ # 页面组件 ├── admin/ # 管理员界面 ├── teacher/ # 导师界面 └── student/ # 学生界面

典型页面组件实现：

<script setup> import { ref, onMounted } from 'vue' import { useThesisStore } from '@/stores/thesis' const thesisStore = useThesisStore() const formData = ref({ title: '', keywords: [], abstract: '' }) onMounted(async () => { await thesisStore.loadDraft() if(thesisStore.draft) { formData.value = { ...thesisStore.draft } } }) const handleSubmit = async () => { await thesisStore.submitThesis(formData.value) } </script> <template> <el-form :model="formData" label-width="120px"> <el-form-item label="论文标题" required> <el-input v-model="formData.title" /> </el-form-item> <el-form-item label="关键词"> <el-tag v-for="(tag, index) in formData.keywords" :key="index" closable @close="formData.keywords.splice(index, 1)" > {{ tag }} </el-tag> <el-input v-if="inputVisible" v-model="inputValue" @keyup.enter="handleInputConfirm" /> <el-button v-else @click="showInput">+ 添加关键词</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSubmit">提交审核</el-button> </el-form-item> </el-form> </template>

前端工程化中的关键优化点：

使用Axios拦截器统一处理401跳转登录
基于Vite的按需加载配置减少首屏体积
路由懒加载提升页面切换速度
自定义指令实现按钮级权限控制

4. 后端核心功能实现

SpringBoot后端需要提供稳定高效的API服务，我们采用分层架构设计：

com.thesis ├── config/ # 配置类 ├── controller/ # 控制器层 ├── dto/ # 数据传输对象 ├── entity/ # 数据库实体 ├── exception/ # 异常处理 ├── mapper/ # MyBatis映射 ├── service/ # 业务逻辑层 └── util/ # 工具类

论文审核流程状态机实现：

public enum ThesisStatus { DRAFT(1, "草稿"), SUBMITTED(2, "已提交"), APPROVED(3, "审核通过"), REJECTED(4, "审核驳回"), DEFENSE_PASSED(5, "答辩通过"); private final int code; private final String desc; private static final Map<Integer, ThesisStatus> STATUS_MAP = Arrays.stream(values()) .collect(Collectors.toMap(ThesisStatus::getCode, Function.identity())); public static ThesisStatus fromCode(int code) { return STATUS_MAP.getOrDefault(code, DRAFT); } // 状态流转校验 public boolean canTransferTo(ThesisStatus targetStatus) { switch (this) { case DRAFT: return targetStatus == SUBMITTED; case SUBMITTED: return targetStatus == APPROVED || targetStatus == REJECTED; case APPROVED: return targetStatus == DEFENSE_PASSED; default: return false; } } }

文件上传服务采用分块上传策略，解决大论文文件传输问题：

@RestController @RequestMapping("/api/file") public class FileController { @PostMapping("/upload") public R upload(@RequestParam("file") MultipartFile file, @RequestParam("chunkNumber") int chunkNumber, @RequestParam("totalChunks") int totalChunks, @RequestParam("identifier") String identifier) { String tempDir = System.getProperty("java.io.tmpdir") + "/upload/" + identifier; File chunkFile = new File(tempDir, chunkNumber + ".part"); try { file.transferTo(chunkFile); if (chunkNumber == totalChunks) { // 合并所有分块 mergeFiles(tempDir, identifier); } return R.ok(); } catch (IOException e) { return R.error("文件上传失败"); } } }

5. 系统部署与性能优化

生产环境部署建议采用Docker容器化方案，以下为docker-compose.yml示例：

version: '3.8' services: backend: build: ./backend ports: - "8080:8080" environment: - SPRING_PROFILES_ACTIVE=prod - DB_URL=jdbc:mysql://mysql:3306/thesis depends_on: - mysql - redis frontend: build: ./frontend ports: - "80:80" depends_on: - backend mysql: image: mysql:8.0 environment: - MYSQL_ROOT_PASSWORD=thesis123 - MYSQL_DATABASE=thesis volumes: - mysql_data:/var/lib/mysql redis: image: redis:6-alpine volumes: mysql_data:

性能优化关键指标：

API响应时间 ≤ 300ms (P99)
并发用户支持 ≥ 1000
系统可用性 ≥ 99.9%

缓存策略设计：

使用Redis缓存热点数据（如学院列表、公告信息）
论文查询结果实现二级缓存（本地缓存+Redis）
文件下载采用CDN加速
数据库查询优化索引设计

@Service @RequiredArgsConstructor public class ThesisServiceImpl implements ThesisService { private final ThesisMapper thesisMapper; private final RedisTemplate<String, Object> redisTemplate; @Cacheable(value = "thesis", key = "#id") public ThesisVO getThesisDetail(Long id) { String cacheKey = "thesis:" + id; ThesisVO cached = (ThesisVO) redisTemplate.opsForValue().get(cacheKey); if (cached != null) { return cached; } Thesis thesis = thesisMapper.selectById(id); ThesisVO vo = convertToVO(thesis); redisTemplate.opsForValue().set(cacheKey, vo, 1, TimeUnit.HOURS); return vo; } }