直接上手聊吧。这个项目标题很直白Java基于Spring BootVue的中小学生辅导平台。如果你正在毕业设计、个人项目或者公司内部想搭一套在线教育系统大概率搜到过类似的关键词。今天我不打算讲那些“从零到一搭建”的套话而是想从实际开发的角度把这个项目掰开揉碎为什么选这套技术栈、核心模块怎么设计、前后端联调时有哪些坑、部署上线又该怎么处理。我尽量按真实项目推进的顺序来写里面的经验都是实际操作过、真正踩过坑才总结出来的希望对你有参考价值。1. 项目整体设计与技术选型思路1.1 为什么是Spring Boot Vue先回答一个新人最爱问的问题做这类系统Java那边框架不少前端也不止Vue一家为什么偏偏是Spring Boot加Vue的组合从后端角度说Spring Boot现在是Java生态里做Web应用事实上的标准。它的价值不在于某个单一功能多强而在于把整个开发流程里的琐碎工作压缩到了最低限度。传统SSHSpring MVC Hibernate时代一个接口要写一堆XML配置、要管理各种Bean的生命周期、要手动处理事务边界光是把骨架跑起来就够折腾半天。Spring Boot通过自动配置和约定大于配置把大量样板工作干掉了开发效率完全不在一个量级。对于中小学生辅导平台这类业务逻辑并不算极端复杂、但需要快速迭代上线的系统Spring Boot几乎是首选。前端用Vue核心原因是它的上手曲线和组件化开发模式非常适合这个项目。我见过不少团队用jQuery或者传统模板引擎拼页面前期快后期一改需求就头疼。Vue的双向数据绑定、组件复用和生态成熟度让一个前端页面从“能看”变成“好用”的成本低很多。另外Vue搭配vue-router做前端路由、vuex或Pinia做状态管理这套组合拳在前后端分离场景下非常成熟社区资料和可参考的代码也特别多遇到问题基本搜得到现成方案。1.2 整体架构设计这个项目的整体架构我倾向于采用经典的前后端分离模式整个系统分为三类端学生端Web页面面向中小学生提供课程浏览、视频播放、在线作业、考试练习等功能。教师端Web页面面向辅导教师提供课程管理、作业批改、学生管理等功能。管理后台Web页面面向平台运营人员负责用户管理、订单管理、权限配置和系统监控。后端统一通过RESTful API对外提供服务按业务模块拆分成多个Controller和Service用户模块、课程模块、订单模块、作业模块、统计模块等各司其职。技术栈细节可以这样定层级选型说明前端框架Vue 2/3 Element UIElement UI做后台管理类界面效率极高状态管理Vuex / Pinia存放用户信息和全局状态路由Vue Router前端路由配合权限控制HTTP客户端Axios统一封装请求和拦截器后端框架Spring Boot 2.x/3.x按JDK版本选择2.x更稳妥ORMMyBatis-Plus减少SQL编写提高开发效率数据库MySQL 8.x数据持久化缓存Redis验证码、热点数据、Token场景鉴权JWT Spring Security无状态认证方案我见过不少人纠结要不要直接用Spring Cloud那套微服务对这个项目来说完全没必要。单机部署加一个合理分层的单体应用性能和可维护性都够用搞微服务纯属给自己加戏。2. 核心功能模块设计与实现2.1 用户登录、注册与权限控制权限控制是这类系统第一个要过硬的模块因为涉及学生、教师、管理员三种角色而且部分功能比如课程购买、作业批改必须是特定角色专用。这个项目的权限体系我建议用JWT Spring Security实现。JWT的好处是服务端不需要保存会话状态登录接口签发一个Token前端存下来后续请求塞到Header里后端每次校验签名和过期时间即可。对于前后端分离的架构来说这种方式天然契合不需要额外考虑Session跨域和集群会话同步的问题。具体的登录认证流程是这样的用户提交用户名和密码后端接口接收后调用AuthenticationManager进行认证。认证通过后根据用户ID、角色、过期时间生成JWT返回给前端。前端拿到Token存储到localStorage或Pinia中。每次请求时Axios拦截器在请求头加上Authorization: Bearer token。Spring Security通过过滤器解析Token把用户信息和角色放入SecurityContext。这里有一个新手容易踩的坑Filter的执行顺序和SecurityContext的传递。自定义的JWT过滤器必须继承OncePerRequestFilter并注册到Spring Security过滤器链中靠前的位置否则你解析出来的用户信息还没有进入SecurityContext后面的PreAuthorize注解权限校验根本不起作用。还有一点Token过期处理不要只返回401前端要统一拦截401响应跳转到登录页否则用户会看到一个白屏。角色权限控制上我的做法是用PreAuthorize(hasRole(TEACHER))注解直接标注在接口上。比如删除课程的接口只有管理员和教师可调用学生提交作业的接口只有学生角色可调用。这种方式代码侵入性最低比每行代码手动判断角色要清晰得多。2.2 课程管理与视频点播课程模块是整个系统的业务核心也是最容易做出差异化功能的地方。课程数据模型至少要包含以下实体课程分类学科、年级课程信息标题、封面、简介、价格、状态章节信息属于哪个课程、章节名称、排序课时信息属于哪个章节、视频地址、时长、是否免费试看前后端交互的典型流程是学生在前端课程列表页按学科和年级筛选课程点击进入课程详情页然后查看课时列表。免费课时可以直接播放视频付费课时需要先购买才能解锁。这里有一个体验细节课时是否可播放必须由后端鉴权来控制不能只靠前端隐藏按钮。因为前端页面改一下代码就能绕过限制接口没有权限拦截等于大门敞开。我在接口设计时会对每个课时做一次校验查询当前用户是否已购买该课程未购买返回403并提示前端弹出购买引导。视频点播方式上项目实践中最顺手的方案是使用M3U8HLS格式的视频流。这种格式天然支持切片和自适应码率而且对Vue前端播放器来说兼容性很好。播放器选择上我推荐video.js或者vue-video-player插件两者都能直接播放m3u8地址。后端只需要在课时表中存储视频的m3u8地址前端播放器组件拿到地址后初始化即可。// 前端视频播放器组件核心代码 import videojs from video.js; import video.js/dist/video-js.css; export default { props: { videoUrl: { type: String, required: true } }, mounted() { this.player videojs(this.$refs.videoPlayer, { sources: [{ src: this.videoUrl, type: application/x-mpegURL }], controls: true, autoplay: false, preload: auto }); }, beforeDestroy() { if (this.player) { this.player.dispose(); } } }注意m3u8地址如果涉及跨域必须确保视频资源服务器配置了正确的CORS响应头否则播放器会报跨域错误这是排查视频无法播放时第一个要查的方向。2.3 作业提交与在线批改作业模块是连接学生和教师的桥梁。学生需要查看作业、提交答案文本、图片、附件教师需要查看提交记录、批改打分、填写评语。这个模块的业务流程不算复杂但设计时要注意两点一是作业和课程的关系。作业必须归属于某个课程或课时这样教师发布作业时才能按课程维度管理学生也能在课程详情页看到所有待完成作业。二是提交状态的流转。作业提交不是简单的insert同一个学生可能多次提交、修改答案。我的设计是作业表保存作业基本信息作业记录表保存每个学生的提交状态和最后提交内容批改完成后再把分数和评语更新回去。前端展示时根据状态字段显示“未提交”、“待批改”、“已批改”三种状态。文件上传场景推荐在前端使用文件上传组件后端用Spring Boot的MultipartFile接收存储到本地磁盘或者OSS数据库存文件URL。这里提醒一句文件上传一定要做类型和大小限制否则恶意大文件能直接把服务器磁盘打满安全漏洞和运维事故往往就是这么来的。限制方式可以在application.yml里配spring.servlet.multipart.max-file-size10MB同时在后端代码里校验文件后缀名和Content-Type。3. 前后端分离开发中的实操重点3.1 开发环境的搭建与配置环境搭建是上手的第一步也是很多新手卡壳的地方。我建议按下面这个顺序推进安装JDK 8/11/17建议11或17注意与Spring Boot版本匹配。安装Maven并配置阿里云镜像否则依赖下载慢到怀疑人生。安装Node.js 16以上版本npm源也换成国内镜像。安装MySQL 8.x和Redis本地开发必备。用Spring Initializr生成后端项目骨架用Vue CLI或Vite创建前端项目。创建好前后端项目后先把最简单的健康检查接口跑通。后端写一个/api/hello返回一段JSON前端写一个页面通过Axios请求后端接口并展示结果。这一步打通后整个前后端分离的开发链路就正常了剩下的就是不断往这个链路上加功能。这里有个小细节值得注意前后端分离开发时CORS跨域配置必不可少。本地前端跑在8080端口后端跑在8081端口前端直接请求后端接口必然跨域。解决方案有两种后端配置CrossOrigin或全局CORS配置或者前端配置Vite/Webpack的代理转发。我在开发环境用的是代理转发生产环境用Nginx反向代理这样后端接口地址不需要硬编码到前端代码里部署时更灵活。3.2 后端核心代码实现后端代码的包结构我推荐采用经典的分层结构com.example.xxx ├── common通用类Result、异常处理、常量 ├── config配置类Security、Redis、CORS ├── controller接口层 ├── service业务层 ├── mapper数据访问层 ├── entity数据实体 └── dto数据传输对象一个典型的课程分页查询接口Controller Service Mapper三层实现代码核心部分如下// Controller层 RestController RequestMapping(/api/course) public class CourseController { Autowired private CourseService courseService; GetMapping(/page) public ResultPageResultCourseVO getCoursePage( RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size, RequestParam(required false) String keyword) { return Result.success(courseService.queryCoursePage(page, size, keyword)); } }注意几点返回统一结果类Result结构包含code、message、data三个字段前端Axios根据code判断业务是否成功。所有业务异常都有全局异常处理器兜底不把异常堆栈直接抛给前端。Service层加上Transactional声明事务比如订单创建和库存扣减必须保证原子性。3.3 前端核心页面和路由实现前端页面的组织可以按功能模块分目录src ├── api接口请求封装 ├── router路由配置 ├── store状态管理 ├── views页面组件 ├── components公共组件 └── utils工具函数路由配置的核心是配合登录状态做访问控制。Vue Router的beforeEach路由守卫会在每次跳转前检查用户Token和路由的meta信息未登录则跳转到登录页已登录但角色不匹配则跳转到404页面。// 前端路由守卫核心代码 router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.matched.some(record record.meta.requiresAuth)) { if (!token) { next(/login); return; } const role store.state.user.role; if (to.meta.roles !to.meta.roles.includes(role)) { next(/404); return; } } next(); });前端页面中课程列表页、课程详情页、视频播放页是最核心的三个页面。课程列表页用卡片式布局展示课程信息筛选栏按学科和年级过滤课程详情页展示课程图、教师简介、课时列表视频播放页内嵌播放器组件视频地址通过接口动态获取。这里有一个经验状态管理不要什么东西都塞进Pinia或Vuex。只放全局必需的数据比如用户信息、购物车数量、通知数量等其余页面内部数据用组件的ref/reactive来管理就行。否则store会变得无比臃肿维护成本反而上升。3.4 前后端联调中的接口规范前后端联调是项目开发中最容易出现摩擦的环节核心问题是接口定义不清晰或者频繁变动。我建议在项目一开始就约定一套接口规范前后端同时遵守接口路径统一以/api开头按照资源名命名比如/api/course/list、/api/order/create。请求方式严格对应语义GET查询、POST新增、PUT修改、DELETE删除。认证信息统一放入请求头Authorization参数使用Content-Type: application/json。返回格式统一使用Result结构错误信息放在message字段中。分页参数统一为page和size返回结构统一为{ total, records }。用Mock数据联调也是一个非常实用的技巧。后端接口没写完时前端可以用Mock.js模拟返回数据来开发页面后端接口完成后只需把Mock数据源切换为真实API。这样可以保证前后端并行开发不互相阻塞联调周期能缩短不少。4. 常见问题与排查技巧实录4.1 CORS跨域和前端请求失败跨域是前后端分离项目里出现频率最高的问题。现象是前端控制台报错Access to XMLHttpRequest has been blocked by CORS policy。排查方式按顺序来检查后端是否配置了CORS。最简单的方式是在配置类中添加CorsFilter或者在Controller类上加CrossOrigin。检查前端代理配置。如果使用Vite在vite.config.js中配置server.proxy把/api开头的请求都转发到后端地址。特别需要注意的是**预检请求OPTIONS**必须放行不能拦截。否则跨域请求会一直报错但怎么也找不到原因。// 后端CORS全局配置 Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedMethod(*); config.addAllowedHeader(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }4.2 Lombok编译失败和JDK版本匹配项目里经常碰到一个报错java: You arent using a compiler supported by lombok, so lombok will not work。这个报错通常出现在JDK版本和Lombok版本不匹配的情况下。Spring Boot 2.7对应JDK 8~17都行但Lombok版本过低时对JDK 17的编译支持不好。解决办法是按项目JDK版本升级Lombok依赖到对应版本同时检查IDE的注解处理器是否开启。在IntelliJ IDEA中一定要勾选Settings - Build - Compiler - Annotation Processors - Enable annotation processing否则Data、Slf4j这些注解统统不生效代码会一片飘红。另外还有一个高频编译报错java: 警告: 源发行版 1.8 需要目标发行版 1.8。这通常是项目JDK版本和IDE编译级别不一致造成的。检查三处pom.xml中Java.version属性、IDEA的Project Structure里的SDK设置、Maven的JDK配置三处保持一致就可以解决。4.3 Token失效和会话过期处理JWT方案如果没有处理好过期场景用户的体验会非常糟糕。Token过期后用户点击任何操作都有可能会直接跳回登录页甚至什么都不提示。我推荐的做法是Axios响应拦截器统一处理401状态码弹出提示“登录已过期请重新登录”跳转登录页时带上当前路由路径登录成功后直接跳回用户之前访问的页面。这样用户操作中断感最弱。// Axios响应拦截器 service.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { localStorage.removeItem(token); Vue.prototype.$message.error(登录已过期请重新登录); router.push({ path: /login, query: { redirect: router.currentRoute.fullPath } }); } return Promise.reject(error); } );如果是那种需要长时间保持登录的场景比如学生看视频看了一个小时再提交作业只依赖JWT过期时间会显得不够灵活。实践中的方案是前端在用户操作时刷新Token或者后端在用户每次访问时重新签发Token并返回前端更新本地存储。可以主动续期但是要注意安全边界必须校验用户的原始凭据是否仍然有效。4.4 视频播放卡顿和加载失败视频模块跑起来后最常见的现象就是“视频加载不出来”或“无法播放”。排查顺序如下用播放器直接播放m3u8地址确认URL本身是否可访问。检查视频资源服务器是否配置了CORS头m3u8和ts文件跨域都会导致播放失败。检查后端接口是否进行了权限限制视频播放地址接口如果返回了401或403播放器自然初始化失败。检查网络环境或CDN配置大文件传输过程中断或限流也会导致加载失败。我踩过的一个坑是开发环境视频文件直接放在后端工程目录下通过/static/videos/xxx.m3u8访问本地调试没问题部署到服务器后变成了Nginx托管结果Nginx的client_max_body_size和代理缓存配置没调好播放时频繁卡顿。后来直接改为上传到单独的CDN或对象存储视频和大文件跟业务服务彻底分离问题才消停。5. 部署上线与性能优化经验5.1 部署方案与流程项目开发完成后上线部署是考察技术能力的关键一环。我推荐的部署拓扑是前端静态文件由Nginx托管后端Java应用以JAR包方式运行MySQL和Redis使用独立服务或Docker容器。后端打包需要注意Maven配置。执行mvn clean package -DskipTests生成可执行JAR包然后通过nohup java -jar xxx.jar --spring.profiles.activeprod app.log 21 方式启动。如果是云服务器内存有限启动参数需要设置-Xms256m -Xmx512m避免默认内存分配吃满系统资源。Nginx配置核心是前端页面托管和API反向代理server { listen 80; server_name your-domain.com; root /var/www/html; index index.html; location /api/ { proxy_pass http://127.0.0.1:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 前端路由history模式需要 location / { try_files $uri $uri/ /index.html; } }前端项目构建时执行npm run build生成dist目录把dist里的文件上传到Nginx的/var/www/html目录。这里有一个特别容易漏的配置前端路由使用history模式时Nginx必须配置try_files回退到index.html否则用户刷新页面就会404。5.2 数据库和性能优化业务跑起来后最容易出问题的是数据库。随着课程、订单、作业数据的增长SQL查询慢、锁冲突等问题逐渐浮现。我的建议是在开发阶段就做好下面这几件事所有核心表的查询字段都要加索引订单表按用户ID建索引课程表按分类ID建索引。列表接口使用分页查询禁止全表查询后内存分页。热点数据如课程分类、课时信息等可以放入Redis缓存缓存时间设置合理值即可。前端的图片、视频等静态资源尽量走CDN不要把所有文件都堆到应用服务器上。分页性能这块MyBatis-Plus的selectPage方法底层生成的是LIMIT offset, size当offset非常大时比如用户翻到第1000页会有性能问题。解决方案是改为游标分页或者限制最大翻页数。一般辅导平台的课程量不会大到需要深度分页但提前加一个最大页数限制总是稳妥的。5.3 线上安全与备份策略作为面向未成年人的辅导平台数据安全必须格外重视。这部分我的经验是用户密码绝对不能明文存储至少使用BCryptPasswordEncoder加密。后端接口必须做参数校验防止SQL注入、XSS注入。文件上传接口要做类型校验防止恶意文件上传。数据库每天定时备份备份额保存至少7天。日志要定期清理同时保留关键操作日志比如订单创建、课程上下架方便问题排查。很多校招生或者个人开发者会忽略日志的重要性但线上问题排查时日志几乎是唯一的线索。建议项目一开始就使用Slf4j统一日志框架关键业务操作全部打上日志日志级别和切分策略在生产环境配置好。这样出了问题才能迅速定位而不是对着屏幕干瞪眼。6. 一点个人心得这个项目做了几轮下来我最大的体会是技术选型解决的是“能不能做出来”的问题而设计决策解决的是“能不能做好、能不能维护”的问题。Spring Boot Vue这套组合之所以在中小型系统里如此流行不单单是因为它们各自技术先进更重要的是它们把复杂的东西封装得足够“简单可用”让开发者可以把精力集中在业务本身。如果你正在用这个项目练手或做毕业设计我的建议是先把核心链路走通登录注册、课程列表、课程详情、视频播放、订单支付模拟即可、作业提交批改。这几条链路全部跑通后再考虑加Redis缓存、性能优化、统计数据报表等锦上添花的功能。功能没有上限但核心稳定才是第一位的。另外再多说一句部署上线一定要提前演练不要等到答辩或演示前才去配服务器。我在实际踩坑过程中发现本地跑得飞起不代表服务器上能跑起来环境变量、端口占用、防火墙、内存大小、JDK版本任何一个环节掉链子都会让你在关键时刻手忙脚乱。留出充裕的时间把部署流程走顺线上的问题你才会心里有底。