★ FEATURED ARTICLE 1. 脱坑指南这套系统的设计与技术选型思路前后端分离的“大学生计算机基础网络教学系统”名字听起来就是一套很典型的课程作业型项目但真拿到手你会发现它远不止“能跑起来”那么简单。整个系统围绕SpringBoot Vue MyBatis MySQL展开核心场景是教师端上传课件、布置作业、批改评分学生端在线看课件、提交作业、查成绩管理员端管用户、管课程、管公告。这基本覆盖了绝大多数高校计算机基础课的教学管理需求也是企业里真实项目中“管理后台 业务前台”最常见的形态。先说结论这套系统适合三类人参考——正在做毕业设计或课程设计的学生、想快速入门前后端分离开发模式的初学者、以及需要在内部快速搭建一套教学管理Demo的团队。我为什么会推荐这种组合SpringBoot 负责后端接口和业务逻辑Vue 负责页面交互和用户体验MyBatis 负责数据库操作映射MySQL 存数据中间通过 RESTful API 通信。这个组合的好处是每一层都足够简单、足够经典出错时你能快速定位问题在哪个环节。尤其是 MyBatis它比 JPA 更直白SQL 写死在 XML 或注解里排查慢查询、复杂联表的时候一眼就能看懂不像 Hibernate 那样需要先搞懂一堆自动生成的 SQL 在干什么。整套系统的数据流向大概是这样的Vue 页面发 axios 请求到 SpringBoot 的 ControllerController 调 Service 层Service 调 MapperMapper 通过 MyBatis 执行 SQL 操作 MySQL 数据库查询结果再一层层返回前端渲染。这个链路不复杂但每一步的细节都可能成为坑后面我会逐个拆解。2. 项目整体设计与功能拆解2.1 角色权限划分系统分为三种角色权限边界一定要在前后端同时控制不能只依赖前端按钮隐藏这是最基本的底线。学生端登录后可查看已加入课程的课件列表、在线预览教师上传的PDF/PPT、提交作业支持文本和文件、查看作业批改结果和课程公告、修改个人信息。教师端登录后可创建课程、维护课程基本信息、上传/删除课件、发布作业、设定作业截止时间、在线批改学生提交的作业、给学生打分并填写评语。管理员端负责用户管理新增教师/学生账号、重置密码、封禁账号、课程管理查看所有课程、强制下架违规内容、公告管理发布全校级别的通知、数据统计查看选课人数、作业提交率的简单汇总。注意权限校验不只是“显示或不显示按钮”的问题。后端接口必须用拦截器或注解校验角色防止学生直接调用教师的接口。实际开发中很多系统只做了前端路由守卫后端接口裸奔这是安全设计的大忌。2.2 页面结构规划页面设计遵循“管理端 用户端”双端分离的思想但Vue项目只有一个通过路由和登录状态来区分跳转登录页账号密码登录 角色选择其实是为了简化登录逻辑实际生产环境应由后端根据账号自动识别角色。学生首页课程列表、课件列表、作业列表、公告栏。教师工作台我的课程、课件管理、作业管理、批改列表。管理后台用户管理表格、课程审核表格、公告编辑器。这里有一点实践心得不要把前端路由设计成“一套界面适配所有角色”虽然技术上可行但开发和调试效率极低。我用 Vue Router 的 meta 字段记录路由需要的角色在路由守卫里判断当前用户的角色权限不匹配直接重定向到 403 页面。这样每个角色的页面代码独立存在后续扩展功能时互不干扰。2.3 核心业务流程学生选课 → 教师发布课件 → 学生学习课件 → 教师发布作业 → 学生提交作业 → 教师批改打分 → 学生查看成绩。这个流程听起来平淡无奇但落地时你要考虑几个关键点选课与课程加入机制是学生自由选课还是教师指定学生系统里我采用“学生通过课程邀请码加入课程”的方式既能控制人数又不需要做复杂的选课审批流程。作业提交的覆盖机制允许学生在截止时间前重复提交后一次覆盖前一次数据库里保留最新一条记录即可。大批量文件存储需要提前规划路径和命名规则。批改流程的状态流转作业状态分为“未提交”“已提交待批改”“已批改”“已逾期”。每一种状态对应前端不同的按钮和后端不同的接口策略。3. 核心技术拆解与数据库设计3.1 SpringBoot 后端分层后端我按经典的四层结构组织Controller接口层、Service业务层、Mapper数据访问层、Entity实体类。很多人觉得分层麻烦但一旦项目超过十几个接口不分层基本没法维护到处是互相调用的逻辑改一个需求要动三个文件。Controller 层只做参数接收和结果封装不写业务逻辑用 RestController 注解暴露接口。Service 层处理业务逻辑比如判断作业是否过期、校验课程权限、组装返回数据用 Service 标注事务控制 Transactional 加在需要保证原子性的方法上。Mapper 层是接口配合 XML 文件写 SQLMyBatis 的标志性用法。Entity 类对应数据库表结构字段命名和表字段保持一致的映射关系用驼峰命名开启 map-underscore-to-camel-case 配置。在 pom.xml 里你需要引入的核心依赖包括spring-boot-starter-web、mybatis-spring-boot-starter、mysql-connector-java、lombok。此外还需要一个 JWT 库来做登录令牌实际项目中我会选择 jjwt 或 hutool 自带的 JWT 工具避免重复造轮子。3.2 Vue 前端组织方式Vue 侧我使用 Vue 2 Element UI 的组合。虽然 Vue 3 已经很成熟但 Element UI 对 Vue 2 的支持最完善很多模板代码可以直接用遇到问题时网上的案例也多。项目脚手架用 Vue CLI 生成后续打包发布比较顺滑。前端目录按视图和组件拆分src/views页面级组件比如 Login.vue、TeacherCourse.vue、AdminUser.vue。src/router路由配置文件集中管理所有页面映射和权限守卫。src/api用 axios 封装的后端接口调用模块按业务模块拆文件比如 course.js、homework.js、user.js。src/utils工具类包含请求拦截器、token 存取、日期格式化等。请求拦截器是很多初学者容易忽略的点。axios 的 request 拦截器统一在 headers 里添加 Authorization 字段值为登录后存到 localStorage 的 tokenresponse 拦截器统一处理 401 状态码当 token 失效时自动跳回登录页。这样业务代码里每次调用接口只需要关心数据本身不用重复写 token 逻辑。3.3 数据库表结构数据库是我认为整个项目中设计价值最高的一块直接决定后续开发是否痛苦。系统核心表一共 8 张user用户表字段包含 id, username, password, real_name, role, status, create_time。密码存储不能用明文要加密我选用 BCrypt。course课程表字段包含 id, name, description, teacher_id, invite_code, create_time。course_student选课关系表记录学生与课程的关联字段包含 id, course_id, student_id, join_time。course_file课件表字段包含 id, course_id, file_name, file_url, upload_time。homework作业表字段包含 id, course_id, title, content, deadline, create_time。homework_submission作业提交表字段包含 id, homework_id, student_id, submit_content, file_url, submit_time, status, score, comment, review_time。notice公告表字段包含 id, title, content, publisher_id, publish_time。admin_log操作日志表记录管理员关键操作字段包含 id, admin_id, operation, detail, operate_time。提示课件表的 file_url 字段不要在数据库里拼接完整访问路径只存相对路径比如 “/files/20240112/xxx.pdf”。这样系统换域名、换端口时不需要改数据库部署到新环境也省去很多麻烦。这是我踩过坑之后的总结之前直接存了 “http://localhost:8080/files/...” 这种绝对地址后来换服务器全部失效。3.4 作业提交的文件存储策略作业要支持文件上传这里不引入分布式文件系统本地磁盘存储就足够。在上传接口中我会按“年月日/随机文件名”的目录结构保存文件避免文件名冲突。比如用户上传一个 “report.docx”保存后实际路径是 “/root/teaching-system/upload/20250112/8702374821.docx”数据库里存这个相对路径。读取文件时通过一个专门的 FileController 映射静态资源路径前端拿到的完整 URL 是后端拼接好的。上传时还要对文件类型做白名单校验只允许 doc、docx、pdf、zip、rar、jpg、png并且做大小限制我这里是单文件 50MB超过直接返回错误信息。4. 核心功能模块的实现细节4.1 基于 JWT 的登录认证登录认证我用了比较经典的 JWT 方案。后端在用户登录成功后根据用户 ID、角色、过期时间生成一个签名后的 token 返回给前端。前端拿 token 存到 localStorage每次请求带上后端通过过滤器校验 token 的合法性和有效期。JWT 的签名密钥要单独配置在 application.yml 里不要硬编码在代码中并且过期时间统一设置为 24 小时。值得注意的是JWT 是无状态的服务端不能主动让某个 token 失效所以对于“修改密码后强制下线”这种需求只靠 JWT 不够你可以在用户表加一个 token_version 字段生成 JWT 时把版本号放进去密码修改后版本号加一旧 token 在过滤器里校验版本号匹配直接被拒绝。这个细节我强烈推荐加因为很多课程设计里的“修改密码”功能就是个摆设改完密码旧 token 依然有效安全上是硬伤。4.2 课程与选课逻辑教师创建课程时后端自动生成六位邀请码这个邀请码用随机字母和数字组合排除易混淆的 0/O 和 1/I。学生加入课程时输入邀请码后端先查邀请码对应的课程是否存在再判断该学生是否已经加入避免重复关联。选课关系表的存在让课程-学生成为多对多关系。学生的课程列表通过联表查询获取SQL 大概是SELECT c.* FROM course c INNER JOIN course_student cs ON c.id cs.course_id WHERE cs.student_id #{studentId}这里要注意如果用 MyBatis 的嵌套结果映射来做多对多XML 配置会比较绕。实际项目里我倾向于直接用联表查询返回 DTO 而不是实体类减少不必要的层级嵌套代码反而更直观。4.3 作业发布与提交教师发布作业时需要设置截止时间。这里有一个常见业务陷阱服务器时间和客户端时间不一致。前后端分离的项目里后端应统一处理时间字段前端提交的 deadline 最好是时间戳或者统一格式的字符串后端解析后转成服务器本地时间不要依赖前端传来的时间字段做直接存储。学生提交作业时后端先检查当前时间是否超过截止时间。超过的话即使接受到请求也要返回“已逾期无法提交”并且状态置为逾期。这个校验必须放在后端不能只靠前端按钮禁用。前端任何人都可以绕过按钮直接发请求后端才是最后的防线。4.4 在线批改实现教师打开待批改列表看到学生的提交内容输入分数和评语。批改接口是典型的更新操作按提交记录 ID 更新 score、comment、status、review_time 四个字段。前端提交后刷新列表已批改的记录变成可查看状态学生端就能看到成绩了。批改过程中要注意的一个问题是学生在教师批改后是否允许重新提交正常情况下不允许但考虑实际教学场景教师批改完发现学生有明显抄袭或文件损坏应允许教师主动“打回重交”把提交状态重置为“待提交”。这个功能看起来小但在真实使用中非常必要我第一次做系统时没设计这个功能后来教师只能让学生找管理员改数据库非常痛苦。5. 完整源码结构分析与本地部署5.1 后端代码结构一览后端项目标准的 Maven 结构src/main/java/com/example/teachingsystem/ ├── controller/ # 控制层接收前端请求 │ ├── AuthController.java │ ├── CourseController.java │ ├── HomeworkController.java │ ├── FileController.java │ └── AdminController.java ├── service/ # 业务层处理具体逻辑 │ ├── UserService.java │ ├── CourseService.java │ ├── HomeworkService.java │ ├── FileStorageService.java │ └── NoticeService.java ├── mapper/ # MyBatis 数据访问层 │ ├── UserMapper.java │ ├── CourseMapper.java │ ├── HomeworkMapper.java │ └── NoticeMapper.java ├── entity/ # 实体类对应数据库表 │ ├── User.java │ ├── Course.java │ ├── Homework.java │ └── CourseFile.java ├── dto/ # 数据传输对象接口出入参 ├── config/ # 配置类包含 JWT 拦截器、跨域配置 ├── util/ # 工具类JWT 工具、文件上传工具 └── TeachingSystemApplication.java # 启动入口5.2 前端代码结构一览Vue 项目结构src/ ├── api/ # 接口封装 │ ├── user.js │ ├── course.js │ └── homework.js ├── assets/ # 静态资源 ├── components/ # 公共组件 │ ├── FileUpload.vue │ └── Pagination.vue ├── router/ │ └── index.js # 路由配置与守卫 ├── utils/ │ └── request.js # axios 封装 ├── views/ │ ├── Login.vue │ ├── student/ │ │ ├── StudentHome.vue │ │ ├── CourseDetail.vue │ │ └── HomeworkDetail.vue │ ├── teacher/ │ │ ├── TeacherDashboard.vue │ │ ├── CourseManage.vue │ │ ├── HomeworkPublish.vue │ │ └── HomeworkReview.vue │ └── admin/ │ ├── AdminDashboard.vue │ └── UserManage.vue └── App.vue5.3 本地环境准备你需要准备以下工具JDK 1.8 或以上版本推荐 1.8 或 11兼容性最稳。Maven 3.6 以上用于管理后端依赖和打包。Node.js 14 以上和 npmVue 项目构建依赖。MySQL 5.7 或 8.0建议 8.0字符集统一 utf8mb4。开发工具推荐 IntelliJ IDEA 和 VSCode分别打开后端和前端项目。注意JDK 版本不要盲目选最新。好几个版本的 JDK 刚发布时会有兼容性问题而 SpringBoot 2.x 对高版本 JDK 的支持是滞后的。如果项目里 SpringBoot 用的是 2.5 左右建议直接配 JDK 8省去一堆莫名的编译错误。5.4 详细启动步骤第一步初始化数据库。在 MySQL 中创建一个名为 teaching_system 的数据库然后导入项目附带的 sql 文件。如果你是从零写的项目用 Navicat 或命令行执行建表语句即可注意导入时选择正确的字符集防止中文乱码。第二步修改后端配置。打开 application.yml将数据库连接串、用户名、密码改成自己的本地配置spring: datasource: url: jdbc:mysql://localhost:3306/teaching_system?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你自己的密码 servlet: multipart: max-file-size: 50MB max-request-size: 100MB mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true file: upload-dir: /your/path/to/upload第三步启动后端。在项目根目录执行mvn spring-boot:run或者在 IDEA 里直接运行带有 main 方法的启动类。看到 “Started TeachingSystemApplication” 的日志就证明启动成功此时后端服务跑在 8080 端口。第四步启动前端。在 vue 项目根目录打开终端先npm install安装依赖这一步会花几分钟取决于网络状况。安装成功后执行npm run serve默认端口 8081在浏览器访问 localhost:8081。第五步配置代理解决跨域。本地开发时后端是 8080前端是 8081存在跨域。在 vue.config.js 里配置 devServer 代理把/api开头的请求转发到 8080module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }这样前端代码里的请求路径写/api/login这样的相对路径即可不用拼接完整的后端地址。后端接口统一加上/api前缀也便于在拦截器里统一处理。5.5 打包部署到服务器开发完成之后后端通过mvn clean package -DskipTests打 jar 包在服务器上用java -jar teaching-system.jar启动。前端通过npm run build生成 dist 目录用 Nginx 或 Apache 托管静态文件。部署时我建议用 Nginx 监听 80 端口将静态文件路径指向 dist将/api路径反向代理到后端的 8080 端口。Nginx 配置核心片段server { listen 80; server_name your-domain.com; root /opt/teaching-system/dist; index index.html; location / { try_files $uri $uri/ /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; } location /files { proxy_pass http://127.0.0.1:8080; } }这里有两个关键点一是try_files配置必须保留否则 Vue Router 在 history 模式下刷新页面会返回 404二是文件访问路径/files要单独反向代理否则课件图片和作业文件都加载不出来。6. 常见问题与排查技巧实录6.1 前端请求后端报错 404大多数情况是代理配置没生效或者前端请求路径和后端接口路径不一致。先打开浏览器开发者工具看 Network 面板确认请求的完整 URL 是否正常。如果是 localhost:8081/api/login 这样的相对路径并通过代理转发那问题大概率在后端。如果请求直接打到 8080先检查后端是否启动、接口路径是否匹配。6.2 数据库导入中文乱码MySQL 字符集问题非常经典。建库时用utf8mb4连接串里一定要加characterEncodingutf8如果还乱码检查表字段的字符集是否单独被设置为 latin1。在 Navicat 里查看表设计可以直接看到顺手改成 utf8mb4 就行。还有一点如果 SQL 文件本身是 GBK 编码导入的用命令行导入时指定mysql --default-character-setutf8mb4 -u root -p teaching_system init.sql6.3 MyBatis 报 BindingException最常见原因是 Mapper 接口在启动时没有扫描到。在启动类上增加MapperScan(com.example.teachingsystem.mapper)或者在每个 Mapper 接口上加Mapper注解二选一即可。另一个原因是 XML 文件里的 namespace 和接口全限定名不一致这个错误很隐蔽编译时不报错启动时才报错。6.4 刷新前端路由出现 404这是因为后端没有配置 fallback。如果是 Nginx 部署前面已经提到用try_files解决。如果是在开发模式下出现要确保 Vue Router 使用的是 hash 模式而不是 history 模式history 需要后端支持。我自己的项目一般在开发环境用 hash 模式保底生产环境用 history 模式配合 Nginx两者配合比较舒服。6.5 上传文件成功但访问报 404前端显示上传成功数据库里也有记录但访问文件 URL 时 404。大概率是后端没有把上传目录映射为静态资源。我习惯在配置类里注册 ResourceHandlerConfiguration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/files/**) .addResourceLocations(file: uploadDir /); } }这里的 uploadDir 要与 application.yml 里的 file.upload-dir 保持一致路径末尾要带斜杠。6.6 打包后发现 Date 少 8 小时这个典型问题是数据库连接串里的 serverTimezone 没用对。如果你在亚洲时区连接串要设置serverTimezoneAsia/Shanghai。同时 MySQL 驱动版本不同表现会有差异8.x 驱动建议显式指定时区。6.7 前端调用接口报跨域错误生产环境如果前后端不同源需要后端配置 CORS或者 Nginx 做反向代理推荐后者。本地开发用 devServer 代理是标准方案不需要额外配置 CORS。注意代理的 target 一定不能写错写成localhost:8080没问题但要确保 8080 端口真的是后端服务在监听而不是其他程序占用了端口。7. 从项目中学到的东西与扩展方向我前前后后看过不少类似的课程设计说实话这类的教学系统是最典型的“麻雀虽小五脏俱全”的项目。做完这套系统你对 SpringBoot 的自动装配、MyBatis 的 SQL 映射、Vue 的组件通信和路由守卫、MySQL 的表设计都会有比较完整的认知尤其是前后端分离模式下如何通过 JWT 保持会话、如何优雅地处理文件上传这些都是企业开发中的基本功。如果我想给它加功能优先级最高的是分页搜索的优化。现在列表接口大多用 PageHelper 或者手写 limit 实现简单够用。但要应对几百门课程、几万条作业提交记录需要给列表查询增加缓存比如用 Redis 缓存热点课程信息。第二个值得扩展的是数据统计可视化比如课程选课人数趋势、作业提交率柱状图用 ECharts 在前端画图后端配合提供聚合接口整个系统的完整度会提升一个台阶。第三个是发送通知作业发布或批改完成后通过邮件或微信公众号模板消息推送给学生这在实际教学环境中非常提升使用体验。最后再分享一个我实践中的小技巧开发这类系统时数据库备份一定要做勤快一些尤其是改表结构之前。我习惯每天开发结束前把整个 teaching_system 数据库导出一份 sql 文件放在专门的目录里标注日期。一旦当天改错了数据或者把表结构搞乱了直接导入备份回滚比手动去改数据高效太多。这套习惯在课程设计阶段可能显得多余但到了生产环境维护阶段那就是救命稻草。
阅读完成 · 觉得有帮助？
