最近帮一个朋友把一个Java Web课程作业管理系统的源码完整跑通了一遍技术栈是SpringBoot2Vue3MyBatis-PlusMySQL8.0还带配套文档。说实话这种管理系统类项目在大学课程设计、毕业设计和中小型内部工具中出镜率极高但真正能做到逻辑完整、能一次跑通、文档还像样的并不多。这篇文章我就把整个系统的设计思路、核心实现、数据库建模、环境配置和部署过程完整梳理一遍顺便把我在实操中踩过的坑、补过的逻辑一起交代清楚。不管你是准备做类似课设的学生还是工作中要快速搭一个作业收集管理后台的开发者这篇文章应该能帮你省掉不少弯路。1. 一个课程作业管理系统到底要先想清楚什么1.1 系统边界不是所有功能都要做我接手这个项目的第一件事不是看代码而是先看它的功能边界。课程作业管理系统这个名字听起来挺宽泛但真正落地的时候核心要解决的就三件事老师布置作业、学生提交作业、老师批改打分。把这三点想明白系统的主干就出来了。这套系统的角色分得很清楚三种角色管理员、教师、学生。管理员管人教师和学生账号的维护、管课程课程的创建与归档教师管课负责具体课程下的作业布置、批改、成绩管理学生管交查看作业、提交作业、查看成绩和评语。围绕这个边界功能模块就很好拆了用户模块登录、注册、角色权限控制、个人信息维护课程模块课程创建、选课、课程列表、课程成员管理作业模块作业发布、作业列表、作业详情、作业修改和删除提交模块提交作业附文件或文本、重复提交覆盖、提交截止时间控制批改模块下载学生作业、评分、写评语、成绩导出统计模块作业完成率、成绩分布、学生平均分这里有个经验值得单独拿出来说很多课设项目做失败不是功能太少而是功能太散。我在这个项目里见过那种连论坛消息通知在线聊天都塞进来的设计结果核心的作业提交反而做得稀烂。做管理系统收敛边界永远比堆功能重要。1.2 核心流程梳理一次完整的作业生命周期在动手写代码之前我把系统的核心流程画了一遍。一次完整的作业生命周期是这样的教师登录系统进入自己负责的课程教师发布一次作业设置作业标题、要求说明、截止时间、满分分值学生登录后在待提交作业列表里看到该作业点击进入详情学生提交作业可以附上文件比如PDF、Word、压缩包也可以填写文本内容系统检查是否已经过期如果过期则禁止提交学生在截止时间前可以重复提交系统自动覆盖旧记录教师在批改列表里看到已提交的学生名单在线预览或下载文件教师打分数、写评语学生端同步看到成绩和评语教师可以导出成绩单Excel用于归档这个流程看似简单但每一步都有细节。比如截止时间的判断——数据库存的是时间戳前端展示用的是格式化日期两个地方必须统一时区否则就会出现前端看着还没到点后端已经拒绝提交的诡异问题。这种坑后面我会专门说。2. 技术栈选型为什么是SpringBoot2Vue3MyBatis-PlusMySQL8.02.1 版本选择的现实考量先说结论这套技术栈在今天看来不是最新的但是最稳的。SpringBoot2经过大量项目验证生态成熟问题排查资料最多Vue3是前端主流组合式API写起来清爽配合Vite构建速度飞快MyBatis-Plus把单表CRUD的重复代码基本消灭掉了MySQL8.0在性能、窗口函数、JSON支持上都比5.7强一大截。选SpringBoot2而不是SpringBoot3一个很实际的原因JDK版本和第三方库兼容性。SpringBoot3强制要求JDK17起步而很多学校机房、老服务器上的JDK还停留在1.8。SpringBoot2.x最高支持到JDK8所以对于要部署在旧环境下的系统SpringBoot2是更安全的选择。选Vue3也不用多说。Vue2已经停止维护了新项目没必要再走回头路。Vue3的组合式API配合script setup语法代码量比Options API少了一大截而且响应式原理改成了Proxy性能比Vue2的Object.defineProperty强不少。对于表格表单弹窗这种管理系统典型页面Vue3写起来非常顺手。2.2 前后端分离的架构思路这套系统采用的是前后端完全分离的架构。后端跑在SpringBoot内置的Tomcat上提供纯粹的JSON接口端口默认8080前端是独立的Vue3工程开发环境跑在Vite的5173端口通过代理转发请求到后端生产环境前端构建成静态文件部署到Nginx由Nginx做反向代理把/api开头的请求转发到后端服务。这种架构最大的好处是前后端可以并行开发。后端的同学只需要把接口定义好路径、入参、出参前端的同学用Mock数据就可以先做页面。我自己干活的时候习惯先定好接口文档然后用Apifox之类的工具把接口Mock出来这样两边互不阻塞。前后端交互统一走JSON接口路径统一以/api开头。比如POST /api/auth/login 登录 GET /api/courses 课程列表 POST /api/courses 创建课程 POST /api/assignments 发布作业 POST /api/submissions 提交作业 GET /api/submissions/{assignmentId} 某个作业的所有提交记录统一前缀的好处是在部署阶段非常明显——Nginx只需要配一条转发规则就能把所有后端请求代理过去前端代码里不用感知后端地址Cookie的跨域问题也少很多。3. 数据库设计作业系统的地基怎么打3.1 核心表结构与关系这套系统的表设计不算复杂核心就六张表表名用途关键字段sys_user用户表三种角色统一存放id, username, password, real_name, role, emailcourse课程表id, course_name, teacher_id, description, statuscourse_student选课关系表id, course_id, student_id, create_timeassignment作业表id, course_id, title, content, deadline, full_score, create_timesubmission提交记录表id, assignment_id, student_id, content, file_url, submit_time, score, commentfile_info文件表id, original_name, stored_name, file_path, file_size, upload_timesys_user表里用一个role字段区分角色取值是ADMIN/TEACHER/STUDENT登录后后端根据角色决定能访问哪些接口。用一张表存所有用户比分成三张表简单得多权限控制也直观——一个拦截器判断角色字符串就行。submission表是整个系统的核心。一个学生对一个作业只有一条提交记录重复提交就是更新这条记录的content、file_url、submit_time字段。这个设计要注意唯一约束我在表上加了UNIQUE KEY uk_assignment_student (assignment_id, student_id)从数据库层面杜绝了一个学生对一个作业提交多条记录的脏数据。course_student表是多对多关系的中间表也是学生我的课程和教师课程学生名单两个功能的数据来源。这里要注意删除课程的时候关联的选课记录要一起删否则会出现课程已经没了但学生选课列表里还挂着的情况。我在Service层实现了这个级联删除逻辑没有依赖MySQL的外键。3.2 关键字段设计与索引注意事项几个字段的设计当时反复琢磨过这里挑重要的说一下。截止时间到底用什么类型存我用的datetime类型Java侧对应LocalDateTime。这里有个统一规范前端传参用yyyy-MM-dd HH:mm:ss格式的字符串后端用DateTimeFormat注解接收Jackson序列化的时候在application.yml里配好全局时间格式spring: jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8这个time-zone: GMT8特别重要。如果不配服务器时区是UTC的话页面上显示的时间和数据库里存的时间会差8个小时。我见过不止一个项目因为这个被老师打回重做。文件路径存什么存相对路径不存绝对路径。比如/uploads/2024/05/abc123.pdf前面加一个配置项file.upload-dir指向实际磁盘位置。这样系统迁移部署的时候只需要改配置不用改数据库。有些同学会直接把整个绝对路径D:\workspace\uploads\xxx.pdf存进去换台机器就全废了。索引设计方面我没有滥用索引但在三处加了submission表的(assignment_id, student_id)唯一索引前面说过了submission表的assignment_id普通索引用于快速查某个作业的全部提交assignment表的course_id普通索引用于按课程查作业列表索引不是越多越好写多读少的表加一堆索引反而拖慢写入速度。管理系统这种场景查询维度很固定给外键字段加索引就够了。4. 后端核心逻辑实现从登录鉴权到作业流转4.1 项目分层与MyBatis-Plus的高效用法后端项目按标准的三层结构组织Controller层接收请求、Service层业务逻辑、Mapper层数据库操作。另外加了一个config包放配置类一个common包放统一返回结果、异常处理、工具类。这里重点说MyBatis-Plus。这个框架最大的价值是把单表CRUD的样板代码消灭了。BaseMapper内置了selectById、selectList、insert、updateById这些方法不需要自己写XML。像根据教师ID查课程列表这种操作用LambdaQueryWrapper一行搞定ListCourse courses courseMapper.selectList( new LambdaQueryWrapperCourse() .eq(Course::getTeacherId, teacherId) .orderByDesc(Course::getCreateTime) );不需要写SQL不需要建XML映射文件类型安全字段名不会写错写错了编译期就报错。这是MyBatis-Plus比原生MyBatis舒服太多的地方。分页用MyBatis-Plus的分页插件配置一次就行Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); PaginationInnerInterceptor pagination new PaginationInnerInterceptor(DbType.MYSQL); pagination.setMaxLimit(100L); interceptor.addInnerInterceptor(pagination); return interceptor; } }然后业务代码里用Page对象一包查询就自动带上了LIMITPageSubmission page new Page(current, size); PageSubmission result submissionMapper.selectPage(page, new LambdaQueryWrapperSubmission() .eq(Submission::getAssignmentId, assignmentId) .orderByAsc(Submission::getSubmitTime) );maxLimit设成100是为了防止有人传一个特别大的size参数把数据库拖垮。这种防护平时不起眼但关键时刻能救命。4.2 文件上传比想象中容易踩坑的部分作业提交必然涉及文件上传。前端的input typefile加上后端的MultipartFile接收这套链路本身不难但我在这块踩过两个印象深刻的坑。第一个坑是文件大小限制。SpringBoot默认单文件最大1MB多文件最大10MB。学生交个带图的Word文档很容易就超过这个数。必须在配置里手动调大spring: servlet: multipart: max-file-size: 50MB max-request-size: 100MB第二个坑是文件名处理。学生上传的文件名可能是中文的可能包含特殊字符如果直接用原始文件名存盘轻则乱码重则路径穿越。我的处理方式是存盘文件名用UUID重新生成原始文件名单独存数据库。这样磁盘上永远不会出现乱七八糟的文件名下载的时候再把原始文件名返回给用户。String originalFilename file.getOriginalFilename(); String ext originalFilename.substring(originalFilename.lastIndexOf(.)); String storedName UUID.randomUUID() ext; // 按年/月建子目录避免单目录文件过多 String datePath LocalDate.now().format(DateTimeFormatter.ofPattern(yyyy/MM)); String dir uploadDir / datePath; File dirFile new File(dir); if (!dirFile.exists()) { dirFile.mkdirs(); } file.transferTo(new File(dir / storedName));下载的时候再通过stored_name反查original_name用URLEncoder.encode处理一下中文文件名设置Content-Disposition: attachment响应头就能正常触发浏览器下载。4.3 登录鉴权与拦截器设计这个项目没有引入Spring Security或Shiro这类重框架原因很简单——用户量不大、角色只有三种、权限控制逻辑清晰自己写个拦截器反而更可控。过度设计在这种规模的系统里就是负担。鉴权方案用的是Token方案。用户登录成功后后端生成一个UUID作为Token存到Redis里key是tokenvalue是userId过期时间2小时。前端拿到Token后存在localStorage里每次请求在请求头带Authorization: Bearer token。拦截器的核心逻辑从请求头取Token没有Token直接返回401Redis里查不到Token说明登录过期返回401查到Token把userId放Request域里放行然后还有一个角色校验的逻辑通过自定义注解实现。在需要教师权限的接口上加RequireRole(TEACHER)拦截器里判断当前登录用户的角色是否匹配。自定义注解加拦截器比在Controller里每个方法手写角色判断干净得多新加一个接口只需要加一行注解不用复制粘贴判断逻辑。这种设计在中小型管理系统这个体量下投入产出比非常高。5. Vue3前端页面的组织方式与组件化思路5.1 工程搭建与目录规划前端用的是Vite Vue3 Vue Router Pinia Element Plus这个组合。Vite创建项目的命令很简单但如果Node版本不对这里会有大坑——后面单独讲。工程到手后我先重新规划了目录结构原则是按业务模块分目录而不是按文件类型分目录。课程管理相关的页面放在views/course/下作业管理相关的放在views/assignment/下通用的表格、弹窗组件放components/接口请求统一走api/目录下的模块文件。src/ api/ # 接口请求封装 course.js assignment.js submission.js assets/ # 静态资源 components/ # 通用组件 Pagination.vue FileUpload.vue router/ index.js stores/ # Pinia 状态 user.js views/ login/ course/ # 课程列表、课程详情 assignment/ # 作业列表、作业详情 submission/ # 提交、批改接口请求统一封装成模块好处是页面里不直接出现axios.get(http://localhost:8080/api/xxx)这种裸调用而是courseApi.getList(params)。将来如果后端接口路径变了只改一个文件就行。5.2 关键页面的实现逻辑登录页是最典型的一个组合式API使用场景。页面结构是表单按钮校验逻辑分为两块表单校验逻辑和登录请求逻辑。用script setup写起来非常干净script setup import { reactive, ref } from vue import { useRouter } from vue-router import { userApi } from /api/user import { useUserStore } from /stores/user const router useRouter() const userStore useUserStore() const formRef ref() const form reactive({ username: , password: , role: STUDENT }) const rules { username: [{ required: true, message: 请输入用户名, trigger: blur }], password: [{ required: true, message: 请输入密码, trigger: blur }] } async function handleLogin() { await formRef.value.validate() const res await userApi.login(form) userStore.setToken(res.data.token) userStore.setUserInfo(res.data.user) router.push(/) } /scriptElement Plus的el-form配合rules做校验validate()只返回Promise用await一收逻辑完全是线性的不用回调嵌套。这种体验在Vue2里是享受不到的。作业列表页的关键点是状态判断。一个作业对当前登录的学生来说可能是未开始待提交已提交已截止这四种状态之一。前端需要根据deadline和当前时间计算出状态然后渲染不同的按钮——未开始时按钮禁用待提交显示去提交已提交显示查看提交记录和修改提交已截止则什么都做不了。这个状态的逻辑放在一个封装好的函数里function getAssignmentStatus(assignment) { const now new Date() const deadline new Date(assignment.deadline) const hasSubmitted assignment.submission ! null if (now deadline) return expired if (hasSubmitted) return submitted return pending }算出来的状态驱动模板条件渲染页面逻辑非常清晰。我见过有些项目把这个判断写在模板里的那种模板会膨胀到没法看。批改页的表格用el-table每一行一个学生的提交记录。点击评分按钮弹出el-dialog里面是一个输入分数的el-input-number和一个写评语的el-input。提交后调接口更新submission记录再把表格里那行数据替换掉避免整张表刷新导致滚动位置丢失。6. MySQL8.0的安装、配置与常见坑6.1 本地安装与Docker方式对比MySQL8.0的安装我在不同的环境试过两种方式Windows直接装安装包Linux服务器上用Docker跑容器。Windows下MySQL8.0的安装现在已经比5.7时代友好太多了。下载社区版MSI安装包选Developer Default一路Next到设置Root密码注意选Use Legacy Authentication还是Caching SHA-2 Password。这里有个关键的坑MySQL8.0默认的认证插件是caching_sha2_password而MySQL5.x时代的客户端和驱动不兼容这个插件。如果项目里用的数据库驱动版本比较老5.1.x那种连接的时候会报Authentication plugin caching_sha2_password cannot be loaded。解决方式有两个一个是把驱动的依赖版本升到mysql-connector-java8.0.x这个我强烈推荐因为5.1.x的驱动很多新特性不支持另一个是建用户的时候指定mysql_native_password插件。实际项目里我两个方案都验证过升级驱动更干净。Docker方式我这边用的命令是docker run -d \ --name mysql8 \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORDroot123 \ -e TZAsia/Shanghai \ -v /data/mysql/conf:/etc/mysql/conf.d \ -v /data/mysql/data:/var/lib/mysql \ mysql:8.0这里有两个细节值得注意。第一个是TZAsia/Shanghai环境变量不设置的话容器时区是UTC和Java应用假设应用在宿主机上时区是东八区交互会出现8小时偏差。第二个是数据目录一定要挂载到宿主机否则容器一删数据全没。6.2 字符集与时区的双保险配置数据库创建语句里字符集和排序规则一定要显式指定CREATE DATABASE course_management DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;用utf8mb4而不是utf8是因为utf8在MySQL里根本不是真正的UTF-8它最多存3个字节一个emoji就存不进去emoji需要4个字节。作业管理系统虽然不太可能有人提交emoji但万一有学生作业里写了表情符号数据库直接报错。所以从建库第一天就用utf8mb4一劳永逸。JDBC连接串也要显式设置编码和时区jdbc:mysql://localhost:3306/course_management?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalsecharacterEncodingutf8这个参数实际映射到MySQL服务端就是utf8mb4不用纠结。serverTimezoneAsia/Shanghai必须加Java 8的驱动如果不指定时区连接的时候会抛异常提示The server time zone value ???ú±ê×??±??¼ä is unrecognized。6.3 备份与恢复的底线操作每次搞完数据库我都会顺手验证一遍备份恢复链路。MySQL8.0的官方工具是mysqldumpmysqldump -u root -p course_management backup_20250101.sql恢复mysql -u root -p course_management backup_20250101.sql这个系统里我特意写了一个定时备份的脚本每天凌晨2点跑一次mysqldump保留最近7天的备份文件。课设项目可以不做这么重但如果真的要部署上线给学生用备份是底线。7. 部署上线从本地到服务器的完整链路7.1 后端打包与前端构建后端打包很简单项目用了Maven执行mvn clean package -DskipTests产物是target/目录下的jar包。SpringBoot内置Tomcat所以不需要单独装Tomcat一个java命令就能跑java -jar course-management-server.jar --spring.profiles.activeprod我建议把不同环境的配置拆开application.yml放公共配置application-dev.yml放本地开发配置application-prod.yml放生产环境配置。产环境数据库地址、Redis地址、文件上传路径这些敏感信息就不会出现在开发环境配置里。前端构建npm run build产物在dist/目录是纯静态文件扔到Nginx的html目录下就能跑。7.2 Nginx配置反向代理与前端路由Nginx配置是部署环节的重头戏。前端是Vue3使用History模式路由后端接口统一以/api开头这两个东西要在Nginx里配合好server { listen 80; server_name your-domain.com; # 前端静态文件 root /data/www/course-management/dist; index index.html; # 后端接口反向代理 location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 上传文件的访问 location /uploads/ { alias /data/uploads/; } # 前端路由重写关键 location / { try_files $uri $uri/ /index.html; } # 上传大小限制 client_max_body_size 100m; }最关键的try_files $uri $uri/ /index.html这行——Vue3的History模式路由路径是前端Router控制的。用户直接访问/course/3服务器上并没有这个文件如果不重写到index.htmlNginx会返回404。加上这一行之后所有不存在的路径都会回退到index.html再由前端的Router接管跳转。client_max_body_size 100m同样重要Nginx默认只允许1MB的请求体如果没配上传大文件会被Nginx挡掉而且报错信息看不出来是Nginx的问题往往会误判成后端的问题。7.3 Vue3项目最常见的部署翻车点如果部署的是Vue3项目有一个翻车率极高的点值得单说History模式路由直接访问子路径返回404。正是上面说的try_files那行能解决的。还有一个点是构建完之后dist目录里如果没有.env.production文件里配的接口地址不对前端请求会打到Nginx的80端口而不是后端的8080端口。所以开发的时候我习惯把API请求路径写成相对的/api/xxx而不是http://localhost:8080/api/xxx这种绝对地址。这样开发环境走Vite代理生产环境走Nginx代理前端代码不用改构建也不需要区分环境。8. 这个系统跑完一遍我总结的几条实操经验8.1 那些不跑一遍根本发现不了的问题先聊几个典型问题都是我在实际操作中遇到的。Vite创建Vue3项目时的Node版本坑。Vite 5以上的版本要求Node 18如果机器上装的还是Node 14或16npm create vuelatest执行的时候要么报错要么创建出来的项目结构不对。我本机一开始用的Node 14折腾了半天才意识到是版本问题。后来统一用nvm管理Node版本切到Node 18 LTS一次通过。MySQL8.0的认证插件兼容问题。这个前面提到过值得再强调一遍。如果你的JDBC驱动版本是5.1.x连接MySQL8.0几乎必报错直接把依赖换成8.0.x就能解决。用Maven的话依赖坐标是com.mysql:mysql-connector-j注意8.0.31之后的版本改名了老的mysql-connector-java坐标虽然还能用但新项目建议用新坐标。文件上传后浏览器无法访问。这个问题排查了很久才发现不是后端代码的问题而是前端请求被Nginx的location规则拦了——上传的文件在/uploads/路径下但Nginx只配置了/api的反向代理没有配/uploads的alias。这提醒我每加一种新的资源类型一定要检查部署配置有没有跟上。前端时间比后端慢8小时。这个和时区配置有关。前端用new Date()拿到的是浏览器本地时间如果服务器时区是UTC数据库存的时间比本地时间晚8小时前端直接渲染出来就会显得慢8小时。解决方式还是统一时区——数据库、JDBC连接、Jackson序列化三处都指定Asia/Shanghai。8.2 给打算做类似系统的人几点建议第一先画流程图再写代码。这个系统的核心流程在上面已经梳理过了每个模块的边界、角色、状态转换都要提前想清楚。我在项目中途遇到过一个问题作业设置了截止时间但学生在截止时间后还能提交原因是后端只在前端做了时间判断后端接口没有校验。如果没有提前梳理提交作业这个流程的边界这种问题很容易漏掉。第二文件的存储路径一定要配置化。把这个配置放到application.yml里而不是写死在代码里。否则部署到Linux服务器上光改路径就够折腾的。第三权限控制一定不要只在前端做。前端隐藏按钮只是用户体验优化真正的权限控制必须后端做。这套系统的每个写操作接口都校验了当前用户的角色比如学生可以提交作业但不能给作业打分。前端隐藏按钮只是用户体验优化真正的权限控制必须后端做。第四文档要边写代码边补。这套系统带了一份完整文档包括需求说明书、数据库设计文档和部署手册。很多人觉得文档是最后补的实际经验是最后补的文档质量通常很差细节全忘光了。我的习惯是先写需求和数据库设计再写代码部署的时候把部署手册同步写好。8.3 我对这套技术栈的最终评价SpringBoot2 Vue3 MyBatis-Plus MySQL8.0这个组合在课程作业管理系统这个体量的项目里属于刚好合适的配置。SpringBoot2提供稳定的Web服务能力Vue3让前端开发效率明显提升MyBatis-Plus消灭了大部分重复的CRUD代码MySQL8.0在性能和功能上都能撑住这个规模的数据量。如果后面要扩展这套架构也有明确的演进方向。比如用户量大了可以把Redis缓存加上把作业查重、防抄袭功能集成进来提交的文件多了可以接对象存储成绩统计可以做成可视化的图表引入ECharts画分布图。底子打好了往上加东西都不难。最后说一句心里话管理系统类项目技术从来不是瓶颈难的是把业务流程想透把边界划清把每一个如果都考虑到位。这套代码跑通的那一刻我最大的成就感不是来自技术多炫而是每一个学生提交作业、每一个老师批改成绩的场景都能在系统里顺畅地走完。这就够了。
SpringBoot+Vue3课程作业管理系统设计与部署实战解析
最近帮一个朋友把一个Java Web课程作业管理系统的源码完整跑通了一遍技术栈是SpringBoot2Vue3MyBatis-PlusMySQL8.0还带配套文档。说实话这种管理系统类项目在大学课程设计、毕业设计和中小型内部工具中出镜率极高但真正能做到逻辑完整、能一次跑通、文档还像样的并不多。这篇文章我就把整个系统的设计思路、核心实现、数据库建模、环境配置和部署过程完整梳理一遍顺便把我在实操中踩过的坑、补过的逻辑一起交代清楚。不管你是准备做类似课设的学生还是工作中要快速搭一个作业收集管理后台的开发者这篇文章应该能帮你省掉不少弯路。1. 一个课程作业管理系统到底要先想清楚什么1.1 系统边界不是所有功能都要做我接手这个项目的第一件事不是看代码而是先看它的功能边界。课程作业管理系统这个名字听起来挺宽泛但真正落地的时候核心要解决的就三件事老师布置作业、学生提交作业、老师批改打分。把这三点想明白系统的主干就出来了。这套系统的角色分得很清楚三种角色管理员、教师、学生。管理员管人教师和学生账号的维护、管课程课程的创建与归档教师管课负责具体课程下的作业布置、批改、成绩管理学生管交查看作业、提交作业、查看成绩和评语。围绕这个边界功能模块就很好拆了用户模块登录、注册、角色权限控制、个人信息维护课程模块课程创建、选课、课程列表、课程成员管理作业模块作业发布、作业列表、作业详情、作业修改和删除提交模块提交作业附文件或文本、重复提交覆盖、提交截止时间控制批改模块下载学生作业、评分、写评语、成绩导出统计模块作业完成率、成绩分布、学生平均分这里有个经验值得单独拿出来说很多课设项目做失败不是功能太少而是功能太散。我在这个项目里见过那种连论坛消息通知在线聊天都塞进来的设计结果核心的作业提交反而做得稀烂。做管理系统收敛边界永远比堆功能重要。1.2 核心流程梳理一次完整的作业生命周期在动手写代码之前我把系统的核心流程画了一遍。一次完整的作业生命周期是这样的教师登录系统进入自己负责的课程教师发布一次作业设置作业标题、要求说明、截止时间、满分分值学生登录后在待提交作业列表里看到该作业点击进入详情学生提交作业可以附上文件比如PDF、Word、压缩包也可以填写文本内容系统检查是否已经过期如果过期则禁止提交学生在截止时间前可以重复提交系统自动覆盖旧记录教师在批改列表里看到已提交的学生名单在线预览或下载文件教师打分数、写评语学生端同步看到成绩和评语教师可以导出成绩单Excel用于归档这个流程看似简单但每一步都有细节。比如截止时间的判断——数据库存的是时间戳前端展示用的是格式化日期两个地方必须统一时区否则就会出现前端看着还没到点后端已经拒绝提交的诡异问题。这种坑后面我会专门说。2. 技术栈选型为什么是SpringBoot2Vue3MyBatis-PlusMySQL8.02.1 版本选择的现实考量先说结论这套技术栈在今天看来不是最新的但是最稳的。SpringBoot2经过大量项目验证生态成熟问题排查资料最多Vue3是前端主流组合式API写起来清爽配合Vite构建速度飞快MyBatis-Plus把单表CRUD的重复代码基本消灭掉了MySQL8.0在性能、窗口函数、JSON支持上都比5.7强一大截。选SpringBoot2而不是SpringBoot3一个很实际的原因JDK版本和第三方库兼容性。SpringBoot3强制要求JDK17起步而很多学校机房、老服务器上的JDK还停留在1.8。SpringBoot2.x最高支持到JDK8所以对于要部署在旧环境下的系统SpringBoot2是更安全的选择。选Vue3也不用多说。Vue2已经停止维护了新项目没必要再走回头路。Vue3的组合式API配合script setup语法代码量比Options API少了一大截而且响应式原理改成了Proxy性能比Vue2的Object.defineProperty强不少。对于表格表单弹窗这种管理系统典型页面Vue3写起来非常顺手。2.2 前后端分离的架构思路这套系统采用的是前后端完全分离的架构。后端跑在SpringBoot内置的Tomcat上提供纯粹的JSON接口端口默认8080前端是独立的Vue3工程开发环境跑在Vite的5173端口通过代理转发请求到后端生产环境前端构建成静态文件部署到Nginx由Nginx做反向代理把/api开头的请求转发到后端服务。这种架构最大的好处是前后端可以并行开发。后端的同学只需要把接口定义好路径、入参、出参前端的同学用Mock数据就可以先做页面。我自己干活的时候习惯先定好接口文档然后用Apifox之类的工具把接口Mock出来这样两边互不阻塞。前后端交互统一走JSON接口路径统一以/api开头。比如POST /api/auth/login 登录 GET /api/courses 课程列表 POST /api/courses 创建课程 POST /api/assignments 发布作业 POST /api/submissions 提交作业 GET /api/submissions/{assignmentId} 某个作业的所有提交记录统一前缀的好处是在部署阶段非常明显——Nginx只需要配一条转发规则就能把所有后端请求代理过去前端代码里不用感知后端地址Cookie的跨域问题也少很多。3. 数据库设计作业系统的地基怎么打3.1 核心表结构与关系这套系统的表设计不算复杂核心就六张表表名用途关键字段sys_user用户表三种角色统一存放id, username, password, real_name, role, emailcourse课程表id, course_name, teacher_id, description, statuscourse_student选课关系表id, course_id, student_id, create_timeassignment作业表id, course_id, title, content, deadline, full_score, create_timesubmission提交记录表id, assignment_id, student_id, content, file_url, submit_time, score, commentfile_info文件表id, original_name, stored_name, file_path, file_size, upload_timesys_user表里用一个role字段区分角色取值是ADMIN/TEACHER/STUDENT登录后后端根据角色决定能访问哪些接口。用一张表存所有用户比分成三张表简单得多权限控制也直观——一个拦截器判断角色字符串就行。submission表是整个系统的核心。一个学生对一个作业只有一条提交记录重复提交就是更新这条记录的content、file_url、submit_time字段。这个设计要注意唯一约束我在表上加了UNIQUE KEY uk_assignment_student (assignment_id, student_id)从数据库层面杜绝了一个学生对一个作业提交多条记录的脏数据。course_student表是多对多关系的中间表也是学生我的课程和教师课程学生名单两个功能的数据来源。这里要注意删除课程的时候关联的选课记录要一起删否则会出现课程已经没了但学生选课列表里还挂着的情况。我在Service层实现了这个级联删除逻辑没有依赖MySQL的外键。3.2 关键字段设计与索引注意事项几个字段的设计当时反复琢磨过这里挑重要的说一下。截止时间到底用什么类型存我用的datetime类型Java侧对应LocalDateTime。这里有个统一规范前端传参用yyyy-MM-dd HH:mm:ss格式的字符串后端用DateTimeFormat注解接收Jackson序列化的时候在application.yml里配好全局时间格式spring: jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8这个time-zone: GMT8特别重要。如果不配服务器时区是UTC的话页面上显示的时间和数据库里存的时间会差8个小时。我见过不止一个项目因为这个被老师打回重做。文件路径存什么存相对路径不存绝对路径。比如/uploads/2024/05/abc123.pdf前面加一个配置项file.upload-dir指向实际磁盘位置。这样系统迁移部署的时候只需要改配置不用改数据库。有些同学会直接把整个绝对路径D:\workspace\uploads\xxx.pdf存进去换台机器就全废了。索引设计方面我没有滥用索引但在三处加了submission表的(assignment_id, student_id)唯一索引前面说过了submission表的assignment_id普通索引用于快速查某个作业的全部提交assignment表的course_id普通索引用于按课程查作业列表索引不是越多越好写多读少的表加一堆索引反而拖慢写入速度。管理系统这种场景查询维度很固定给外键字段加索引就够了。4. 后端核心逻辑实现从登录鉴权到作业流转4.1 项目分层与MyBatis-Plus的高效用法后端项目按标准的三层结构组织Controller层接收请求、Service层业务逻辑、Mapper层数据库操作。另外加了一个config包放配置类一个common包放统一返回结果、异常处理、工具类。这里重点说MyBatis-Plus。这个框架最大的价值是把单表CRUD的样板代码消灭了。BaseMapper内置了selectById、selectList、insert、updateById这些方法不需要自己写XML。像根据教师ID查课程列表这种操作用LambdaQueryWrapper一行搞定ListCourse courses courseMapper.selectList( new LambdaQueryWrapperCourse() .eq(Course::getTeacherId, teacherId) .orderByDesc(Course::getCreateTime) );不需要写SQL不需要建XML映射文件类型安全字段名不会写错写错了编译期就报错。这是MyBatis-Plus比原生MyBatis舒服太多的地方。分页用MyBatis-Plus的分页插件配置一次就行Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); PaginationInnerInterceptor pagination new PaginationInnerInterceptor(DbType.MYSQL); pagination.setMaxLimit(100L); interceptor.addInnerInterceptor(pagination); return interceptor; } }然后业务代码里用Page对象一包查询就自动带上了LIMITPageSubmission page new Page(current, size); PageSubmission result submissionMapper.selectPage(page, new LambdaQueryWrapperSubmission() .eq(Submission::getAssignmentId, assignmentId) .orderByAsc(Submission::getSubmitTime) );maxLimit设成100是为了防止有人传一个特别大的size参数把数据库拖垮。这种防护平时不起眼但关键时刻能救命。4.2 文件上传比想象中容易踩坑的部分作业提交必然涉及文件上传。前端的input typefile加上后端的MultipartFile接收这套链路本身不难但我在这块踩过两个印象深刻的坑。第一个坑是文件大小限制。SpringBoot默认单文件最大1MB多文件最大10MB。学生交个带图的Word文档很容易就超过这个数。必须在配置里手动调大spring: servlet: multipart: max-file-size: 50MB max-request-size: 100MB第二个坑是文件名处理。学生上传的文件名可能是中文的可能包含特殊字符如果直接用原始文件名存盘轻则乱码重则路径穿越。我的处理方式是存盘文件名用UUID重新生成原始文件名单独存数据库。这样磁盘上永远不会出现乱七八糟的文件名下载的时候再把原始文件名返回给用户。String originalFilename file.getOriginalFilename(); String ext originalFilename.substring(originalFilename.lastIndexOf(.)); String storedName UUID.randomUUID() ext; // 按年/月建子目录避免单目录文件过多 String datePath LocalDate.now().format(DateTimeFormatter.ofPattern(yyyy/MM)); String dir uploadDir / datePath; File dirFile new File(dir); if (!dirFile.exists()) { dirFile.mkdirs(); } file.transferTo(new File(dir / storedName));下载的时候再通过stored_name反查original_name用URLEncoder.encode处理一下中文文件名设置Content-Disposition: attachment响应头就能正常触发浏览器下载。4.3 登录鉴权与拦截器设计这个项目没有引入Spring Security或Shiro这类重框架原因很简单——用户量不大、角色只有三种、权限控制逻辑清晰自己写个拦截器反而更可控。过度设计在这种规模的系统里就是负担。鉴权方案用的是Token方案。用户登录成功后后端生成一个UUID作为Token存到Redis里key是tokenvalue是userId过期时间2小时。前端拿到Token后存在localStorage里每次请求在请求头带Authorization: Bearer token。拦截器的核心逻辑从请求头取Token没有Token直接返回401Redis里查不到Token说明登录过期返回401查到Token把userId放Request域里放行然后还有一个角色校验的逻辑通过自定义注解实现。在需要教师权限的接口上加RequireRole(TEACHER)拦截器里判断当前登录用户的角色是否匹配。自定义注解加拦截器比在Controller里每个方法手写角色判断干净得多新加一个接口只需要加一行注解不用复制粘贴判断逻辑。这种设计在中小型管理系统这个体量下投入产出比非常高。5. Vue3前端页面的组织方式与组件化思路5.1 工程搭建与目录规划前端用的是Vite Vue3 Vue Router Pinia Element Plus这个组合。Vite创建项目的命令很简单但如果Node版本不对这里会有大坑——后面单独讲。工程到手后我先重新规划了目录结构原则是按业务模块分目录而不是按文件类型分目录。课程管理相关的页面放在views/course/下作业管理相关的放在views/assignment/下通用的表格、弹窗组件放components/接口请求统一走api/目录下的模块文件。src/ api/ # 接口请求封装 course.js assignment.js submission.js assets/ # 静态资源 components/ # 通用组件 Pagination.vue FileUpload.vue router/ index.js stores/ # Pinia 状态 user.js views/ login/ course/ # 课程列表、课程详情 assignment/ # 作业列表、作业详情 submission/ # 提交、批改接口请求统一封装成模块好处是页面里不直接出现axios.get(http://localhost:8080/api/xxx)这种裸调用而是courseApi.getList(params)。将来如果后端接口路径变了只改一个文件就行。5.2 关键页面的实现逻辑登录页是最典型的一个组合式API使用场景。页面结构是表单按钮校验逻辑分为两块表单校验逻辑和登录请求逻辑。用script setup写起来非常干净script setup import { reactive, ref } from vue import { useRouter } from vue-router import { userApi } from /api/user import { useUserStore } from /stores/user const router useRouter() const userStore useUserStore() const formRef ref() const form reactive({ username: , password: , role: STUDENT }) const rules { username: [{ required: true, message: 请输入用户名, trigger: blur }], password: [{ required: true, message: 请输入密码, trigger: blur }] } async function handleLogin() { await formRef.value.validate() const res await userApi.login(form) userStore.setToken(res.data.token) userStore.setUserInfo(res.data.user) router.push(/) } /scriptElement Plus的el-form配合rules做校验validate()只返回Promise用await一收逻辑完全是线性的不用回调嵌套。这种体验在Vue2里是享受不到的。作业列表页的关键点是状态判断。一个作业对当前登录的学生来说可能是未开始待提交已提交已截止这四种状态之一。前端需要根据deadline和当前时间计算出状态然后渲染不同的按钮——未开始时按钮禁用待提交显示去提交已提交显示查看提交记录和修改提交已截止则什么都做不了。这个状态的逻辑放在一个封装好的函数里function getAssignmentStatus(assignment) { const now new Date() const deadline new Date(assignment.deadline) const hasSubmitted assignment.submission ! null if (now deadline) return expired if (hasSubmitted) return submitted return pending }算出来的状态驱动模板条件渲染页面逻辑非常清晰。我见过有些项目把这个判断写在模板里的那种模板会膨胀到没法看。批改页的表格用el-table每一行一个学生的提交记录。点击评分按钮弹出el-dialog里面是一个输入分数的el-input-number和一个写评语的el-input。提交后调接口更新submission记录再把表格里那行数据替换掉避免整张表刷新导致滚动位置丢失。6. MySQL8.0的安装、配置与常见坑6.1 本地安装与Docker方式对比MySQL8.0的安装我在不同的环境试过两种方式Windows直接装安装包Linux服务器上用Docker跑容器。Windows下MySQL8.0的安装现在已经比5.7时代友好太多了。下载社区版MSI安装包选Developer Default一路Next到设置Root密码注意选Use Legacy Authentication还是Caching SHA-2 Password。这里有个关键的坑MySQL8.0默认的认证插件是caching_sha2_password而MySQL5.x时代的客户端和驱动不兼容这个插件。如果项目里用的数据库驱动版本比较老5.1.x那种连接的时候会报Authentication plugin caching_sha2_password cannot be loaded。解决方式有两个一个是把驱动的依赖版本升到mysql-connector-java8.0.x这个我强烈推荐因为5.1.x的驱动很多新特性不支持另一个是建用户的时候指定mysql_native_password插件。实际项目里我两个方案都验证过升级驱动更干净。Docker方式我这边用的命令是docker run -d \ --name mysql8 \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORDroot123 \ -e TZAsia/Shanghai \ -v /data/mysql/conf:/etc/mysql/conf.d \ -v /data/mysql/data:/var/lib/mysql \ mysql:8.0这里有两个细节值得注意。第一个是TZAsia/Shanghai环境变量不设置的话容器时区是UTC和Java应用假设应用在宿主机上时区是东八区交互会出现8小时偏差。第二个是数据目录一定要挂载到宿主机否则容器一删数据全没。6.2 字符集与时区的双保险配置数据库创建语句里字符集和排序规则一定要显式指定CREATE DATABASE course_management DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;用utf8mb4而不是utf8是因为utf8在MySQL里根本不是真正的UTF-8它最多存3个字节一个emoji就存不进去emoji需要4个字节。作业管理系统虽然不太可能有人提交emoji但万一有学生作业里写了表情符号数据库直接报错。所以从建库第一天就用utf8mb4一劳永逸。JDBC连接串也要显式设置编码和时区jdbc:mysql://localhost:3306/course_management?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalsecharacterEncodingutf8这个参数实际映射到MySQL服务端就是utf8mb4不用纠结。serverTimezoneAsia/Shanghai必须加Java 8的驱动如果不指定时区连接的时候会抛异常提示The server time zone value ???ú±ê×??±??¼ä is unrecognized。6.3 备份与恢复的底线操作每次搞完数据库我都会顺手验证一遍备份恢复链路。MySQL8.0的官方工具是mysqldumpmysqldump -u root -p course_management backup_20250101.sql恢复mysql -u root -p course_management backup_20250101.sql这个系统里我特意写了一个定时备份的脚本每天凌晨2点跑一次mysqldump保留最近7天的备份文件。课设项目可以不做这么重但如果真的要部署上线给学生用备份是底线。7. 部署上线从本地到服务器的完整链路7.1 后端打包与前端构建后端打包很简单项目用了Maven执行mvn clean package -DskipTests产物是target/目录下的jar包。SpringBoot内置Tomcat所以不需要单独装Tomcat一个java命令就能跑java -jar course-management-server.jar --spring.profiles.activeprod我建议把不同环境的配置拆开application.yml放公共配置application-dev.yml放本地开发配置application-prod.yml放生产环境配置。产环境数据库地址、Redis地址、文件上传路径这些敏感信息就不会出现在开发环境配置里。前端构建npm run build产物在dist/目录是纯静态文件扔到Nginx的html目录下就能跑。7.2 Nginx配置反向代理与前端路由Nginx配置是部署环节的重头戏。前端是Vue3使用History模式路由后端接口统一以/api开头这两个东西要在Nginx里配合好server { listen 80; server_name your-domain.com; # 前端静态文件 root /data/www/course-management/dist; index index.html; # 后端接口反向代理 location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 上传文件的访问 location /uploads/ { alias /data/uploads/; } # 前端路由重写关键 location / { try_files $uri $uri/ /index.html; } # 上传大小限制 client_max_body_size 100m; }最关键的try_files $uri $uri/ /index.html这行——Vue3的History模式路由路径是前端Router控制的。用户直接访问/course/3服务器上并没有这个文件如果不重写到index.htmlNginx会返回404。加上这一行之后所有不存在的路径都会回退到index.html再由前端的Router接管跳转。client_max_body_size 100m同样重要Nginx默认只允许1MB的请求体如果没配上传大文件会被Nginx挡掉而且报错信息看不出来是Nginx的问题往往会误判成后端的问题。7.3 Vue3项目最常见的部署翻车点如果部署的是Vue3项目有一个翻车率极高的点值得单说History模式路由直接访问子路径返回404。正是上面说的try_files那行能解决的。还有一个点是构建完之后dist目录里如果没有.env.production文件里配的接口地址不对前端请求会打到Nginx的80端口而不是后端的8080端口。所以开发的时候我习惯把API请求路径写成相对的/api/xxx而不是http://localhost:8080/api/xxx这种绝对地址。这样开发环境走Vite代理生产环境走Nginx代理前端代码不用改构建也不需要区分环境。8. 这个系统跑完一遍我总结的几条实操经验8.1 那些不跑一遍根本发现不了的问题先聊几个典型问题都是我在实际操作中遇到的。Vite创建Vue3项目时的Node版本坑。Vite 5以上的版本要求Node 18如果机器上装的还是Node 14或16npm create vuelatest执行的时候要么报错要么创建出来的项目结构不对。我本机一开始用的Node 14折腾了半天才意识到是版本问题。后来统一用nvm管理Node版本切到Node 18 LTS一次通过。MySQL8.0的认证插件兼容问题。这个前面提到过值得再强调一遍。如果你的JDBC驱动版本是5.1.x连接MySQL8.0几乎必报错直接把依赖换成8.0.x就能解决。用Maven的话依赖坐标是com.mysql:mysql-connector-j注意8.0.31之后的版本改名了老的mysql-connector-java坐标虽然还能用但新项目建议用新坐标。文件上传后浏览器无法访问。这个问题排查了很久才发现不是后端代码的问题而是前端请求被Nginx的location规则拦了——上传的文件在/uploads/路径下但Nginx只配置了/api的反向代理没有配/uploads的alias。这提醒我每加一种新的资源类型一定要检查部署配置有没有跟上。前端时间比后端慢8小时。这个和时区配置有关。前端用new Date()拿到的是浏览器本地时间如果服务器时区是UTC数据库存的时间比本地时间晚8小时前端直接渲染出来就会显得慢8小时。解决方式还是统一时区——数据库、JDBC连接、Jackson序列化三处都指定Asia/Shanghai。8.2 给打算做类似系统的人几点建议第一先画流程图再写代码。这个系统的核心流程在上面已经梳理过了每个模块的边界、角色、状态转换都要提前想清楚。我在项目中途遇到过一个问题作业设置了截止时间但学生在截止时间后还能提交原因是后端只在前端做了时间判断后端接口没有校验。如果没有提前梳理提交作业这个流程的边界这种问题很容易漏掉。第二文件的存储路径一定要配置化。把这个配置放到application.yml里而不是写死在代码里。否则部署到Linux服务器上光改路径就够折腾的。第三权限控制一定不要只在前端做。前端隐藏按钮只是用户体验优化真正的权限控制必须后端做。这套系统的每个写操作接口都校验了当前用户的角色比如学生可以提交作业但不能给作业打分。前端隐藏按钮只是用户体验优化真正的权限控制必须后端做。第四文档要边写代码边补。这套系统带了一份完整文档包括需求说明书、数据库设计文档和部署手册。很多人觉得文档是最后补的实际经验是最后补的文档质量通常很差细节全忘光了。我的习惯是先写需求和数据库设计再写代码部署的时候把部署手册同步写好。8.3 我对这套技术栈的最终评价SpringBoot2 Vue3 MyBatis-Plus MySQL8.0这个组合在课程作业管理系统这个体量的项目里属于刚好合适的配置。SpringBoot2提供稳定的Web服务能力Vue3让前端开发效率明显提升MyBatis-Plus消灭了大部分重复的CRUD代码MySQL8.0在性能和功能上都能撑住这个规模的数据量。如果后面要扩展这套架构也有明确的演进方向。比如用户量大了可以把Redis缓存加上把作业查重、防抄袭功能集成进来提交的文件多了可以接对象存储成绩统计可以做成可视化的图表引入ECharts画分布图。底子打好了往上加东西都不难。最后说一句心里话管理系统类项目技术从来不是瓶颈难的是把业务流程想透把边界划清把每一个如果都考虑到位。这套代码跑通的那一刻我最大的成就感不是来自技术多炫而是每一个学生提交作业、每一个老师批改成绩的场景都能在系统里顺畅地走完。这就够了。
