看到这个项目标题熟悉我的人应该知道我平时收得最多的私信就是有没有一套既能拿来做课程设计又能学到真实全栈工程化的项目这套前后端分离的大学生计算机基础网络教学系统算是比较典型的一份。技术栈非常主流SpringBoot做后端Vue做前端MyBatis负责数据库操作MySQL存储数据源码完整还带了部署教程拿来练手或者做毕业设计底子都很合适。我拿到这个项目后完整跑了一遍也把里面几个容易卡住的点翻来覆去调过。这篇文章就把这个系统从设计到部署从头拆一遍重点回答三个问题它到底实现了哪些功能这些技术组合为什么是这么选你拿到源码之后怎么最快跑起来、怎么改代码不踩坑。1. 项目整体拆解这套系统到底做了哪些事先别急着看代码得搞清楚这个网络教学系统解决的是什么问题。大学生计算机基础课程通常是公共课学生人数多作业批改量大课件和视频资源分散。传统线下教学要统一发资料、收作业、登记成绩一套流程跑下来非常费劲。这套系统的目标就是把课程管理、在线学习、作业提交、在线考试、成绩统计这些环节全部搬到线上让管理员、教师、学生三个角色各司其职。1.1 三大用户角色与功能地图系统里最核心的是三个角色。管理员负责基础数据维护比如用户管理、课程审核、系统公告、数据统计。教师角色可以创建课程、管理章节、上传课件和视频、布置作业、发布考试、批改试卷、查看学生成绩。学生角色则能够选课、浏览课程内容、下载或在线观看课件、提交作业、参加考试、查看自己的成绩和课程公告。从权限角度来说这个设计是层层递进的。管理员不参与具体教学业务教师权限集中在课程和考试学生只访问自己选过的课程。这样划分在前端路由和后端接口鉴权上都好实现每个角色看到的功能菜单不一样接口也会通过权限拦截器校验。1.2 从登录到成绩的一条完整业务流顺着一条业务流程走你就能理解这个项目为什么需要这么多张表。学生打开系统后先登录登录成功后进入个人中心选择课程。课程页面里有章节列表每个章节下面挂课件、视频、参考资料。学完内容后学生可以在作业区看到老师布置的作业提交文字答案或者上传文件。考试模块则更严格一些老师设置考试时间段和限时学生到点交卷客观题自动判分主观题由老师打分。最后所有分数汇总到成绩模块支持导出和统计。这条链路里藏着很多实际开发的细节比如学生选课需要校验课程是否已选作业提交不能重复考试交卷要防止掉线和重复提交。这些在源码里都有对应的逻辑后续我会单独展开。1.3 前后端分离在这个项目里的价值这个项目最大的特点就是前后端完全分离后端只提供JSON接口前端用Vue负责页面渲染和数据交互。好处第一是分工清晰一个人做的时候也要按接口文档来代码不会搅成一锅粥第二是后端接口可以复用将来如果要做小程序端或者移动端直接复用同一套API就行。从学习角度看前后端分离也更贴近企业的真实开发模式。项目里前端访问后端接口是通过HTTP请求加Token鉴权这就逼着你理解接口设计、跨域处理、状态管理这些知识点。如果是一体化项目很多细节会糊在一起反而不容易学到东西。2. 技术选型拆解SpringBootVueMyBatisMySQL的真实理由这套技术栈放在今天依然非常主流。不是说它最新而是它最稳、学习资料最多、遇到问题最好搜。作为一个可以用于教学管理系统的技术组合它的每一环都是冲着“快速开发、容易维护、方便部署”去的。2.1 后端选SpringBoot和MyBatis不是拍脑袋SpringBoot的核心价值是“约定大于配置”。以前用SSH或SpringMVC写项目要配一堆XML定义数据源、事务、扫描路径非常繁琐。SpringBoot把大多数配置自动完成内嵌了Tomcat一个Jar包就能启动这对部署和管理系统来说非常方便。MyBatis则是半自动ORM工具。它不像一些全自动ORM框架那样把SQL完全封装掉而是允许你手写SQL并且提供灵活的结果集映射。在这个教学系统里成绩统计、课程查询、用户多条件筛选都需要比较复杂的SQL配合MyBatis可以写很具体的查询逻辑性能控制也更直接。尤其当你需要优化某条慢查询时XML里的SQL一眼能看到问题不需要去猜测框架帮你生成的底层语句。2.2 Vue负责界面组件化让页面维护成本直线下降Vue在国内前端生态里普及率很高特别适合这类中后台管理系统。项目里用到的页面像用户列表、课程管理、答题考试、数据报表都是典型的表单加表格结构。Vue的组件化让每个业务模块都能拆成独立文件比如课程列表是一个组件课件上传是一个组件复用起来非常方便。前端项目一般还会用Element UI这类组件库表格分页、日期选择、弹窗确认这些功能不需要自己造轮子开发速度会快很多。配合Vue Router做前端路由拦截没有登录的用户直接跳转到登录页这种体验在传统多页面开发里需要写很多重复代码在Vue里只需要配置一个全局前置守卫。2.3 数据库设计核心表与关键关联数据库是整个系统的地基我看完这个项目的SQL脚本之后第一感觉是表结构设计得比较正规。主要表包括用户表、角色表、课程表、课程章节表、课件资源表、选课表、作业表、作业提交表、考试表、试题表、答题记录表和成绩表。这些表之间的关系很容易理解。用户表通过角色字段区分管理员、教师和学生但不建议把三个角色的所有字段都揉在同一张表里所以项目里通常会有教师信息表和学生信息表做补充。课程表属于教师学生通过选课表与课程建立多对多关系。作业表和考试表都挂在课程维度下而提交记录和答题记录又分别挂在作业和考试下面。从命名角度看项目里的字段也有规律比如主键一般是id外键会带上业务方的表名作为前缀例如course_id、student_id。这种约定在后面写SQL联表查询时特别友好语义清晰不需要猜字段含义。3. 环境准备与完整部署教程这部分应该是很多同学最关心的。源码拿到手之后如果环境不对第一个跑不起来就直接劝退。我先给出一套我实测能用的环境组合然后按数据库、后端、前端三步完整演示启动过程。整个操作下来大概需要十五分钟前提是你本地已经装好了基础工具。3.1 版本清单给我一套能跑通的组合能用不代表版本越新越好有时最新版本反而会有兼容问题。我推荐这样一组版本组合。组件推荐版本说明JDK1.8或11SpringBoot 2.x下最稳JDK17需谨慎Maven3.6.3及以上依赖管理IDEA自带也可用MySQL5.7或8.08.0需要注意驱动和时区配置Node.js16.xVue CLI支持较好18也可用npm8.x随Node一起安装IDEIDEA VS Code一个跑后端一个跑前端也可以只用IDEA如果你本地装的是MySQL 8.0后面连接配置里要特别注意驱动类和时区参数这部分我在3.2里会写清楚。前端别用太老的Node 12版本一些依赖会安装失败。3.2 数据库初始化导入脚本与连接配置项目源码的doc或者sql目录下一般会有一个.sql文件文件名通常像teaching_system.sql。打开MySQL命令行或者使用图形工具新建一个数据库注意字符集选择utf8mb4然后导入脚本。命令行导入的方法是执行source命令路径别写错。导入完成后重点修改后端配置文件。找到application.yml或者application.properties你需要把数据源部分改成自己的数据库地址、用户名和密码。spring: datasource: url: jdbc:mysql://localhost:3306/teaching_system?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver这里有几个容易踩的坑。MySQL 8.0的驱动类要写com.mysql.cj.jdbc.Driver5.7则是com.mysql.jdbc.Driver。url里面必须加上serverTimezoneAsia/Shanghai否则会报时区错误。还有useSSLfalse尤其是本地调试时不加这行也可能出现SSL连接警告某些情况会让启动直接失败。如果你用的是MySQL 5.7驱动类改成com.mysql.jdbc.Driver也能跑但为了统一我建议直接按8.0的方向配兼容性更好。3.3 启动后端IDEA和命令行两种方式后端项目拿到手先看pom.xml确认Maven能识别。用IDEA打开项目时选择pom.xml作为项目文件等待依赖下载完成。这一步花时间最长因为SpringBoot相关的依赖很多。如果下载慢可以在Maven的settings.xml里配置国内镜像这个问题后面我也会在常见问题里提。启动方式有两种。第一种是在IDEA里直接找到带有SpringBootApplication注解的启动类比如TeachingSystemApplication右键运行。第二种是打开终端在项目根目录执行mvn spring-boot:run启动成功后控制台会看到Tomcat started on port(s): 8080这样的日志。后端默认端口一般是8080前端项目如果要改代理地址需要和这里保持一致。此时你可以直接访问后端接口测试比如登录接口。如果返回JSON数据后端就算跑通了。如果启动失败日志里会有具体异常最常见的是数据库连接失败和端口占用这两个我在后面的排查章节专门说。3.4 启动前端npm安装与联调配置前端项目放在类似vue-web的目录下。打开前端目录里的package.json确认依赖列表。先在项目根目录执行npm install这个命令会根据package.json安装Vue、Element UI、Axios等依赖。如果安装时间太长或者卡在某个包不动大概率是网络问题可以把npm镜像切换到国内源。安装完成后查看项目根目录下的vue.config.js里面很可能配置了开发服务器代理。常见写法是把所有/api开头的请求转发到后端地址。module.exports { devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }这里的意思是前端运行在3000端口请求后端时用/api前缀代理自动把请求转发到8080。启动前端npm run serve启动成功后访问http://localhost:3000如果页面能正常跳转登录说明前后端已经联调通过。要注意的是如果你直接访问后端某个接口而不带/api前缀开发环境下往往会遇到跨域问题这就是为什么代理配置尤为重要。4. 核心模块实现细节与踩坑记录部署跑通只是第一步想真正二次开发这个项目得把几个核心模块搞明白。我挑四个最容易让新手困惑的模块说登录鉴权、文件上传、自动判分、接口跨域。4.1 登录鉴权从Token发放到路由守卫这个项目采用的鉴权方案是Token机制。后端在用户登录成功后生成一个Token返回给前端前端把Token存在Storage里每次请求时在请求头加上Authorization字段。后端接口通过拦截器解析Token判断用户身份和权限。很多同学只把登录流程走通但没有细看Token是在哪里校验的。项目里一般会有一个JwtUtil或者TokenUtil工具类负责生成和解析Token也会有一个拦截器或者过滤器所有非白名单接口都会经过它。也就是说你在前端调用用户信息接口之前后端已经根据Token确定了身份。如果Token过期或伪造后端会返回401错误前端再根据这个状态跳回登录页。前端路由守卫是另一半。Vue Router的beforeEach钩子里会判断有没有Token没有Token的去登录页有Token但访问了超出权限的页面则直接拦截。权限控制最简单的实现就是给用户分配角色code比如ROLE_ADMIN、ROLE_TEACHER、ROLE_STUDENT前端根据角色code渲染不同的菜单。这里有个很容易忽略的细节后端接口返回的用户信息里一定要带上角色字段和菜单权限列表。不带的话前端路由守卫只能判断是否登录判断不了是否能访问某个页面权限就形同虚设。4.2 课件与作业文件的上传、加载与在线预览这类教学系统离不开文件上传课件PPT、实验文档、作业附件都是文件。项目上传功能的实现一般是MultipartFile接收入参然后把文件保存到本地磁盘的某个目录同时把文件路径和原文件名写入数据库。前端用Element UI的Upload组件设置action属性为后端上传接口。文件上传最常见的坑是路径写死和目录不存在。如果用相对路径上传最终会保存到项目启动目录下打包成Jar运行时很容易出错。更稳妥的做法是在配置文件中定义上传根路径再通过静态资源映射把该路径暴露给外部访问。SpringBoot里可以这样配置file: upload-dir: ./upload/然后写一个配置类把upload目录映射为可访问的URL。例如访问http://localhost:8080/files/xxx.pdf时实际上读取的是磁盘upload目录下的文件。在线预览这块多数系统不会自己实现PDF解析和视频转码而是直接在浏览器里打开文件地址。如果是PDF和图片浏览器可以直接渲染如果是Office文档一般会建议改用网络在线预览服务或者借助一些前端库预览。对于教学类项目只要能做到直接下载和视频播放就已经覆盖大多数场景了。必须注意的是文件大小限制。SpringBoot默认上传文件大小上限为1MB如果不调整传一个课件就报错。需要在配置文件里放开spring: servlet: multipart: max-file-size: 100MB max-request-size: 100MB4.3 自动判分与成绩统计的实现思路计算机基础课程里经常有选择题、判断题这类客观题可以自动判分。项目里试题表一般会存题型、选项、正确答案和分值。学生提交答案后后端逐题比对累加得分然后插入答题记录表。主观题则交给老师人工批改老师提交分数后再汇总到总成绩。在实现成绩统计时核心是分组聚合SQL。比如统计一张试卷的平均分、及格率、各分数段人数都可以用GROUP BY加CASE WHEN来写。SELECT SUM(CASE WHEN score 60 THEN 1 ELSE 0 END) AS pass_count, SUM(CASE WHEN score 60 THEN 1 ELSE 0 END) AS fail_count FROM exam_result WHERE exam_id #{examId}这类SQL在MyBatis里写起来很方便。因为它不会像全自动ORM那样把SQL隐藏起来成绩报表需要什么样的统计你直接写对应SQL即可。免去学习复杂ORM映射的时间。考试交卷逻辑要特别注意防重复提交。前端提交按钮点击后要置灰后端也要判断该学生是否已经有本次考试记录如果存在就拒绝再次插入。很多实际项目都栽在这学生多点一下交卷按钮就多出一条成绩记录后面的统计全乱了。4.4 接口联调中的跨域与统一返回结构前后端分离后跨域是无法回避的问题。开发环境最推荐用代理方式也就是我前面说的vue.config.js配置。生产环境部署时可以把前端打包后的dist目录放到Nginx中再通过Nginx反向代理后端接口这样前端页面和后端接口在浏览器看来是同源的。后端也可以开启CORS跨域支持。在SpringBoot中写一个配置类允许特定来源访问。Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(*) .allowedHeaders(*) .allowCredentials(true); } }注意allowCredentials(true)和allowedOriginPatterns()要搭配使用直接allowedOrigins()在跨域且携带Cookie时会被浏览器拦截。不过这个项目用的是Token所以Cookie问题不严重。另外项目接口的返回结构一般是统一的JSON包装比如包含code、message、data三个字段。前端Axios会拦截所有响应根据code判断请求是否成功。这样的好处是错误状态可以统一弹提示不用每个接口都写一遍异常处理。如果你二次开发时新增接口建议也沿用这个结构否则前端拦截器可能会对不上逻辑。5. 常见问题速查我跑通这个项目过程中遇到的坑最后这部分含金量其实比前面都高。因为直接看源码跑遇到问题的时候最想做的就是查一张快速定位表。我把实际操作里高频踩到的几个问题整理出来按启动阶段和运行阶段分开说。5.1 启动前后端端口的坑问题现象可能原因解决思路后端启动报端口被占用8080被其他程序占用换端口或找到占用进程关闭前端启动报3000端口被占用旧的前端服务没有停释放端口或改vue.config.js的port登录接口一直请求失败后端启动失败或代理路径不对先确认后端是否有接口能通再看代理前缀端口占用最简单粗暴的办法是Windows下执行netstat -ano | findstr 8080查到进程PID然后在任务管理器里结束进程。但更推荐直接修改后端配置里的server.port避免影响其他项目。前端端口也可以灵活改比如改成3001。5.2 数据库连接和编码的坑数据库相关的报错其实非常多。最常见的提示是Access denied for user这基本是用户名或密码错误仔细检查application.yml。第二个常见问题是Unknown database说明数据库名对不上或者没有导入SQL脚本。第三个常见是中国时区相关错误解决方式就是url里加serverTimezoneAsia/Shanghai。还有一个是中文乱码。导入SQL或前端提交中文数据后页面显示乱码。出现这种问题要检查三处数据库字符集是否utf8mb4、后端连接url是否带characterEncodingutf8、前端请求头Content-Type是否为application/json;charsetUTF-8。只要这三处一致中文基本不会乱。5.3 MyBatis与文件上传的坑MyBatis最常见的报错是Invalid bound statement (not found)这个十有八九是Mapper接口和XML文件没有建立关联。检查两件事第一XML文件在resources目录下的路径是否与Mapper接口的全限定名一致第二application.yml里的mapper-locations是否写成classpath*:mapper/*.xml。很多项目把这个配置漏掉启动时接口也能正常加载但真正调用时就报错了。文件上传失败的另一个隐蔽原因是目录没有写入权限特别是部署到云服务器时。如果是Windows环境建议先把上传目录放到一个明确的绝对路径如果是Linux检查目录权限必要时执行chmod给目录授权。否则日志里报FileNotFoundException你会以为是代码问题其实只是操作系统权限不够。还有一个关于Lombok的坑如果你在IDEA里运行代码里用了Slf4j或者Data注解却提示找不到log或getter方法大概率是没装Lombok插件或者没有开启Annotation Processing。在IDEA的Settings里搜索Annotation Processing并勾选Enable再重启就解决了。我个人的体会是这个项目最大的价值不在于功能多少而是它把一个在线教育系统从数据库设计到前后端联调的完整链路都展示出来了。你跑通它之后Next自然要去改一改比如给文件上传模块加一个断点续传给考试模块加一个倒计时自动交卷或者把成绩统计用图表可视化。现在这套代码就像一张完整的骨架图你要做的就是往里面填自己的血肉。希望这篇部署拆解能帮你顺利跑通或者说至少少走几个我走过的弯路。 
长河君 · 2026/10/20 17:25:12 · 阅读 1.2k 基于SpringBoot+Vue的大学生计算机基础网络教学系统设计与部署全解析
看到这个项目标题熟悉我的人应该知道我平时收得最多的私信就是有没有一套既能拿来做课程设计又能学到真实全栈工程化的项目这套前后端分离的大学生计算机基础网络教学系统算是比较典型的一份。技术栈非常主流SpringBoot做后端Vue做前端MyBatis负责数据库操作MySQL存储数据源码完整还带了部署教程拿来练手或者做毕业设计底子都很合适。我拿到这个项目后完整跑了一遍也把里面几个容易卡住的点翻来覆去调过。这篇文章就把这个系统从设计到部署从头拆一遍重点回答三个问题它到底实现了哪些功能这些技术组合为什么是这么选你拿到源码之后怎么最快跑起来、怎么改代码不踩坑。1. 项目整体拆解这套系统到底做了哪些事先别急着看代码得搞清楚这个网络教学系统解决的是什么问题。大学生计算机基础课程通常是公共课学生人数多作业批改量大课件和视频资源分散。传统线下教学要统一发资料、收作业、登记成绩一套流程跑下来非常费劲。这套系统的目标就是把课程管理、在线学习、作业提交、在线考试、成绩统计这些环节全部搬到线上让管理员、教师、学生三个角色各司其职。1.1 三大用户角色与功能地图系统里最核心的是三个角色。管理员负责基础数据维护比如用户管理、课程审核、系统公告、数据统计。教师角色可以创建课程、管理章节、上传课件和视频、布置作业、发布考试、批改试卷、查看学生成绩。学生角色则能够选课、浏览课程内容、下载或在线观看课件、提交作业、参加考试、查看自己的成绩和课程公告。从权限角度来说这个设计是层层递进的。管理员不参与具体教学业务教师权限集中在课程和考试学生只访问自己选过的课程。这样划分在前端路由和后端接口鉴权上都好实现每个角色看到的功能菜单不一样接口也会通过权限拦截器校验。1.2 从登录到成绩的一条完整业务流顺着一条业务流程走你就能理解这个项目为什么需要这么多张表。学生打开系统后先登录登录成功后进入个人中心选择课程。课程页面里有章节列表每个章节下面挂课件、视频、参考资料。学完内容后学生可以在作业区看到老师布置的作业提交文字答案或者上传文件。考试模块则更严格一些老师设置考试时间段和限时学生到点交卷客观题自动判分主观题由老师打分。最后所有分数汇总到成绩模块支持导出和统计。这条链路里藏着很多实际开发的细节比如学生选课需要校验课程是否已选作业提交不能重复考试交卷要防止掉线和重复提交。这些在源码里都有对应的逻辑后续我会单独展开。1.3 前后端分离在这个项目里的价值这个项目最大的特点就是前后端完全分离后端只提供JSON接口前端用Vue负责页面渲染和数据交互。好处第一是分工清晰一个人做的时候也要按接口文档来代码不会搅成一锅粥第二是后端接口可以复用将来如果要做小程序端或者移动端直接复用同一套API就行。从学习角度看前后端分离也更贴近企业的真实开发模式。项目里前端访问后端接口是通过HTTP请求加Token鉴权这就逼着你理解接口设计、跨域处理、状态管理这些知识点。如果是一体化项目很多细节会糊在一起反而不容易学到东西。2. 技术选型拆解SpringBootVueMyBatisMySQL的真实理由这套技术栈放在今天依然非常主流。不是说它最新而是它最稳、学习资料最多、遇到问题最好搜。作为一个可以用于教学管理系统的技术组合它的每一环都是冲着“快速开发、容易维护、方便部署”去的。2.1 后端选SpringBoot和MyBatis不是拍脑袋SpringBoot的核心价值是“约定大于配置”。以前用SSH或SpringMVC写项目要配一堆XML定义数据源、事务、扫描路径非常繁琐。SpringBoot把大多数配置自动完成内嵌了Tomcat一个Jar包就能启动这对部署和管理系统来说非常方便。MyBatis则是半自动ORM工具。它不像一些全自动ORM框架那样把SQL完全封装掉而是允许你手写SQL并且提供灵活的结果集映射。在这个教学系统里成绩统计、课程查询、用户多条件筛选都需要比较复杂的SQL配合MyBatis可以写很具体的查询逻辑性能控制也更直接。尤其当你需要优化某条慢查询时XML里的SQL一眼能看到问题不需要去猜测框架帮你生成的底层语句。2.2 Vue负责界面组件化让页面维护成本直线下降Vue在国内前端生态里普及率很高特别适合这类中后台管理系统。项目里用到的页面像用户列表、课程管理、答题考试、数据报表都是典型的表单加表格结构。Vue的组件化让每个业务模块都能拆成独立文件比如课程列表是一个组件课件上传是一个组件复用起来非常方便。前端项目一般还会用Element UI这类组件库表格分页、日期选择、弹窗确认这些功能不需要自己造轮子开发速度会快很多。配合Vue Router做前端路由拦截没有登录的用户直接跳转到登录页这种体验在传统多页面开发里需要写很多重复代码在Vue里只需要配置一个全局前置守卫。2.3 数据库设计核心表与关键关联数据库是整个系统的地基我看完这个项目的SQL脚本之后第一感觉是表结构设计得比较正规。主要表包括用户表、角色表、课程表、课程章节表、课件资源表、选课表、作业表、作业提交表、考试表、试题表、答题记录表和成绩表。这些表之间的关系很容易理解。用户表通过角色字段区分管理员、教师和学生但不建议把三个角色的所有字段都揉在同一张表里所以项目里通常会有教师信息表和学生信息表做补充。课程表属于教师学生通过选课表与课程建立多对多关系。作业表和考试表都挂在课程维度下而提交记录和答题记录又分别挂在作业和考试下面。从命名角度看项目里的字段也有规律比如主键一般是id外键会带上业务方的表名作为前缀例如course_id、student_id。这种约定在后面写SQL联表查询时特别友好语义清晰不需要猜字段含义。3. 环境准备与完整部署教程这部分应该是很多同学最关心的。源码拿到手之后如果环境不对第一个跑不起来就直接劝退。我先给出一套我实测能用的环境组合然后按数据库、后端、前端三步完整演示启动过程。整个操作下来大概需要十五分钟前提是你本地已经装好了基础工具。3.1 版本清单给我一套能跑通的组合能用不代表版本越新越好有时最新版本反而会有兼容问题。我推荐这样一组版本组合。组件推荐版本说明JDK1.8或11SpringBoot 2.x下最稳JDK17需谨慎Maven3.6.3及以上依赖管理IDEA自带也可用MySQL5.7或8.08.0需要注意驱动和时区配置Node.js16.xVue CLI支持较好18也可用npm8.x随Node一起安装IDEIDEA VS Code一个跑后端一个跑前端也可以只用IDEA如果你本地装的是MySQL 8.0后面连接配置里要特别注意驱动类和时区参数这部分我在3.2里会写清楚。前端别用太老的Node 12版本一些依赖会安装失败。3.2 数据库初始化导入脚本与连接配置项目源码的doc或者sql目录下一般会有一个.sql文件文件名通常像teaching_system.sql。打开MySQL命令行或者使用图形工具新建一个数据库注意字符集选择utf8mb4然后导入脚本。命令行导入的方法是执行source命令路径别写错。导入完成后重点修改后端配置文件。找到application.yml或者application.properties你需要把数据源部分改成自己的数据库地址、用户名和密码。spring: datasource: url: jdbc:mysql://localhost:3306/teaching_system?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver这里有几个容易踩的坑。MySQL 8.0的驱动类要写com.mysql.cj.jdbc.Driver5.7则是com.mysql.jdbc.Driver。url里面必须加上serverTimezoneAsia/Shanghai否则会报时区错误。还有useSSLfalse尤其是本地调试时不加这行也可能出现SSL连接警告某些情况会让启动直接失败。如果你用的是MySQL 5.7驱动类改成com.mysql.jdbc.Driver也能跑但为了统一我建议直接按8.0的方向配兼容性更好。3.3 启动后端IDEA和命令行两种方式后端项目拿到手先看pom.xml确认Maven能识别。用IDEA打开项目时选择pom.xml作为项目文件等待依赖下载完成。这一步花时间最长因为SpringBoot相关的依赖很多。如果下载慢可以在Maven的settings.xml里配置国内镜像这个问题后面我也会在常见问题里提。启动方式有两种。第一种是在IDEA里直接找到带有SpringBootApplication注解的启动类比如TeachingSystemApplication右键运行。第二种是打开终端在项目根目录执行mvn spring-boot:run启动成功后控制台会看到Tomcat started on port(s): 8080这样的日志。后端默认端口一般是8080前端项目如果要改代理地址需要和这里保持一致。此时你可以直接访问后端接口测试比如登录接口。如果返回JSON数据后端就算跑通了。如果启动失败日志里会有具体异常最常见的是数据库连接失败和端口占用这两个我在后面的排查章节专门说。3.4 启动前端npm安装与联调配置前端项目放在类似vue-web的目录下。打开前端目录里的package.json确认依赖列表。先在项目根目录执行npm install这个命令会根据package.json安装Vue、Element UI、Axios等依赖。如果安装时间太长或者卡在某个包不动大概率是网络问题可以把npm镜像切换到国内源。安装完成后查看项目根目录下的vue.config.js里面很可能配置了开发服务器代理。常见写法是把所有/api开头的请求转发到后端地址。module.exports { devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }这里的意思是前端运行在3000端口请求后端时用/api前缀代理自动把请求转发到8080。启动前端npm run serve启动成功后访问http://localhost:3000如果页面能正常跳转登录说明前后端已经联调通过。要注意的是如果你直接访问后端某个接口而不带/api前缀开发环境下往往会遇到跨域问题这就是为什么代理配置尤为重要。4. 核心模块实现细节与踩坑记录部署跑通只是第一步想真正二次开发这个项目得把几个核心模块搞明白。我挑四个最容易让新手困惑的模块说登录鉴权、文件上传、自动判分、接口跨域。4.1 登录鉴权从Token发放到路由守卫这个项目采用的鉴权方案是Token机制。后端在用户登录成功后生成一个Token返回给前端前端把Token存在Storage里每次请求时在请求头加上Authorization字段。后端接口通过拦截器解析Token判断用户身份和权限。很多同学只把登录流程走通但没有细看Token是在哪里校验的。项目里一般会有一个JwtUtil或者TokenUtil工具类负责生成和解析Token也会有一个拦截器或者过滤器所有非白名单接口都会经过它。也就是说你在前端调用用户信息接口之前后端已经根据Token确定了身份。如果Token过期或伪造后端会返回401错误前端再根据这个状态跳回登录页。前端路由守卫是另一半。Vue Router的beforeEach钩子里会判断有没有Token没有Token的去登录页有Token但访问了超出权限的页面则直接拦截。权限控制最简单的实现就是给用户分配角色code比如ROLE_ADMIN、ROLE_TEACHER、ROLE_STUDENT前端根据角色code渲染不同的菜单。这里有个很容易忽略的细节后端接口返回的用户信息里一定要带上角色字段和菜单权限列表。不带的话前端路由守卫只能判断是否登录判断不了是否能访问某个页面权限就形同虚设。4.2 课件与作业文件的上传、加载与在线预览这类教学系统离不开文件上传课件PPT、实验文档、作业附件都是文件。项目上传功能的实现一般是MultipartFile接收入参然后把文件保存到本地磁盘的某个目录同时把文件路径和原文件名写入数据库。前端用Element UI的Upload组件设置action属性为后端上传接口。文件上传最常见的坑是路径写死和目录不存在。如果用相对路径上传最终会保存到项目启动目录下打包成Jar运行时很容易出错。更稳妥的做法是在配置文件中定义上传根路径再通过静态资源映射把该路径暴露给外部访问。SpringBoot里可以这样配置file: upload-dir: ./upload/然后写一个配置类把upload目录映射为可访问的URL。例如访问http://localhost:8080/files/xxx.pdf时实际上读取的是磁盘upload目录下的文件。在线预览这块多数系统不会自己实现PDF解析和视频转码而是直接在浏览器里打开文件地址。如果是PDF和图片浏览器可以直接渲染如果是Office文档一般会建议改用网络在线预览服务或者借助一些前端库预览。对于教学类项目只要能做到直接下载和视频播放就已经覆盖大多数场景了。必须注意的是文件大小限制。SpringBoot默认上传文件大小上限为1MB如果不调整传一个课件就报错。需要在配置文件里放开spring: servlet: multipart: max-file-size: 100MB max-request-size: 100MB4.3 自动判分与成绩统计的实现思路计算机基础课程里经常有选择题、判断题这类客观题可以自动判分。项目里试题表一般会存题型、选项、正确答案和分值。学生提交答案后后端逐题比对累加得分然后插入答题记录表。主观题则交给老师人工批改老师提交分数后再汇总到总成绩。在实现成绩统计时核心是分组聚合SQL。比如统计一张试卷的平均分、及格率、各分数段人数都可以用GROUP BY加CASE WHEN来写。SELECT SUM(CASE WHEN score 60 THEN 1 ELSE 0 END) AS pass_count, SUM(CASE WHEN score 60 THEN 1 ELSE 0 END) AS fail_count FROM exam_result WHERE exam_id #{examId}这类SQL在MyBatis里写起来很方便。因为它不会像全自动ORM那样把SQL隐藏起来成绩报表需要什么样的统计你直接写对应SQL即可。免去学习复杂ORM映射的时间。考试交卷逻辑要特别注意防重复提交。前端提交按钮点击后要置灰后端也要判断该学生是否已经有本次考试记录如果存在就拒绝再次插入。很多实际项目都栽在这学生多点一下交卷按钮就多出一条成绩记录后面的统计全乱了。4.4 接口联调中的跨域与统一返回结构前后端分离后跨域是无法回避的问题。开发环境最推荐用代理方式也就是我前面说的vue.config.js配置。生产环境部署时可以把前端打包后的dist目录放到Nginx中再通过Nginx反向代理后端接口这样前端页面和后端接口在浏览器看来是同源的。后端也可以开启CORS跨域支持。在SpringBoot中写一个配置类允许特定来源访问。Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(*) .allowedHeaders(*) .allowCredentials(true); } }注意allowCredentials(true)和allowedOriginPatterns()要搭配使用直接allowedOrigins()在跨域且携带Cookie时会被浏览器拦截。不过这个项目用的是Token所以Cookie问题不严重。另外项目接口的返回结构一般是统一的JSON包装比如包含code、message、data三个字段。前端Axios会拦截所有响应根据code判断请求是否成功。这样的好处是错误状态可以统一弹提示不用每个接口都写一遍异常处理。如果你二次开发时新增接口建议也沿用这个结构否则前端拦截器可能会对不上逻辑。5. 常见问题速查我跑通这个项目过程中遇到的坑最后这部分含金量其实比前面都高。因为直接看源码跑遇到问题的时候最想做的就是查一张快速定位表。我把实际操作里高频踩到的几个问题整理出来按启动阶段和运行阶段分开说。5.1 启动前后端端口的坑问题现象可能原因解决思路后端启动报端口被占用8080被其他程序占用换端口或找到占用进程关闭前端启动报3000端口被占用旧的前端服务没有停释放端口或改vue.config.js的port登录接口一直请求失败后端启动失败或代理路径不对先确认后端是否有接口能通再看代理前缀端口占用最简单粗暴的办法是Windows下执行netstat -ano | findstr 8080查到进程PID然后在任务管理器里结束进程。但更推荐直接修改后端配置里的server.port避免影响其他项目。前端端口也可以灵活改比如改成3001。5.2 数据库连接和编码的坑数据库相关的报错其实非常多。最常见的提示是Access denied for user这基本是用户名或密码错误仔细检查application.yml。第二个常见问题是Unknown database说明数据库名对不上或者没有导入SQL脚本。第三个常见是中国时区相关错误解决方式就是url里加serverTimezoneAsia/Shanghai。还有一个是中文乱码。导入SQL或前端提交中文数据后页面显示乱码。出现这种问题要检查三处数据库字符集是否utf8mb4、后端连接url是否带characterEncodingutf8、前端请求头Content-Type是否为application/json;charsetUTF-8。只要这三处一致中文基本不会乱。5.3 MyBatis与文件上传的坑MyBatis最常见的报错是Invalid bound statement (not found)这个十有八九是Mapper接口和XML文件没有建立关联。检查两件事第一XML文件在resources目录下的路径是否与Mapper接口的全限定名一致第二application.yml里的mapper-locations是否写成classpath*:mapper/*.xml。很多项目把这个配置漏掉启动时接口也能正常加载但真正调用时就报错了。文件上传失败的另一个隐蔽原因是目录没有写入权限特别是部署到云服务器时。如果是Windows环境建议先把上传目录放到一个明确的绝对路径如果是Linux检查目录权限必要时执行chmod给目录授权。否则日志里报FileNotFoundException你会以为是代码问题其实只是操作系统权限不够。还有一个关于Lombok的坑如果你在IDEA里运行代码里用了Slf4j或者Data注解却提示找不到log或getter方法大概率是没装Lombok插件或者没有开启Annotation Processing。在IDEA的Settings里搜索Annotation Processing并勾选Enable再重启就解决了。我个人的体会是这个项目最大的价值不在于功能多少而是它把一个在线教育系统从数据库设计到前后端联调的完整链路都展示出来了。你跑通它之后Next自然要去改一改比如给文件上传模块加一个断点续传给考试模块加一个倒计时自动交卷或者把成绩统计用图表可视化。现在这套代码就像一张完整的骨架图你要做的就是往里面填自己的血肉。希望这篇部署拆解能帮你顺利跑通或者说至少少走几个我走过的弯路。