SSM+Vue.js毕业设计项目管理系统：选题到评分全流程拆解与部署避坑指南

简介：面向计算机专业学生和毕业设计开发者的程序设计实践项目管理系统，基于 Java、SSM 与 Vue.js 技术栈构建，包含完整的前后端代码、数据库脚本与设计文档，可服务于毕设选题、课程设计或项目二次开发。压缩包共有 1017 个文件，约 26.89MB，以 Java、JSP、CSS、JS 等源码文件为主，辅以 PNG、GIF、JPG 等界面素材，并包含 XML、Properties 配置文件与 SQL 初始化脚本，以及 Word 格式论文，便于导入数据库、阅读系统设计。项目集成 Bootstrap、LayUI 与富文本编辑器等常见前端组件，页面样式与目录组织较清晰。目前已有 124 人学习下载；资源描述中附有启动、讲解和二次开发视频教程，上手门槛低，可先运行项目再对照源码理解模块结构，适合需要快速完成毕业设计或继续扩展功能的开发者使用。

1. 这个毕业设计项目能干什么：先说结论，它不是一套“增删改查”的空壳毕设

每年到毕设季，选了相关方向的同学总在找一套能真正落地、能讲清楚业务逻辑的参考项目。这个“程序设计实践项目管理系统”属于典型的院校教学管理场景：教师发布实践课题，学生在线选题、提交课程材料，教师评分，管理员管理全校用户与课题配置。比起常见的学生管理、商城、博客，它的业务对象更贴近“课程设计”这个真实过程，演示答辩时逻辑链条特别顺。整套资源是经典 SSM + Vue.js 前后端分离结构，附带完整的论文、SQL 初始化脚本和接口说明，适合做毕业设计参考，也适合想快速搭一套课程实践管理平台的开发者直接二次开发。先给你吃了定心丸，下面拆结构、拆核心代码，再讲怎么跑起来。

2. 技术选型与工程结构：SSM 后端 + Vue.js 前端，这套分离式架构好在哪

2.1 为什么是 SSM 而不是满天飞的 Spring Boot

这里有个现象值得先说清楚：现在多数新项目都用 Spring Boot，但大量院校毕设和校内实训项目仍然指定 SSM（Spring + Spring MVC + MyBatis）组合。原因很实在——SSM 需要手写配置，把容器初始化、拦截器、事务、Mapper 扫描一个个显式配出来，评阅老师能直接看出你对框架的理解，而不是甩一个全自动的“黑匣子”。另一个原因是这套组合对运行环境非常宽容：Tomcat 8.5、JDK 1.8、MySQL 5.7，都是老机器上跑得最稳的配置。

后端分层是标准的 Controller -> Service -> Mapper 三层。Controller 只做参数接收和结果封装，Service 写业务规则和事务，Mapper 与数据库打交道。前端采用 Vue.js 2.x + Element UI + Axios，构建工具用 vue-cli 2/3 那套 npm 工程。前后端通过 JSON 交互，接口路径统一走/api前缀，页面路由由 Vue Router 管理。这种结构的好处是职责清楚，哪一块出问题直接定位到某一层，不像老式 JSP 项目那样前后端搅在一起。

2.2 后端工程目录结构与职责划分

后端源码用 Maven 管理，典型分包结构如下：

practice-project-server ├── pom.xml ├── src/main/java │ └── com/example/practice │ ├── controller # 接口层：选题、评分、用户管理 │ │ ├── ProjectController.java │ │ ├── ScoreController.java │ │ └── UserController.java │ ├── service # 业务层：事务、状态机判断 │ │ ├── ProjectService.java │ │ └── ScoreService.java │ ├── mapper # MyBatis 数据访问接口 │ │ ├── ProjectMapper.java │ │ └── UserMapper.java │ ├── entity # 数据库实体类 │ │ ├── PracticeProject.java │ │ └── User.java │ ├── common # 统一返回结果、异常处理 │ │ └── Result.java │ └── config # Spring、Spring MVC、拦截器配置 │ ├── spring-mvc.xml │ ├── spring-mybatis.xml │ └── web.xml └── src/main/resources ├── jdbc.properties # 数据库连接配置 ├── mapper # Mapper XML 文件目录 │ ├── ProjectMapper.xml │ └── UserMapper.xml └── sql └── init_database.sql # 建库建表 + 初始数据脚本

