基于SpringBoot和Vue的实验报告管理系统的设计与实现

实验报告管理系统的背景

教育信息化的发展对实验教学管理提出了更高要求。传统实验报告管理依赖纸质文档或简单电子文档，存在效率低、易丢失、难以追溯等问题。高校实验室每年产生大量实验报告，手工批改和归档消耗教师大量时间，学生也无法便捷获取反馈。

采用SpringBoot和Vue的技术意义

SpringBoot后端框架提供快速构建RESTful API的能力，自动配置特性简化了数据库连接、安全认证等模块的整合。Vue.js前端框架的响应式数据绑定和组件化开发模式，能高效构建交互友好的管理界面。前后端分离架构使系统更易维护和扩展。

系统实现的核心价值

提升实验教学效率，教师可在线批改报告并自动生成成绩统计。学生能实时查看批改结果和历史报告。系统支持报告模板管理、查重检测、多维数据分析等功能，为教学质量评估提供数据支撑。电子化存储节省物理空间，权限管理保障数据安全。

对教学改革的推动作用

该系统契合混合式教学需求，促进实验教学流程标准化。数据分析功能帮助教师发现教学薄弱环节，优化实验设计。移动端适配使学生能随时提交和查阅报告，推动实验教学从单向传授向互动式学习转变。

技术栈组成

后端技术（SpringBoot）

• 框架核心：Spring Boot 2.7.x（简化配置，内嵌Tomcat）
• 持久层：Spring Data JPA + Hibernate（ORM映射），或MyBatis-Plus（需手动SQL）
• 数据库：MySQL 8.0（事务支持），PostgreSQL（JSON类型支持）
• 安全认证：Spring Security + JWT（无状态鉴权）
• API规范：Swagger UI（自动生成接口文档）
• 缓存：Redis（高频访问数据缓存）

前端技术（Vue）

• 框架版本：Vue 3.x（Composition API） + Vue Router + Pinia（状态管理）
• UI组件库：Element Plus（表单/表格组件），或Ant Design Vue
• HTTP客户端：Axios（拦截器处理Token）
• 构建工具：Vite（替代Webpack提速开发）
• 可视化：ECharts（实验数据统计图表）

关键集成方案

前后端交互

• RESTful API设计（JSON格式，状态码规范）
• 跨域处理：SpringBoot的@CrossOrigin或Nginx反向代理
• 文件上传：SpringBoot的MultipartFile+ Vue的el-upload

数据库设计

• 实验报告表：包含ID、标题、所属课程、提交学生、PDF附件路径等字段
• 用户表：角色区分（学生/教师/管理员） + 密码BCrypt加密

部署方案

• 后端打包：SpringBoot打成JAR包（java -jar启动）
• 前端部署：Vite构建的静态资源托管至Nginx
• 容器化（可选）：Docker + Docker Compose编排MySQL和Redis服务

系统架构设计

SpringBoot + Vue的前后端分离架构：

• 后端：SpringBoot 2.x + MyBatis-Plus + MySQL
• 前端：Vue 3 + Element Plus + Axios
• 交互：RESTful API + JWT认证

后端核心代码

实验报告实体类

@Data @TableName("lab_report") public class LabReport { @TableId(type = IdType.AUTO) private Long id; private String title; private String content; private String studentId; private String teacherComment; private Integer status; // 0-未提交 1-已提交 2-已批改 private LocalDateTime submitTime; }

控制器示例

@RestController @RequestMapping("/api/report") public class ReportController { @Autowired private ReportService reportService; @PostMapping public Result submitReport(@RequestBody LabReport report) { return reportService.saveReport(report); } @GetMapping("/{id}") public Result getReport(@PathVariable Long id) { return Result.success(reportService.getById(id)); } }

JWT认证拦截器

public class JwtInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { String token = request.getHeader("Authorization"); try { JwtUtil.verifyToken(token); return true; } catch (Exception e) { response.setStatus(401); return false; } } }

前端核心代码

报告提交表单组件

<template> <el-form @submit.prevent="handleSubmit"> <el-form-item label="报告标题"> <el-input v-model="form.title"></el-input> </el-form-item> <el-form-item label="报告内容"> <el-input type="textarea" v-model="form.content"></el-input> </el-form-item> <el-button type="primary" native-type="submit">提交</el-button> </el-form> </template> <script setup> import { ref } from 'vue'; import { submitReport } from '@/api/report'; const form = ref({ title: '', content: '' }); const handleSubmit = async () => { await submitReport(form.value); }; </script>

API请求封装

import axios from 'axios'; const service = axios.create({ baseURL: '/api', timeout: 5000 }); service.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = token; } return config; }); export const submitReport = (data) => service.post('/report', data);

数据库设计

CREATE TABLE `lab_report` ( `id` bigint NOT NULL AUTO_INCREMENT, `title` varchar(100) NOT NULL, `content` text, `student_id` varchar(20) NOT NULL, `teacher_comment` text, `status` tinyint DEFAULT '0', `submit_time` datetime DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

关键功能实现

文件上传功能

后端接收：

@PostMapping("/upload") public Result uploadFile(@RequestParam MultipartFile file) { String fileName = FileUtil.upload(file); return Result.success(fileName); }

前端实现：

<el-upload action="/api/upload" :on-success="handleUploadSuccess"> <el-button type="primary">上传附件</el-button> </el-upload>

状态管理

使用Vuex/Pinia管理报告状态：

// stores/report.js export const useReportStore = defineStore('report', { state: () => ({ reports: [] }), actions: { async fetchReports() { this.reports = await getReports(); } } });