基于SpringBoot+Vue的儿童性教育网站管理系统设计与实现

1. 项目概述儿童性教育网站的定位与技术底座儿童性教育这个话题在当下的家庭教育和社会教育里越来越被正视。很多学校、社区机构、公益组织都在尝试用数字化手段做科普但真正落地的时候往往卡在几个问题上内容怎么分级、家长怎么参与、数据怎么沉淀、系统怎么维护。我做的这套管理系统核心目标就是解决这些问题——它不是一个简单的展示型官网而是一套完整的“内容管理用户管理学习记录数据分析”的企业级后台前端用Vue做交互后端用SpringBoot扛业务逻辑MyBatis负责数据持久化MySQL存所有业务数据四件套组合在一起是当前Java Web开发里最主流也最稳妥的方案。这套系统的服务对象主要有三类第一类是教育机构需要给自己的学员和家长提供一个科学、安全的性教育知识库第二类是公益组织需要管理志愿者、开展线上课程并记录学习效果第三类是技术学习者尤其是做Java课程设计或毕业设计的同学这套系统的架构思路、权限模型、数据库设计都有很强的参考价值。无论你是哪种角色这套源码拆解下来都能直接复用或者二次开发。从技术角度看这套系统最值得说的不是某个单一功能有多炫而是它把“企业级”这三个字落实到了实处基于RBAC的权限控制、统一异常处理、MyBatis的动态SQL与分页插件、Vue的路由守卫与状态管理、MySQL的事务与索引优化每一层都有明确的职责边界。下面我从整体设计、核心模块、实操部署、问题排查四个维度把这套系统从头到尾拆一遍。2. 整体设计与技术选型为什么是SpringBootVueMyBatisMySQL2.1 前后端分离架构的取舍逻辑这套系统采用的是前后端分离架构前端Vue项目通过Axios向后端SpringBoot项目发请求后端只提供JSON格式的RESTful API不关心页面怎么渲染。这种设计在团队协作里优势非常明显前端工程师和后端工程师可以并行开发只要提前约定好接口文档谁也不用等谁。那为什么不选传统的JSPServlet或者Thymeleaf模板渲染我的判断是这套系统的功能形态决定了它必须前后端分离。儿童性教育网站的管理端有大量的表格、表单、弹窗、树形菜单交互如果依赖服务端渲染每次页面跳转都要刷新整个文档用户体验会很割裂。而Vue的双向数据绑定和组件化开发可以让管理后台的操作像本地应用一样流畅。另外前后端分离之后后端API可以被多个端复用——Web端、小程序端、甚至未来的App端扩展成本几乎为零。2.2 SpringBoot在业务落地中的核心价值SpringBoot在Java后端生态里的地位不用多说它就是用来解决Spring配置繁琐、依赖冲突、部署复杂这些老问题的。这个项目里我用到了SpringBoot的几个关键特性逐个说。自动配置是省事的关键。引入spring-boot-starter-web之后内嵌的Tomcat就准备好了引入spring-boot-starter-jdbc和对应的MySQL驱动数据源也会自动装配。我只需要在application.yml里写清楚数据库连接信息SpringBoot就能自己把DataSource、SqlSessionFactory这些基础设施搭好不需要再写一堆XML配置文件。统一异常处理这块我习惯用RestControllerAdvice配合ExceptionHandler做全局异常捕获。系统里不管是参数校验失败、业务逻辑错误还是数据库异常最终返回给前端的JSON结构都是统一的{code: 0, msg: 成功, data: ...}。前端拿到这个结构只需要根据code判断是弹出错误提示还是正常渲染数据逻辑非常清晰。事务管理方面SpringBoot通过Transactional注解就能搞定。比如后台管理员批量导入课程内容时可能需要同时插入课程主表、章节表、知识点表任何一张表插入失败都应该回滚整个操作否则数据就脏了。我只需要在Service层的方法上加上Transactional(rollbackFor Exception.class)Spring的AOP机制就会自动处理事务提交和回滚省去了大量手写事务管理的代码。2.3 MyBatis为什么比JPA更合适MyBatis和JPA之争是老生常谈了这个项目我坚定选择MyBatis原因就一条这个系统的数据查询规则太灵活了。性教育网站的内容是多维度的课程可能按年龄段分类也可能按主题分类还可能按形式图文、视频、音频分类。后台管理端的列表页通常会提供各种筛选条件按标题模糊查询、按状态筛选、按创建时间范围查询、按年龄段筛选这些条件组合起来数量非常多。如果用JPA这种动态条件查询就得靠Specification或者QueryDSL写起来既绕又难维护。而MyBatis的XML映射文件里写动态SQL用where、if、choose标签组合条件逻辑一目了然。再就是SQL的可控性。这个系统的数据报表模块需要做多表联查和聚合统计比如统计每个年龄段用户的学习完成率、统计每周新增注册用户数等。用MyBatis我可以在XML里直接写优化过的SQL语句甚至可以根据MySQL的执行计划手动调整索引策略。数据库层面的事情就应该在SQL层面解决这是MyBatis的哲学。至于MyBatis的缓存机制我单独说一下。MyBatis默认开启一级缓存也就是SqlSession级别的缓存同一个会话里相同查询不会重复查库。二级缓存是跨会话的我在这个项目里没有开启原因很简单系统的数据更新频率不低课程内容、用户学习记录都在实时变化开二级缓存容易出现脏读问题而且要处理缓存失效策略反而增加复杂度。对于这类业务系统MyBatis自带的一级缓存完全够用性能瓶颈通常不在查询量上而在慢SQL和缺索引上。2.4 MySQL存储引擎与字符集选型参考MySQL版本我用的是8.0存储引擎统一InnoDB字符集用utf8mb4。这里有个很多人会踩的坑MySQL 8.0之前的版本默认utf8其实是utf8mb3只能存基本多语言平面的字符像emoji表情、部分生僻字就存不进去。儿童性教育网站的问答区、留言板功能用户完全可能发emoji所以字符集必须用utf8mb4对应的排序规则utf8mb4_general_ci就够了。InnoDB相对MyISAM的核心优势在事务支持和行级锁。这个系统里有用户充值购买课程、管理员审核内容、学习进度实时记录等场景并发写入频率不低行级锁能最大限度减少锁冲突事务机制保证数据一致性。选型这块没什么好犹豫的。3. 数据库设计与权限模型系统稳定运行的基石3.1 核心业务表的字段设计与关系梳理这套系统的数据库我一共设计了12张核心表我按业务域拆开来列一下。用户域三张表sys_user系统用户表存管理员、教师、运营人员账号、memberC端用户表存注册的家长、学生、member_role_relation用户-角色关联表。这里我把系统用户和C端用户分开建表主要考虑是两个群体的字段差异太大系统用户需要关联部门、岗位、登录IP而C端用户需要记录年龄、性别、家长绑定关系等。混在一张表里会出现大量冗余字段分开建表更清爽。内容域四张表course课程表、course_chapter章节表、knowledge_point知识点表、article图文资讯表。课程表的核心字段包括课程标题、所属年龄段、课程类型视频/图文/音频、封面图URL、上下架状态、创建人ID、创建时间。章节表通过course_id外键关联课程用sort_order字段控制排序。知识点表是这套系统比较有特色的设计它把课程里的关键知识点单独拆出来方便后台运营人员做标签化管理比如“身体界限”“青春期变化”“自我保护”这些主题标签前端可以按标签聚合推荐内容。学习域三张表study_record学习记录表记录用户每次学习课程的行为、study_progress学习进度表记录每个用户对每门课程学到哪一章、exam_record随堂测验记录表。这三个表是数据报表模块的数据来源也是这个系统区别于普通CMS的关键——它不只是内容展示还能追踪学习效果。运营域两张表feedback反馈表收集用户对内容的意见、banner轮播图表管理首页推荐位。辅助表两张sys_menu菜单权限表、sys_role_menu角色-菜单关联表这两张表支撑整个RBAC权限模型。3.2 RBAC权限模型的具体落地方式儿童性教育网站的内容敏感度比一般网站高得多权限控制必须精细。我采用的是经典RBAC模型用户-角色-菜单三层关系。sys_user存用户基本信息sys_role表存角色我预置了超级管理员、内容编辑、审核员、普通运营四种角色sys_menu表存所有可访问的菜单和按钮级别的操作项然后通过sys_user_role和sys_role_menu两张关联表把三者串起来。具体到实现层面后端在用户登录成功后会查询该用户拥有的所有权限标识比如course:add、user:delete把这些权限标识塞进JWT令牌里返回。前端拿到JWT后存储起来在路由配置里通过meta.permission字段声明每个路由需要的权限配合beforeEach路由守卫做前置校验没有权限的直接跳转403页面。后端接口层面我通过自定义注解RequirePermission(course:add)配合Spring AOP拦截器做二次校验防止有人绕过前端直接调接口。双层校验基本堵死了越权操作的可能。3.3 索引设计与SQL优化笔记这套系统的查询场景有几个高频入口用户登录时按用户名查用户、后台课程列表按条件分页查询、前台按年龄段和主题查课程。针对这三个场景我分别建了索引uk_username唯一索引用户表、idx_course_age_status组合索引课程表的年龄段上下架状态、idx_study_record_user_id学习记录表的用户ID。实际操作里有一个很重要的细节组合索引的字段顺序要遵循“最左前缀原则”。比如idx_course_age_status(age_group, status)这个索引可以支持按age_group单独查询也可以支持按age_group status组合查询但如果只按status查询这个索引就完全失效了。我之前见过不少团队把组合索引的顺序建反导致慢查询一直没解决排查半天找不到原因。所以索引设计不要想当然EXPLAIN一下看到key那一列实际命中了哪个索引心里才有底。4. 核心功能模块拆解从登录鉴权到学习记录4.1 基于JWT的登录鉴权与Token刷新策略登录模块是整套系统的安全入口。用户输入账号密码后后端先用BCrypt算法校验密码哈希BCrypt的加盐机制让彩虹表攻击基本失效校验通过后生成JWT令牌返回前端。JWT里我放了三个核心字段用户ID、用户名、权限标识列表。为什么不把角色名放进去因为角色和菜单的映射关系可能随时调整JWT又无法在服务端主动失效如果权限信息全塞在JWT里管理员改了角色权限后用户要等Token过期才能生效。所以JWT里只放相对稳定的用户ID前端每次请求时中间件会查一遍用户的实时权限做鉴权虽然多一次数据库查询但换来了权限变更的即时生效这笔开销是值得的。Token有效期我设置了2小时同时在前端维护了一个“记住我”的逻辑如果用户在登录页勾选了记住我后端会额外生成一个refresh_token有效期7天存在HttpOnly的Cookie里。当access_token过期时前端拦截到401响应自动调用refresh接口换取新的access_token。用户感知就是“一直登录着不会突然被踢出去”。当然HttpOnly Cookie也带来了CSRF防护的需求我在后端配置了CORS白名单只允许前端域名跨域访问同时在每次请求头里要求携带自定义的X-Token字段双重保障。4.2 课程管理模块动态表单与富文本内容设计后台课程管理是整个系统的核心业务模块。管理员创建课程时需要填写课程标题、封面图、适用年龄段、课程简介、课程标签然后为课程添加若干章节每个章节又关联具体的知识点内容。前端这块我用的是Vue的动态表单方案课程基本信息是一个表单章节列表用一个可增删的组件数组点击“添加章节”就动态push一个章节对象每个章节里还能点击“添加知识点”继续嵌套。这个层层嵌套的表单结构如果不用Vue的响应式数据模型实现起来会非常痛苦。我用reactive定义整个表单数据对象新增、删除、修改都直接操作对象视图自动更新这就是Vue最直观的爽点。后端接收时我用了一个复合DTO来接收整个课程对象课程主信息章节列表知识点列表。Service层的处理逻辑是先插入课程主记录拿到自增ID再遍历章节列表插入最后遍历知识点插入。整个操作加上事务控制任何一个环节失败都整体回滚。富文本编辑器我用的是wangEditor它在Vue组件里用v-model就能绑定内容比较简单。这里有个安全细节必须注意富文本内容提交到后端必须做XSS过滤。我写了一个全局的过滤器拦截请求体里的HTML字段用Jsoup库清理script标签、onerror事件这类危险内容防止存储型XSS攻击。这个点很多开发者会忽略但在这个场景下必须做扎实因为内容可能会被未成年人浏览。4.3 学习进度跟踪前端拦截路由后端幂等写入前台用户学习课程的流程是进入课程详情页查看章节列表点击某个章节开始学习。这个系统在学习进度这块做了两个层面的记录。第一个层面是章节完成度。用户在视频播放页当播放进度超过80%时前端会调用POST /api/study/progress接口把这个章节标记为已完成。这里我用了一个防抖逻辑不是实时上报进度而是每15秒上报一次并且只有当进度百分比比上次上报的值大时才发送请求大大减少了无效请求量。第二个层面是课程完成度。当用户完成一门课程的所有章节前端根据章节完成数计算完成百分比展示一个“结业”按钮。后端接口做了幂等处理同一个用户对同一个章节的完成记录如果重复提交不会插入新记录而是更新完成时间和耗时。这是通过(user_id, chapter_id)的唯一索引加上INSERT ... ON DUPLICATE KEY UPDATE实现的既保证数据不重复又避免并发请求下的异常。前后端在进度数据上的数据流是这样的用户学习时前端实时记录本地学习状态同时异步同步到后端用户离开页面时前端主动调用一次保底上报接口把该章节的最终状态同步过去。这样即使网络中断过重新连接后也能把记录补上。4.4 数据报表模块MyBatis联表统计与Excel导出报表模块是面向管理人员的功能主要呈现三类数据注册用户增长趋势、课程学习热度排行、年龄段学习完成率对比。我用ECharts做图表展示前端只需要通过接口拿聚合好的数据ECharts配置对应的折线图、柱状图、饼图即可。后端实现报表SQL的时候重点用到了MyBatis的几个高级特性。第一个是foreach标签处理动态参数比如按多个年龄段筛选第二个是choose标签处理不同的分组维度前端传groupTypeage就按年龄段分组传groupTypeweek就按周分组第三个是sql标签抽取公共SQL片段避免多处重复编写相同的查询条件。报表接口如果每次都实时全量统计数据量大时容易慢。我在中间加了一层Redis缓存缓存key按照业务维度拼接缓存有效期5分钟。管理员在报表页面刷新的时候5秒内基本能拿到数据体验比直接裸查数据库好很多。Excel导出用的是阿里巴巴的EasyExcel它的SAX模式解析和写入对内存友好几十万条数据的导出也不会OOM。我封装了一个通用导出工具类传入的List对象和目标Excel类的Class方法内部通过反射完成字段映射一行代码就可以把查询结果导出为.xlsx文件。5. 前端Vue工程化的实操要点5.1 Vue项目初始化与依赖安装的版本避坑前端项目我用Vue CLI创建Vue版本选的2.6Element UI版本选的2.15。这里有个控制依赖版本的经验如果项目要稳定产出创建时直接指定版本号不要无脑装最新版。比如Element UI在2.15.14之后基本停止维护了而Vue 2生态在2023年底已停止官方维护仍然有大量团队在用就是因为存量系统稳定没有必要追新。如果你是课程设计、毕业设计用Vue 2全家桶Element UI网络上的案例和踩坑记录最丰富遇到问题最容易找到解决方案。Vue Router的安装和配置也是容易出问题的地方。Vue 2对应Vue Router 3.xVue 3对应Vue Router 4.x版本不匹配会直接报错。我见过太多人从网上复制一段命令然后报错一查发现是版本不对。npm install vue-router3和npm install vue-router4这个花不了几秒钟但能省几个小时。同样Vuex版本也分Vue 2对应Vuex 3Vue 3对应Vuex 4。5.2 路由守卫拦权限的完整代码方案管理后台的路由我分成了两部分静态路由登录页、404页和动态路由所有功能页面。用户登录后前端根据返回的权限标识列表动态注册路由。// 权限路由核心逻辑 const permission { path: /permission, component: Layout, children: [ { path: user, name: UserManage, component: () import(/views/user/index.vue), meta: { permission: [user:list] } }, { path: course, name: CourseManage, component: () import(/views/course/index.vue), meta: { permission: [course:list] } } ] } // 全局前置守卫 router.beforeEach(async (to, from, next) { const token localStorage.getItem(access_token) if (!token) { if (to.path /login) next() else next(/login) return } const userStore useUserStore() if (!userStore.userInfo) { await userStore.fetchUserInfo() } if (to.meta.permission !userStore.hasPermission(to.meta.permission)) { next(/403) return } next() })这个方案的注意点是next(/403)之前要确保403页面在静态路由里已经注册否则会死循环跳转。另外动态路由的方案适合菜单权限需要从后端下发的场景如果你的系统菜单是写死在前端的用静态路由路由守卫就足够了不需要额外的复杂度。5.3 Axios封装请求拦截、响应处理与错误提示Axios封装是Vue项目里最基础也最重要的公共代码。我统一创建了一个request.js文件里面配置了baseURL环境变量、请求超时时间request拦截器负责从localStorage里取出Token并设置到请求头response拦截器负责统一处理返回码。service.interceptors.response.use( (response) { const res response.data if (res.code 0) return res.data if (res.code 401) { // Token过期尝试refresh return refreshToken().then(() { const config response.config config.headers[Authorization] Bearer localStorage.getItem(access_token) return service(config) }) } Message.error(res.msg || 请求失败) return Promise.reject(new Error(res.msg)) }, (error) { if (error.response error.response.status 403) { Message.error(没有权限执行该操作) router.push(/403) } // 处理文件下载等特殊响应 return Promise.reject(error) } )关于文件导出有一个非常容易踩的坑导出Excel接口如果直接返回二进制流响应拦截器如果统一按JSON处理就会解析失败。所以我的导出接口请求单独走了一个不经过拦截器的实例收到response后直接处理Blob对象。这个是实战里特别常见的隐蔽Bug排错的时候容易一头雾水最终反应过来是拦截器把二进制流吞了。6. 项目的完整落地实操环境搭建、配置与部署6.1 本地开发环境的搭建步骤我这台机器是本机Windows 11开发环境一步步装。第一步JDK用1.8。SpringBoot 2.x版本对JDK 8支持非常成熟。去Oracle官网下载JDK 8配置JAVA_HOME环境变量命令行里输入java -version能输出版本号就说明环境好了。第二步Maven用3.6.3。不一定要去官网单独下我自己习惯用IDEA自带的Maven配置好settings.xml里的阿里云镜像仓库下载依赖会快很多。这个镜像配置很关键不配置的话从中央仓库拉取SpringBoot全家桶的依赖可能要等十几分钟配了镜像基本一分钟内完成。第三步MySQL安装8.0。安装过程中选对字符集utf8mb4设置好root密码。Windows上MySQL安装完默认没有启动我手动通过net start mysql启动服务。连接测试用命令行或Navicat都能测能连上就进入下一步。第四步Redis安装。Windows下的Redis用tporadowski维护的版本直接解压运行redis-server.exe就行。项目里缓存和Token存储都依赖Redis启动后命令行里redis-cli ping返回PONG就说明正常运行。第五步Node.js环境。Vue项目依赖npmNode.js版本我用的14.21.3。这个版本对应npm 6.x配合Vue CLI 4.x项目很稳定。装好后npm config set registry https://registry.npmmirror.com把npm源切到国内镜像安装依赖的速度会有质的提升。6.2 配置文件与应用启动的完整流程后端项目的关键配置集中在application.yml里。数据源、Redis连接、MyBatis配置、JWT密钥都在这里维护。给出一个基础配置参考server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/sex_edu?useUnicodetruecharacterEncodingutf8mb4useSSLfalseserverTimezoneAsia/Shanghai username: root password: root123456 driver-class-name: com.mysql.cj.jdbc.Driver redis: host: localhost port: 6379 database: 0 mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.edusystem.entity configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl特别强调连接串里的serverTimezoneAsia/Shanghai。MySQL 8.0的时区默认是UTC如果不指定时区应用连上数据库后所有时间字段都会差8个小时排查起来特别容易让人崩溃。useSSLfalse是因为本地开发的MySQL一般没有配置SSL证书开启反而可能报警告。MyBatis的map-underscore-to-camel-case配置建议打开这样数据库字段user_name可以直接映射到实体类的userName属性省去大量resultMap手写字段映射的工作量。启动后端项目的步骤是IDEA里导入项目等待Maven下载完依赖直接运行主类EducationApplication控制台日志出现Started EducationApplication就启动成功。前端项目的启动步骤是命令行进入项目目录先npm install安装依赖再npm run serve启动开发服务器默认监听8080端口。前端项目和后端项目使用不同的端口开发环境下需要通过Vue的代理配置把API请求转发到后端// vue.config.js devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }配置了代理之后前端页面请求/api/xxx实际上是发到http://localhost:8080/api/xxx避免了跨域问题。注意后端接口的配合方式如果后端配置了server.servlet.context-path/api那代理路径就需要对应调整。项目里我让后端控制器类直接以/api开头定义路径前端代理不做路径重写逻辑最简洁。6.3 权限数据的初始化脚本说明系统初始化需要一个SQL脚本里面包含了建库建表、插入初始角色、插入管理员账号、插入菜单数据四部分内容。管理员账号我预置的是admin/admin123密码经过BCrypt加密存入数据库这也是为什么直接插入数据库是看不到明文密码的。菜单数据这块我插入的是权限树的初始数据包含父级菜单系统管理、内容管理、用户管理、报表统计和子级操作每个菜单项有menu_id、parent_id、menu_name、permission_code、route_path这些字段。前端路由的meta配置需要和后端菜单的permission_code保持一致这个对应关系靠开发时人工维护没有自动化工具。项目规模小还好如果菜单多了建议做个后端同步菜单到Redis缓存的小工具后面权限变更刷新缓存就可以生效。7. 常见问题与排错实录我踩过的那些坑7.1 SpringBoot与MySQL版本兼容性问题这个坑出现的频率极高SpringBoot 2.x配MySQL 8.0启动时数据库连接报错Public Key Retrieval is not allowed。原因是MySQL 8.0默认使用caching_sha2_password插件管理用户密码而连接URL里如果没有指定allowPublicKeyRetrievaltrueJDBC驱动在首次连接时会拒绝获取公钥。解决方式是在JDBC连接串里追加allowPublicKeyRetrievaltrueuseSSLfalse。网上很多老教程用的还是MySQL 5.x的配置方式遇到这种问题容易卡住很久。还有一种情况是Maven引入了过旧的MySQL驱动比如mysql-connector-java5.1.x版本配MySQL 8.0会出现Unknown system variable query_cache_size错误。因为MySQL 8.0移除了查询缓存功能旧驱动连上来会查询这个系统变量直接报错。解决方案就是统一用MySQL官方推荐的8.0系列驱动依赖。7.2 MyBatis分页插件不生效的排查思路分页插件我用的是PageHelper。这个插件用起来简单PageHelper.startPage(pageNum, pageSize)写在查询方法前一行紧接着执行查询就能拿到分页结果。但实际操作中有一个高频错误startPage后面跟的查询语句不是插件要拦截的那个SQL分页就会失效查出来的是全量数据。这种问题常见出现在Mapper方法内部做了多次SQL查询的场景比如先查了一次主表又查了一次关联表PageHelper只对第一次查询生效。排查的办法是打开MyBatis日志观察控制台是否打印了SELECT count(0)——分页插件正常生效的标志就是会先执行一条count查询。如果只看到一条业务查询SQL而没有count那基本可以确定startPage和Mapper方法之间隔了别的数据库操作。另外PageHelper的reasonable参数建议设置为true这样页码越界时不会报错而是自动修正到边界页码提升接口的健壮性。7.3 前端npm安装依赖的典型异常处理npm install报错是前端开发最让人头大的问题之一。第一种常见异常就是权限相关的EACCES: permission deniedWindows上不常见但macOS/Linux上频繁。解决方式就是不要用sudo装全局包要给项目目录正确授权。第二种是网络相关报ETIMEDOUT或者ECONNREFUSED基本是默认npm源太慢或连不上切到npmmirror镜像源立刻好。第三种是依赖版本冲突报peerDependencies相关错误解决方式是锁定核心依赖的版本号不要用^范围符号。我个人的经验是遇到依赖安装问题先清缓存npm cache clean --force然后删掉node_modules目录和package-lock.json重新npm install。一次不行就两次大部分问题都能解决。7.4 Token过期后前端白屏的集中排查部署的时候遇到一个诡异问题用户登录后长时间操作突然刷新页面就白屏了。排查链路是刷新页面后前端路由守卫检查Token是否过期发现过期了就调用refresh接口refresh接口返回401路由跳到了登录页。但问题在于如果用户当前访问的是一个动态路由页面动态路由的重新注册逻辑没有在Token刷新后执行路由表里没有对应路由就渲染出了空白页。解决方式是在fetchUserInfo成功重新注册动态路由后通过next({ ...to, replace: true })手动导航一次强制触发路由匹配重新执行。这个坑的核心思路是“Token过期后重新登录或续期必须重新走一遍路由初始化”很多前端新手不知道Vue Router的路由表是可以动态变化的踩了坑才明白。8. 系统扩展思路与二次开发建议8.1 从单体到微服务的渐进式演进这套系统的架构是基于单体应用设计的单体在中小规模下没有任何问题。但如果业务量真的大起来比如课程并发学习人数达到几千人可以先做前后端彻底分离部署前端静态文件扔Nginx后端服务扛在Tomcat上数据库单独一台机器。再往后可以按业务域拆分服务比如会员服务、课程服务、报表服务独立部署服务之间通过Feign或RPC通信。这套系统的代码结构里包名按controller、service、mapper、entity分层后续拆分微服务时可以按照这些包边界直接提取迁移成本可控。8.2 内容审核与安全加固建议儿童性教育网站内容安全是重中之中这部分建议在现有基础上继续加固。第一图片和视频内容应该接入第三方内容审核API或者自建审核队列让审核员人工复核后才能上线。第二用户生成内容比如留言、问答建议先进入待审核状态审核通过后再公开展示防止出现违规内容。第三后台操作日志应该全面记录哪个管理员在什么时间改了哪条数据通过AOP切面统一记录到日志表给审计提供依据。我在系统里预留了content_status字段内容默认是草稿状态编辑完成后提交审核审核通过才设置成已发布。这个流程如果后续需要可以把审核动作也做成菜单权限的一部分审批流程落地后这套系统的内容安全级别会更上一个台阶。8.3 微信小程序端的对接思路系统后端的接口全部是RESTful JSON格式天然适合小程序端复用。要做小程序对接需要在后端增加微信登录逻辑小程序端通过wx.login拿到code后端拿着code调用微信接口换取openid然后绑定或创建注册用户。这个系统里目前C端用户是手机号密码登录后续如果要接微信登录加一个openid字段和对应的登录接口就能实现。前端的小程序端页面可以直接复用管理后台的课程浏览、章节学习这些前端逻辑只是UI组件库换成了微信原生组件或者Vant Weapp。学习记录和学习进度这两个接口设计的都是兼容多端的因为上报的只是用户ID、章节ID、进度百分比不关心请求来自哪个客户端。9. 我在实际开发中的一些体会这套系统从零写到部署运行前后大概花了一个多月的时间。回过头来看我最大的感受是技术选型没有绝对的优劣只有是否适合当前的场景。SpringBootVueMyBatisMySQL这套组合可能不是每个方面都是最强的但它在团队协作、开发效率、社区生态、招聘匹配度上达到了一个很好的平衡。我最想提醒后来者的一点是不要只顾着写代码数据库设计才是这类系统真正的灵魂。课程、章节、知识点、用户、学习记录这些表的设计如果做得扎实后面的功能开发会顺利很多反过来如果表结构设计随意后期改表带来的工作量可能要超过前期所有开发量的总和。建表之前多画几张ER图多想想每个字段在业务上意味着什么这套时间花得非常值。另外前后端联调是项目推进中最影响心态的环节。我建议端到端接口联调之前后端先通过Swagger把所有接口的请求参数和响应结构文档化前端严格按照文档开发有出入的地方开会一次对齐别靠微信来回传话。协议对了联调就快了。最后再说一个运营层面的细节。这套系统的内容我在录入的时候特别注意措辞——儿童性教育不是成人性知识它的核心是帮助孩子认识身体、理解边界、学会保护自己所以内容审核一定不能松。系统功能做得再好内容本身不过关整个项目的价值就归零了。这也是我在后台把审核功能和内容状态管理做得比较重的原因。如果你准备基于这套系统做二次开发一定要把内容安全放在第一位。