和很多直接在代码里写 SQL 的毕设不同，这套的 Mapper 接口与 XML 分离，SQL 集中在 XML 里维护，二次改表结构时不用动 Java 代码，只改 XML 和实体类即可。spring-mybatis.xml里主要配置数据源、SqlSessionFactory、MapperScannerConfigurer 扫描包路径，spring-mvc.xml里配置包扫描、JSON 转换器、文件上传解析器。

2.3 前端工程目录结构与页面组织

前端是一个独立的 Vue 工程，路由和页面按角色划分。目录结构大致如下：

practice-project-web ├── package.json ├── vue.config.js # 开发代理、端口配置 ├── src │ ├── main.js # Vue 实例入口 │ ├── router/index.js # 路由表：登录、学生端、教师端 │ ├── store/index.js # 登录状态缓存 │ ├── api │ │ ├── project.js # 选题接口封装 │ │ └── score.js # 评分接口封装 │ ├── views │ │ ├── login.vue # 登录页 │ │ ├── student │ │ │ ├── projectList.vue # 课题列表与申请 │ │ │ └── mySubmit.vue # 我的选题与材料提交 │ │ └── teacher │ │ ├── projectManage.vue # 课题发布 │ │ └── scoreManage.vue # 学生评分 │ └── utils/request.js # Axios 实例，拦截器统一处理

页面组织按角色切开，学生、教师、管理员三端入口分开。utils/request.js里做了统一拦截：请求头带 token，响应码非 200 时统一弹错误提示。开发环境下，vue.config.js配置 devServer 代理，把/api转发到后端 Tomcat 的 8080 端口，解决跨域。

2.4 数据库表设计：五张核心表的业务关系

整个系统核心域是“题目 - 选题 - 评分”这条线。为了支撑这条线，数据库拆成用户表、实践课题表、选题申请表、材料提交表、成绩表。用户表区分角色，role字段用 1、2、3 分别表示学生、教师、管理员。实践课题表与教师关联，选题申请表连接学生和课题，成绩表记录教师评分结果。核心建表参考如下：

