1. 项目背景与核心需求
2026届计算机相关专业毕业生面临的课程教学辅助系统开发课题，是一个典型的"SSM+Vue"全栈开发实践项目。这类毕设选题之所以成为热门，主要源于三个现实需求：
- 高校信息化建设加速，传统教学管理模式急需数字化升级
- 疫情后混合式教学成为常态，需要更灵活的在线教学支持工具
- 企业招聘对全栈开发能力的要求日益提高
我去年指导过5个类似项目，发现学生们普遍存在以下痛点：
- 前后端技术栈整合不顺畅
- 教学业务流程理解不深入
- 系统扩展性考虑不足
2. 技术架构设计解析
2.1 SSM框架选型考量
Spring+SpringMVC+MyBatis组合之所以成为高校毕设首选，主要因为：
- 教学资源丰富：高校实验室普遍采用此技术栈
- 轻量级易部署：Tomcat+MySQL即可运行
- 文档体系完善：MyBatis-Generator等工具成熟
典型项目结构示例：
src/ ├── main/ │ ├── java/ │ │ └── com/ │ │ └── edu/ │ │ ├── controller/ │ │ ├── dao/ │ │ ├── entity/ │ │ ├── service/ │ │ └── config/ │ ├── resources/ │ │ ├── mapper/ │ │ ├── application.yml │ │ └── mybatis-config.xml └── webapp/ └── WEB-INF/ └── web.xml2.2 Vue前端技术方案
推荐使用Vue CLI 4.x脚手架创建项目，优势在于：
- 内置Webpack配置优化
- 支持TypeScript开箱即用
- 集成单元测试工具
关键依赖建议版本：
"dependencies": { "vue": "^2.6.14", "element-ui": "^2.15.6", "axios": "^0.21.1", "vue-router": "^3.5.1", "vuex": "^3.6.2" }3. 核心功能模块实现
3.1 教学资源管理模块
数据库设计示例：
CREATE TABLE `course_material` ( `id` int(11) NOT NULL AUTO_INCREMENT, `course_id` int(11) NOT NULL, `file_name` varchar(255) NOT NULL, `file_path` varchar(512) NOT NULL, `file_size` bigint(20) NOT NULL, `upload_time` datetime NOT NULL, `download_count` int(11) DEFAULT '0', PRIMARY KEY (`id`), KEY `idx_course` (`course_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;文件上传前端实现要点：
<template> <el-upload action="/api/material/upload" :before-upload="checkFile" :on-success="handleSuccess"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> <script> export default { methods: { checkFile(file) { const isLt100M = file.size / 1024 / 1024 < 100 if (!isLt100M) { this.$message.error('文件大小不能超过100MB') } return isLt100M } } } </script>3.2 在线作业批改系统
采用WebSocket实现实时批注功能的关键代码：
@ServerEndpoint("/ws/annotation/{assignmentId}") public class AnnotationWebSocket { @OnMessage public void onMessage(String message, @PathParam("assignmentId") String assignmentId) { // 处理批注坐标和内容 redisTemplate.opsForValue().set( "annotation:"+assignmentId, message ); } }前端Canvas绘制批注层实现：
class AnnotationLayer { constructor(canvas) { this.ctx = canvas.getContext('2d') this.points = [] } startDrawing(e) { this.points.push({ x: e.offsetX, y: e.offsetY }) } drawLine() { this.ctx.beginPath() this.ctx.moveTo(this.points[0].x, this.points[0].y) for(let i=1; i<this.points.length; i++) { this.ctx.lineTo(this.points[i].x, this.points[i].y) } this.ctx.stroke() } }4. 系统集成与部署方案
4.1 前后端联调配置
解决跨域问题的Spring配置类：
@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowCredentials(true) .maxAge(3600); } }Axios请求封装示例：
const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 10000 }) service.interceptors.request.use( config => { if (store.getters.token) { config.headers['X-Token'] = getToken() } return config }, error => { return Promise.reject(error) } )4.2 生产环境部署
Nginx配置建议：
server { listen 80; server_name yourdomain.com; location / { root /usr/share/nginx/html/dist; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }数据库连接池优化参数：
spring: datasource: hikari: maximum-pool-size: 20 minimum-idle: 5 connection-timeout: 30000 idle-timeout: 600000 max-lifetime: 18000005. 论文写作要点与答辩技巧
5.1 技术章节撰写规范
系统架构图绘制建议：
- 使用分层架构图展示前后端分离特点
- 数据库ER图需包含主要实体关系
- 核心功能流程图要体现业务逻辑
性能测试指标建议：
- 并发用户数：100-300（根据学校要求）
- 响应时间：页面加载<2s，API响应<500ms
- 吞吐量：>50 req/s
5.2 答辩常见问题应对
技术类问题准备清单：
为什么选择SSM而不是Spring Boot？
- 回答要点：教学延续性、技术可控性、底层原理理解
Vue的响应式原理是什么？
- 可结合Object.defineProperty现场画图说明
如何保证系统安全性？
- 从XSS防护、SQL注入、权限控制三方面回答
我在指导学生答辩时发现，评委最关注三个维度：
- 技术实现的合理性
- 业务场景的理解深度
- 系统设计的扩展性
建议准备1:1的架构图打印稿，方便答辩时展示细节。最后提醒，演示环境一定要提前测试，避免现场出现兼容性问题。曾经有学生因为Chrome版本问题导致ElementUI组件异常，这点要特别注意。
