每到四五月份计算机专业的毕设战场就准时开打。我陆陆续续看过不少同学的选题和代码用SpringBoot做后端、Vue.js做前端的项目占了相当大的比例而“儿童教育网站”这种题目特别适合用来落地一套前后端分离架构。它不是单纯的管理系统也不是纯粹的电商站而是把内容管理、在线学习、成长记录、互动激励这些典型场景揉在了一起业务上足够有层次技术上也能把SpringBoot和Vue.js的能力完整展示出来。这篇文章就围绕这个题目从设计思路、数据建模、核心功能实现到部署答疑完整拆一遍给正在做类似选题或者准备开题的同学一个能直接参考的路线。1. 项目整体设计与思路拆解儿童教育网站选型背后的思考1.1 为什么这个题目值得做先说选题判断。计算机毕设最常见的问题是“功能太像课程作业”要么是单表的增删改查要么是毫无业务逻辑的展示页。儿童教育网站这个方向天然避开了这个坑因为它的核心是一个“学、练、评、激励”的闭环家长给孩子选课程孩子观看学习内容并完成互动练习系统记录学习轨迹并生成成长报告管理员负责课程内容和资源的发布管理。一套闭环走下来你至少要处理四种角色的数据流涉及课程、课节、学习记录、答题记录、成长档案等多张业务表这就让项目的复杂度自然上去了。另一个值得做的原因是领域边界很清晰。儿童教育不需要你懂复杂的算法也不涉及支付、物流、高并发这类让人头疼的东西核心就是内容目录管理、账号体系、学习行为记录、简单的闯关答题和成长报告展示。对于一个本科毕业设计来说这个复杂度刚刚好写出来工作量饱满答辩时有东西可讲实现起来又不会把自己逼到绝路。同时这个题目有明确的展示价值。Vue.js负责的前端可以做得很漂亮动画、卡片、色彩搭配都能体现审美和前端功底SpringBoot负责的后端则能把接口设计、权限控制、上传下载、定时任务这些硬技能全部铺开。答辩的时候评委问“你做了什么”你可以拿出一个家长能给孩子选课、孩子能看课做题、后台能管理内容、首页有轮播图、个人中心有成长曲线的完整项目而不是一个打不开面子的半成品。1.2 前后端分离架构到底拆了什么很多同学对“前后端分离”这个词只是听过不知道拆的到底是什么。我用一个餐厅的例子来说清楚前端是店面顾客看到菜单、点菜、等餐讲究的是体验和展示后端是后厨负责处理订单、备菜、出餐讲究的是逻辑和稳定。店面和后厨之间靠一张“菜单”沟通这张菜单就是前后端约定的接口文档。店面什么时候换菜单后厨怎么改良菜品彼此不需要互相等对方改完再动工只要菜单不变大家各干各的。放到这个项目里前端工程负责页面渲染、路由跳转、状态管理、用户交互通过axios调用后端提供的RESTful接口后端工程负责业务逻辑、权限校验、数据读写返回统一的JSON结构。两边并行开发只要接口约定好前端可以用Mock数据先画页面后端可以用Postman先测接口最后联调时把前端请求地址指向后端服务就行。为什么不推荐用传统的JSP或Thymeleaf模板方案不是因为技术落后而是因为模板方案把页面渲染和数据获取耦合在了一起业务一旦多一点代码就非常容易纠缠。更关键的是JSP方案做不出今天前端工程化的体验你很难引入组件库、状态管理、路由守卫这些现代前端工具链。而答辩时老师大概率会问“你的系统架构是什么”你回一句“前后端分离前端Vue、后端SpringBoot”比你解释一长串JSP页面跳转要有说服力得多。1.3 技术栈与版本选型技术选型是这个项目最需要提前拍板的事因为后面所有代码都建立在这套组合之上。我整理了一份适合毕设的清单并附上了选型理由分层推荐选型理由说明后端框架SpringBoot 2.7.x生态文档多兼容JDK8排错容易大部分网络教程基于此版本持久层MyBatis-Plus单表CRUD基本不用写SQL内置分页插件适合快速开发数据库MySQL 5.7 / 8.0成熟稳定学生熟悉云数据库和本地都容易部署权限认证JWT 拦截器无状态、简单前后端分离场景下的主流方案前端框架Vue3 Vite组合式API写起来清爽Vite启动快比Vue2更有现代感UI组件库Element Plus后台管理界面配套现成表单、表格、弹窗都有前端HTTP库Axios支持请求拦截和响应拦截统一处理token和错误码图表展示ECharts成长曲线、学习统计、课程分布都用得上展示效果好注意SpringBoot版本不要盲目追新。SpringBoot 3.x要求JDK17以上而且把javax包换成了jakarta很多老教程和依赖在3.x下会有兼容问题。如果基础不是特别扎实老老实实用2.7.x最稳妥。Vue2和Vue3的选择也一样如果之前学过Vue2可以直接用Vue2加Element UI如果从零开始就直接Vue3加Element Plus别纠结。权限方案上不推荐在毕设里硬上Spring Security或者Shiro这两个东西配置项多对新手不友好而且在这个项目里属于典型的“杀鸡用牛刀”。用JWT加一个拦截器完全够用代码量少逻辑也好解释。2. 核心细节解析从需求到表结构的落地2.1 角色模型与功能矩阵儿童教育网站不是只给“儿童”用的这是个常见的理解偏差。整个系统实际服务的是三类人管理员、家长、儿童。管理员在后台管理课程、课节、轮播图、用户状态家长负责注册账号、绑定孩子、给孩子选课、查看学习报告儿童本身不单独走注册流程而是挂在家长账号下面通过切换身份进入学习端。这里有一个关键设计登录态的主体是家长儿童是家长账号下的子实体。也就是说你先是一个家长用户然后可以添加多个孩子档案每个孩子有自己的课程列表和学习记录。这种“用户-孩子”的一对多关系是这个项目区别于普通视频网站的核心。如果做成儿童自己注册反而会带来手机号验证、找回密码、账号安全等一堆麻烦而且也不符合真实场景毕竟一个三四岁的孩子是不可能自己输密码登录的。功能矩阵大概是这样划分的管理员端课程分类管理、上下架课程、上传课节视频、配置轮播图、查看用户列表、统计数据。家长端注册登录、维护孩子档案、浏览课程、加入学习计划、查看每个孩子的学习进度和答题报告。儿童端共享家长登录态切换孩子身份观看课节视频、参与课后小练习、获得积分和徽章、查看自己的学习小天地。2.2 数据库表设计思路表设计直接影响后面写代码的心情。我建议围绕“内容”和“学习”两条主线拆表内容线管课程学习线管记录。核心表至少有下面这些user用户表id、username、password、nickname、phone、role、status、create_time。role字段用字符串区分ADMIN和PARENT不单独建角色表毕设足够用。child孩子表id、user_id、name、birthday、gender、avatar。通过user_id关联家长。course_category课程分类表id、name、sort、status。course课程表id、category_id、title、cover_url、brief_intro、suitable_age、status、create_time。suitable_age建议用“3-6岁”这种区间字符串方便前端直接展示不用做复杂的关联表。course_section课节表id、course_id、title、video_url、duration、sort、free_flag。free_flag用来标记试看课节这是学习类网站的常见逻辑。study_record学习记录表id、child_id、course_id、section_id、watch_duration、watch_status、update_time。核心业务表记录每个孩子每节课的观看情况成长报表全靠它。question练习题表id、course_id、section_id、question_content、option_a、option_b、option_c、option_d、correct_answer、analysis。answer_record答题记录表id、child_id、question_id、user_answer、is_correct、answer_time。growth_diary成长档案表id、child_id、study_days、total_courses、total_sections、total_score、level、update_time。这个表可以定时任务每天更新也可以在学习行为发生时实时累计推荐后者实时性强且不用引入定时任务逻辑反而简单。banner轮播图表id、image_url、link_url、sort、status。设计的时候有个原则能用逻辑外键解决的就不要用物理外键。很多同学喜欢在MySQL里写死FOREIGN KEY但实际开发中物理外键影响插入性能还会带来耦合。表关联关系在代码里通过MyBatis-Plus的查询和JOIN去维护完全够用。字段命名建议统一用下划线风格Java实体里用驼峰配合MyBatis-Plus的map-underscore-to-camel-case配置能省掉大量字段映射的重复工作。2.3 接口规范与权限控制接口设计直接影响联调效率。建议统一前缀/api/v1/portal/**是家长和儿童端接口/api/v1/admin/**是管理端接口。这样写拦截器的时候一个正则就能区分哪些接口需要校验管理员权限哪些接口只要求登录。统一返回体非常关键。我先定义一个Result类包含code、message、data三个字段成功返回code200失败返回code500或自定义异常码。所有Controller方法的返回类型都是Result这样前端axios拦截器只处理code为200的情况其他情况统一弹错误提示不需要每个接口单独写重复的判断逻辑。这个惯例一旦定下来前端会被自己省掉很多if-else。权限控制用JWT加HandlerInterceptor。登录接口签发token前端把token存在localStorage每次请求在axios请求拦截器里往Header加Authorization: Bearer xxx。后端拦截器里取出token解析userId再通过userId查出角色按接口路径前缀判断是否放行。管理员接口如果收到家长token直接返回403。这套流程代码量不大但能清楚展示你对认证授权这个知识点的掌握程度答辩时是一个加分的问答环节。3. 核心环节实操登录、内容管理、视频播放与联调部署3.1 后端骨架与配置先建SpringBoot工程按常见的四层结构分包controller、service、mapper、entity再加一个config包放拦截器和跨域配置一个common包放统一返回体和异常处理。分包清晰了后续代码写起来不会乱。application.yml里几个关键配置先写明白server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/child_edu?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver servlet: multipart: max-file-size: 500MB max-request-size: 500MB jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis-plus: configuration: map-underscore-to-camel-case: true global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0 jwt: secret: child-education-secret-key expire-days: 7 custom: file-upload-path: /data/child-edu/upload/注意两个细节。第一视频文件通常比较大SpringBoot默认上传限制是1MB必须调大不然上传大视频直接报错我见过很多同学卡在这一步。第二serverTimezoneAsia/Shanghai必须加不然数据库连接会有时区错误。文件存储路径不要用项目内部目录因为打包成jar后项目目录是临时的重启会丢文件我自己踩过这个坑后统一把上传文件存到磁盘的固定目录再用一个配置类映射成URL访问。统一返回体和一个简单的全局异常处理器值得提前写好。全局异常很重要不然SQL异常、空指针一出现前端拿到的就是一堆看不懂的堆栈信息。我在ControllerAdvice里处理了业务异常和运行时异常业务异常返回自定义错误码运行时异常统一返回500并打印日志这样接口永远能返回一个JSON结构前端不会崩。3.2 登录接口与token的实现登录是这个项目的核心入口也是你必须彻底吃透的模块。注册和登录的主要流程是用户提交用户名和密码后端校验用户名是否已存在密码用BCrypt加密存储登录时根据用户名查出用户用BCrypt对比密码成功则生成JWT返回给前端。密码为什么用BCrypt而不是MD5因为MD5加不加盐都被彩虹表打穿了BCrypt内置随机盐每次加密结果不一样是现在的主流方案。SpringBoot里直接用spring-security-crypto依赖里的BCryptPasswordEncoder就行不用引入整个Spring Security。JWT工具类里就三个方法生成token、解析token、校验token。token里只放userId和role这两个必要信息过期时间按7天设置。拦截器是核心代码大概长这样Component public class AuthInterceptor implements HandlerInterceptor { Autowired private JwtUtil jwtUtil; Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String header request.getHeader(Authorization); if (header null || !header.startsWith(Bearer )) { return writeError(response, 401, 未登录); } String token header.substring(7); if (!jwtUtil.validateToken(token)) { return writeError(response, 401, 登录过期); } Integer userId jwtUtil.getUserId(token); String role jwtUtil.getRole(token); request.setAttribute(userId, userId); request.setAttribute(role, role); String uri request.getRequestURI(); if (uri.startsWith(/api/v1/admin/) !ADMIN.equals(role)) { return writeError(response, 403, 无权限); } return true; } }把拦截器注册到WebMvcConfigurer里排除登录、注册和/api/v1/portal/public开头的接口其余全部拦截。这样一套下来前后端交互的认证链路就通了。不要嫌代码简单毕设需要的是“完整且能讲清楚”而不是“复杂但没人看懂”。3.3 课程管理与内容发布的实现课程管理模块是管理员端的核心。课程表设计好了之后后端接口主要围绕列表、详情、上下架、分类筛选展开。我用MyBatis-Plus的分页插件做课程列表查询条件包括分类ID、标题模糊搜索、上下架状态分页参数统一封装成Page对象。有个实操细节课程创建时要用MultipartFile接收封面图和视频文件先保存文件再保存记录。保存文件时务必重命名不要用用户原始文件名否则会有两个问题一是中文名或特殊字符导致URL编码错误二是文件名冲突覆盖。我习惯用UUID.randomUUID().toString()加原始文件扩展名拼成新文件名保证唯一且安全。文件保存后要返回一个可访问的URL。我配了一个WebMvcConfig在/upload/**路径下映射到磁盘目录这样前端页面可以直接用/upload/videos/xxx.mp4访问资源。上传接口返回这个相对路径前端拿到后拼上自己的服务地址就能用了这个设计既简单又不会因为IP端口变动而失效。管理员端还可以加一个分类管理用一个简单的树形表格展示分类级数控制在两级一级是学科二级是年龄段方便家长筛选。课程上下架操作可以直接用MyBatis-Plus的updateById改掉status字段不用写复杂的XML。3.4 前端核心页面实现从登录、选课到视频播放前端部分我先说工程搭建用Vite的create命令生成Vue3工程安装Vue Router、Pinia、Axios和Element Plus。基础配置就两件大事路由守卫和axios封装。路由守卫的作用是访问需要登录的页面时强制跳转登录页。我在router.beforeEach里加了一段逻辑判断目标路由的meta是否需要登录如果需要就检查localStorage有没有token没有就跳转登录页并带上redirect参数。登录成功后用redirect参数跳回原页面这个小细节很提升体验。axios的封装我放在一个request.js里所有组件公用同一个实例。请求拦截器从localStorage取token加到Header响应拦截器统一处理后端返回的Result对象code不为200时弹Message提示401时清理本地登录态并跳转登录页。这样每个页面调用接口时只关心data部分代码会清爽很多可维护性也高。登录页和注册页用Element Plus的Form组件做好基本校验用户名必填、密码长度大于6位、手机号格式按正则校验一下。注册成功后自动登录直接跳首页这个交互比注册完还要手动登录体验好。课程列表页是给家长和儿童用的展示页用Card卡片展示课程封面、标题、适用年龄、简介。注意封面图要加懒加载不然图片一多首屏会明显变慢。课程详情页包含课程目录目录用可展开的列表展示每一节课免费课节直接放播放按钮非免费课加入“加入计划”操作。视频播放是一个容易翻车的点。我在详情页里用HTML5的video标签播放MP4文件定义了preloadmeta点击播放时才真正拉取视频流避免页面打开就把整个视频网络带宽占满。播放时前端每隔几秒上报一次学习进度后端更新study_record里的观看时长这个上报用节流控制避免每次timeupdate都发请求不然会打爆后端接口。视频课播放完成后前端自动标记状态为已完成并展示课后习题入口。3.5 前后端联调与打包部署联调阶段最容易出问题的是跨域。后端在WebMvcConfig里加了跨域配置允许所有来源的GET、POST、PUT、DELETE请求允许Authorization头。前端开发环境下用Vite的proxy代理把/api转发到http://localhost:8080再从devServer里去掉baseURL改写逻辑。这样开发时走代理不走浏览器跨域联调体验非常顺。部署上最省事的方案是前后端都打到一个工程里。前端执行npm run build生成dist目录把dist里面的文件复制到SpringBoot项目的src/main/resources/static下再重新打包成jar。启动后访问同一个端口后端接口和前端静态页面都从8080端口出不用装Nginx也不用配多个服务对毕设演示来说足够了。如果还想做得更接近企业实践就装Nginx指向dist目录反向代理/api请求到jar包的8080端口但这需要服务器上有Nginx没条件的话别勉强。4. 常见问题与排查技巧实录4.1 跨域、端口冲突与代理配置跨域是前后端分离项目的高发问题。表现就是前端请求发出去后端明明有数据浏览器里却报错Response里看不到任何业务数据。排查思路很简单看后端是否配置了CORS看请求头是否带上了正确的Origin和Authorization看前端是不是走的是devServer代理。端口冲突也很常见尤其是本机装了其他服务占用了8080。启动报错提示Port 8080 was already in use时Mac和Linux下用lsof -i:8080Windows下用netstat -ano | findstr 8080查出来PID直接杀掉。如果项目里数据库连的是本机的MySQLMySQL自己也会占3306端口别跟SpringBoot的8080搞混。还有一个我印象很深的问题前端通过代理访问后端时axios的baseURL不要写成http://localhost:8080/api而是直接写/api。写成完整地址会把代理绕过去直接跨域等于自己把自己堵死了。4.2 版本不一致、依赖冲突的排查思路SpringBoot版本问题我必须单独拎出来说。不少同学照着网上的教程搭项目教程里是2.7自己pom里却写成3.2一启动就报一堆ClassNotFoundException。版本太高时优先把SpringBoot降到2.7.x同时把JDK环境切换到8或11别在版本上死磕能跑起来才是第一优先级。MyBatis-Plus和SpringBoot的版本也要匹配。2.7.x对应MyBatis-Plus 3.5.x这两个搭配最稳。如果引入别的starter后启动报BeanDefinitionStoreException或NoSuchBeanDefinitionException多半是依赖冲突思路是在IDEA的Maven面板里看依赖树把冲突的传递依赖排除掉。还有spring-boot-maven-plugin不要和其他插件绑定得太复杂默认打包配置就够用。前端这边的坑主要在Vue3和Element Plus。Element Plus的组件是按需引入的如果忘了引入样式文件页面会光秃秃的表格、按钮全没有样式。还有就是把Vue2的语法直接套到Vue3上比如this.$router、Vue.use这些写法在新版里全部失效。写之前确认一下自己用的是组合式API还是选项式API别混着写。4.3 视频播放和文件上传的隐藏坑视频播放有三个隐藏坑我全踩过。第一个后端返回的视频URL如果是本地相对路径前端必须拼接完整的服务地址否则视频会404。第二个浏览器对自动播放有限制带声音的视频在未交互页面不允许直接播放我在页面进入后设置了video.muted true再调play方法用户点击播放按钮后再静音解除这才绕开限制。第三个视频文件特别大的时候前端播放器缓冲会比较明显我给video标签加了preloadmetadata并展示一个加载提示避免用户以为页面死了。文件上传这里SpringBoot默认的1MB限制必改。上面配置里max-file-size和max-request-size都加到500MB但要注意服务器磁盘别被撑爆上传前做一次文件类型校验只允许mp4、jpg、png这些常见格式不要相信前端传过来的文件名后缀要检查文件头魔数。生产一点的校验是读文件前几个字节判断真实格式毕设里至少也要做扩展名白名单。4.4 答辩与项目演示的实用建议这个部分是我额外想提醒的。做完了不等于答辩能过演示环节卡壳的同学每年都有不少。我的建议是准备一条“黄金演示路径”从管理员登录开始先创建一个课程分类再上传一门课程和课节视频然后切到家长端注册、绑定孩子、选课、播放视频最后回到成长报告页面看统计曲线。这条路径覆盖了所有核心模块节奏紧凑能在一分钟内把你的系统能力讲清楚。答辩最常见的提问我也列几个提前想好答案为什么用JWT而不是Session儿童课程和成人课程网站的核心差异是什么学习记录表的数据量大了怎么办如果问到了分表分库、缓存、消息队列这类超出毕设范围的问题不要慌如实回答“毕设场景下没引入但我知道这个方向可以怎么扩展”就够了。诚实比硬凹重要绝大多数评委不会为难认真做项目的学生。最后再分享一个我实际带项目时的心得儿童教育网站最出彩、最容易被看到的部分永远是儿童端的界面体验和成长数据可视化。前端配色用明亮柔和的色彩按钮要大布局要有童趣成长曲线用ECharts做成彩色折线图这些都是低成本高回报的加分项。我甚至见过有同学在儿童端加了一个种树互动的小页面孩子每次完成课程就长出一片叶子直接成了答辩现场的亮点功能。技术上的新花样可以不加业务上的亮点细节一定得有。