CREATE TABLE practice_project ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(100) NOT NULL COMMENT '课题名称', description TEXT COMMENT '课题要求描述', teacher_id INT NOT NULL COMMENT '发布教师ID', max_student INT DEFAULT 1 COMMENT '可选人数上限', status TINYINT DEFAULT 1 COMMENT '1开放 2关闭 3已截止', deadline DATETIME COMMENT '申请截止时间', create_time DATETIME ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE project_apply ( id INT PRIMARY KEY AUTO_INCREMENT, project_id INT NOT NULL, student_id INT NOT NULL, status TINYINT DEFAULT 0 COMMENT '0待确认 1已确认 2已拒绝', apply_time DATETIME, UNIQUE KEY uk_student (student_id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

注意project_apply表对student_id建了唯一索引，这是硬性业务规则：每个学生只能选择一个实践课题。课题表里max_student控制可选人数，status控制开放状态。这种表设计在论文里也很好写，ER 图和关系说明都非常直观。

3. 核心模块代码拆解：一次“选题申请”请求从前端到数据库的完整链路

3.1 整条调用链长什么样

选一个高频操作“学生发起选题申请”来拆，因为它贯穿了所有分层：Vue 页面按钮触发 -> Axios 封装 POST 请求 -> Spring MVC DispatcherServlet 路由到 Controller -> Controller 校验登录态 -> Service 执行业务规则 -> Mapper 写库 -> 结果逐层返回。理解这条链路，基本就等于理解了这个项目 80% 的后端代码结构。

3.2 Controller 层：只干三件事，接收、校验、调 Service

后端接口入口是ProjectController，负责解析前端 JSON 请求、从 Session 取出当前登录用户、调用 Service 并统一返回Result对象：

@Controller @RequestMapping("/api/project") public class ProjectController { @Autowired private ProjectService projectService; @ResponseBody @RequestMapping(value = "/apply", method = RequestMethod.POST) public Result apply(@RequestBody ApplyDTO dto, HttpSession session) { User user = (User) session.getAttribute("USER_SESSION"); if (user == null) { return Result.error("登录状态已失效，请重新登录"); } if (user.getRole() != 1) { return Result.error("仅学生账号可以申请选题"); } if (dto.getProjectId() == null) { return Result.error("缺少课题ID参数"); } return projectService.applyProject(user.getId(), dto.getProjectId()); } }

这里解释两个细节。@ResponseBody配合@RequestBody，后端接收 JSON 字符串并自动反序列化成ApplyDTO，返回时由 Spring MVC 的 Jackson 转换器序列化成 JSON 字符串，前后端接口完全脱离页面跳转，走纯数据交互。HttpSession里的USER_SESSION是登录拦截器在认证成功后写入的用户对象，apply方法第一件事就是做登录态判断，接口安全性在入口层先把住。Result是统一返回体，内部包含code、msg、data三个字段，前端不管调哪个接口都按这个结构解析，不用为每个接口写不同的判断逻辑。

3.3 Service 层：业务规则全部收拢在事务里

Service 层是这套代码里最值得看的模块。它把“能不能申请”的规则集中处理，包括课题是否存在、是否开放、是否过期、学生是否重复申请，最后写入数据时加上事务控制：

@Service public class ProjectServiceImpl implements ProjectService { @Autowired private ProjectMapper projectMapper; @Autowired private ApplyMapper applyMapper; @Override @Transactional(rollbackFor = Exception.class) public Result applyProject(Integer studentId, Integer projectId) { PracticeProject project = projectMapper.selectById(projectId); if (project == null) { return Result.error("所选课题不存在或已被删除"); } if (project.getStatus() != 1) { return Result.error("该课题当前不在开放状态"); } if (LocalDateTime.now().isAfter(project.getDeadline())) { return Result.error("已超过该课题的申请截止时间"); } int appliedCount = applyMapper.countByStudentId(studentId); if (appliedCount > 0) { return Result.error("每人限选一个课题，请勿重复申请"); } ProjectApply apply = new ProjectApply(); apply.setProjectId(projectId); apply.setStudentId(studentId); apply.setStatus(0); apply.setApplyTime(new Date()); applyMapper.insert(apply); return Result.success("申请已提交，等待教师确认"); } }

@Transactional(rollbackFor = Exception.class)是重点：凡是 Runtime 异常，事务整体回滚，避免出现“学生申请记录插入成功但课题人数未扣减”这类数据不一致。这个项目里事务粒度是“一次申请操作”，其他模块的批量操作会有更大的事务方法，但原则一致——业务规则判断和写库动作必须在一个事务里。applyMapper.countByStudentId的检查逻辑放在 insert 之前，虽然数据库有唯一索引做兜底，但先查后写的双保险能给出更友好的提示文案。

3.4 Mapper 层：MyBatis XML 里的 SQL 参数传递

Mapper 接口定义方法，XML 里写实际 SQL。以申请记录插入为例：

<insert id="insert" parameterType="com.example.practice.entity.ProjectApply" useGeneratedKeys="true" keyProperty="id"> INSERT INTO project_apply (project_id, student_id, status, apply_time) VALUES (#{projectId}, #{studentId}, #{status}, #{applyTime}) </insert> <select id="countByStudentId" resultType="java.lang.Integer"> SELECT COUNT(*) FROM project_apply WHERE student_id = #{studentId} </select>

useGeneratedKeys="true"让数据库自增主键回填到传入实体对象的id属性，方便后续逻辑直接拿主键做关联操作。#{projectId}这里 MyBatis 走的是预编译占位符，和字符串拼接完全不同，既能防 SQL 注入，也会让 MySQL 命中查询缓存。如果你在原项目里看到有人用${}拼接参数，那就要警惕了，这是 SQL 注入的高危写法，二次开发时留意一下。

3.5 前端联动：Vue 页面、Axios 封装、状态刷新

前端projectList.vue页面里，点击“申请”按钮触发方法：

applyProject(row) { this.$confirm('确认申请该课题？', '提示') .then(() => { this.$http.post('/api/project/apply', { projectId: row.id }) .then(res => { if (res.data.code === 200) { this.$message.success(res.data.msg) this.loadProjectList() } else { this.$message.error(res.data.msg) } }) }) .catch(() => {}) }

这里有两个习惯我认为值得照抄。其一是把接口地址集中放在src/api/project.js文件里，页面只依赖导出函数而不是直接写 url，项目变大后改接口前缀只动一个文件；其二是所有请求都走utils/request.js封装的 Axios 实例，拦截器统一带 token、统一弹错误，而不是每个页面单独处理状态码。loadProjectList()在成功回调里重新拉取列表，这样申请成功后剩余人数和按钮状态立即刷新，不用整页 reload，体验比 JSP 时代强太多。

4. 本地运行与部署实操：从建库到前后端联调的完整步骤

4.1 环境准备与版本清单

先把环境版本看清楚，这个项目不建议用太新的版本硬上，尤其是涉及 Spring 老版本配置和 Node 依赖。我自己跑这种老毕设的习惯是先列一张版本对照表，避免一边跑一边踩“版本不兼容”的坑：

MySQL 8.0 能用，但连接驱动和 URL 参数有差异，细节我放到第 5 章避坑部分专门讲，这里先跑起来。

4.2 初始化数据库与导入源码

源码包里一定带了sql/init_database.sql，这是整个运行流程的起点。在 MySQL 中执行：

mysql -u root -p < sql/init_database.sql

脚本执行后会创建数据库practice_db，建好用户表、课题表、申请表、成绩表，并插入初始管理员账号和几个演示课题。执行完成后先验证一下表是否建全：

USE practice_db; SHOW TABLES; SELECT * FROM sys_user;

初始管理员账号一般在 SQL 脚本末尾能看到，密码通常做过 MD5 加密，登录页输入的密码会先加密再比对。接下来打开后端工程的jdbc.properties，把数据库连接改成你本机的配置：

jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/practice_db?useUnicode=true&characterEncoding=utf8&useSSL=false jdbc.username=root jdbc.password=123456

注意characterEncoding=utf8必须保留，否则中文课题名入库会出现乱码。

4.3 后端启动：IDEA 导入并发布到 Tomcat

打开 IDEA，选择 Import Project，选中后端根目录的pom.xml，以 Maven 项目导入。等依赖下载完成后，先跑一条命令确认依赖没缺：

mvn clean package -DskipTests

如果 Maven 镜像源慢，建议在settings.xml里把中央仓库源换成国内镜像，速度能快不少。后端是传统 war 包方式，需要配置 Tomcat：点击 Run -> Edit Configurations -> Tomcat Server -> Local，选择本机 Tomcat 目录，Deployment 标签页里添加 war exploded 包，Application context 写/，这样前端请求/api/project/apply不需要带额外上下文路径。启动 Tomcat，看到控制台输出 Spring 容器初始化完成、Mapper 扫描成功，后端就起来了。

4.4 前端启动：npm install 与开发代理

前端工程打开终端，先装依赖：

cd practice-project-web npm install

如果npm install过程中 node-sass 报错或者某个包一直下载失败，可以直接用淘宝镜像源重装，这是 Vue2 时代最常遇到的环境问题。装完后检查vue.config.js里 devServer 的代理配置，确保/api转发到后端地址：

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

然后启动：

npm run dev

浏览器访问http://localhost:8081，跳转到登录页。如果代理生效，登录请求会顺利打到 8080 的 Tomcat，不配置代理的话，浏览器控制台会看到跨域报错。

4.5 联调验证：用一次完整操作检验整个链路

环境全部起来后，做一轮业务验证。用管理员账号登录，创建教师账号；用教师账号登录，发布一个实践课题；注销后用学生账号登录，申请这个课题；再退回教师账号，在评分管理里给学生打分。每一步操作后刷新数据库表单：

SELECT id, project_id, student_id, status FROM project_apply; SELECT * FROM score;

看到申请表、成绩表都有对应记录，说明前后端联调、数据库读写、业务状态流转全部打通。如果哪一步卡住，优先看后端控制台异常堆栈，再看浏览器 Network 面板里对应接口返回的状态码。

5. 避坑与常见问题：跑了三天才把环境捣鼓通，这些坑你绕开

5.1 Tomcat 启动直接失败：Spring 版本与 JDK 版本冲突

现象：Tomcat 启动几秒后报java.lang.NoSuchMethodError或ClassNotFoundException: javax.servlet.http.HttpServletMapping。原因：Maven 拉取依赖时用了较新的 Spring 版本，而本机 JDK 或 Tomcat 版本偏旧，编译和运行时类库不匹配。解决：先检查pom.xml里 Spring 版本，SSM 项目常用 4.x 或 5.0.x，锁定版本后mvn clean package重新构建。我一般还会检查mvn dependency:tree输出，看有没有同包名但不同版本重复引入。

5.2 前端正常请求后端却一直报跨域

现象：浏览器 Network 里请求是(failed)net::ERR_FAILED，控制台报CORS错误。原因：前端跑在 8081 端口，后端在 8080，浏览器同源策略拦截，但很多人以为加了代理就不用管后端了——其实代理只解决开发环境的请求转发，若前端直接访问后端地址，仍要后端配合。解决：开发环境统一走vue.config.js的 proxy，确保请求路径不改 Host；如果非要直连，后端spring-mvc.xml里配置一个 CORS 过滤器，允许来源、方法、请求头。两种方案选一种，别混用。

5.3 启动报 “Invalid bound statement (not found)”

现象：项目启动时 Spring 容器初始化没有报错，一调用 Mapper 方法就抛Invalid bound statement (not found: com.example.mapper.ProjectMapper.applyProject)。原因：Mapper 接口和 XML 文件没有建立映射关系，常见是spring-mybatis.xml里mapper-locations路径写错，或者 XML 文件的 namespace 值和接口全限定名不一致。解决：打开 XML 文件核对 namespace，确认 XML 放在resources/mapper目录下；再检查spring-mybatis.xml的 MapperLocations 配置是否写为classpath:mapper/*.xml。这个问题在毕设里出现频率极高，本质是 MyBatis 扫描不到 SQL 定义。

5.4 MySQL 8.0 连接报错：驱动类与时区问题

现象：后端启动时数据源初始化失败，报The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized，或者ClassNotFoundException: com.mysql.jdbc.Driver。原因：项目依赖里带的是老驱动mysql-connector-java5.x，驱动类名是com.mysql.jdbc.Driver；MySQL 8.0 使用新版驱动com.mysql.cj.jdbc.Driver，并强制要求设置serverTimezone。解决：把pom.xml驱动版本升级到 8.0.x，jdbc.properties改成：

jdbc.driver=com.mysql.cj.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/practice_db?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai

这个问题很多人在答辩前一天才遇到，建议一开始就按 MySQL 8.0 的写法配。

5.5 前端 npm install 卡死或 node-sass 编译失败

现象：npm install长时间停在node-sass下载阶段，最终报gyp ERR! build error或 ETIMEDOUT。原因：node-sass 要从 GitHub 拉二进制文件，网络环境受限；而且新版 Node 对 node-sass 有编译版本要求，Node 16 以上很容易出现 arm64 架构编译失败。解决：把 Node 降到 14.x，或者把工程里的 node-sass 替换成 dart-sass，同时对.sass语法做少量适配。我的经验是，跑轮子工程优先“就低不就高”，Node 14 是 Vue2 时代兼容性最稳的一档。

6. 二次开发思路：把“程序设计实践”改成你自己的课程实践平台

拿到这套项目后，我建议改造方向不是往里面疯狂加功能，而是先把“课程”这一层抽象出来。现在的表结构里，实践课题直接挂在教师和班级下，如果要把系统换个场景用，比如软件工程课程设计、数据库实训，可以在practice_project表上加一个course_type字段，用数据字典维护课程类型，这样一套代码就能承载多门实践课。

另一个值得改的是批量导入导出。教师发布课题时手填几十个题目非常痛苦，可以引入 POI 依赖，做一个 Excel 批量导入接口，同时把学生成绩导出成 Excel。前端只是多一个上传组件和按钮，后端 Service 里解析文件和写库逻辑是独立的，不影响原有核心代码。通知模块也可以顺手升级：现在选题状态变化需要学生主动刷新页面，简单做法是加一张站内消息表，教师确认申请时插入消息记录，学生登录后拉取未读消息，改成 WebSocket 推送那是后话了。

如果目标是把这套迁到新型技术栈，核心工作量在后端替换。把 Spring + Spring MVC 的整体配置移除，换成 Spring Boot 的自动配置，保留 MyBatis 和 Mapper XML 不动，只加一个启动类和配置项。最快的迁移方式是新建 Spring Boot 工程，pom.xml引入spring-boot-starter-web和mybatis-spring-boot-starter，原 Controller、Service、Mapper 直接拷进来，然后写一个入口类：

@SpringBootApplication @MapperScan("com.example.practice.mapper") public class PracticeApplication { public static void main(String[] args) { SpringApplication.run(PracticeApplication.class, args); } }

@MapperScan代替了原来spring-mybatis.xml里的扫描配置，application.yml里写数据源与 MyBatis 配置即可。前端因为走/api接口，改完后端启动端口后再调一下代理 target 就能无缝对接。这个迁移做完，整个项目答辩时既讲得清原理（SSM 这套），又展示出对新技术的掌握（Spring Boot 概念），是加分项。

我自己的习惯是：拿到任何毕设源码，先把pom.xml和package.json整体读一遍，确认每个依赖版本都是自己跑过兼容的，再动手改任何业务代码。从那以后每次整合老项目都强制走一遍“先跑通、再做最小改动、最后验证原功能”的流程，翻车的概率急剧下降。希望这篇拆解能帮你在毕设季少踩几个坑，把时间花在真正该钻研的功能点上。

本文还有配套的精品资源，点击获取