1. 项目定位与需求拆解1.1 高校防艾宣传平台能解决什么问题高校的艾滋病预防宣传一直是个很特殊的需求场景。传统的线下宣讲、发放宣传册、贴海报这些方式覆盖面有限学生参与度也不高而且很多同学对这类话题存在心理顾虑不愿意在公开场合提问或了解。我做这个“基于SpringBootVue的高校HIV艾滋病预防宣传平台”的时候最开始想的就是怎么把这件事搬到线上让学生可以匿名、随时随地获取靠谱的防艾知识。这个平台本质上是一个面向高校场景的健康教育宣传系统核心目标可以拆成四个维度知识传播文章和视频学习、自我评估匿名测评问卷、服务对接检测预约和咨询通道、宣传教育管理后台内容发布和效果统计。它解决的痛点很明确一是让防艾知识触达更广二是通过匿名机制降低学生心理门槛三是帮学校团委、校医院、学生处这些部门把宣传工作的线上化流程跑通。适合谁来参考这个项目我觉得有三类人第一类是计算机相关专业的毕业生拿这个当毕业设计SpringBoot加Vue的组合在答辩时也比较好讲第二类是高校信息化建设的技术人员想建设类似健康宣传系统可以参考数据模型和功能拆分第三类是正在学前后端分离开发的初学者这个项目的业务复杂度适中既有CRUD又有视频播放、在线测评、数据统计这些可展示的亮点学完能建立一个完整的全栈开发思维框架。1.2 功能模块怎么划分才合理我在设计功能模块时没有一上来就堆功能而是先按“平台的角色谁在用”来倒推。整个系统有四种角色学生普通用户、辅导员班级管理员、校医院/团委工作人员运营管理员、系统管理员。不同角色关心的东西完全不同如果功能边界不清晰后期开发和维护都会很痛苦。最终我把功能划分成六大模块用户认证与权限管理、防艾知识内容库图文视频、在线测评与风险评估、检测预约与咨询服务、宣传数据统计看板、后台内容审核与管理。这里有一个经验想分享很多同学做这类毕设时容易把功能做得特别散比如做一个在线聊天室又做一个论坛再做一个商城最后每个功能都是半成品。我建议守住“宣传平台”这个核心定位所有功能都围绕“让用户获取防艾知识、评估自身风险、对接专业服务”这条主线展开多余的花哨功能一个都不加。这样的系统做出来功能聚焦需求文档、数据库设计、代码实现都能对得上答辩时逻辑也能自洽。1.3 关键业务流程梳理除了功能模块业务流程的设计同样重要。我把几个核心流程画过一遍流程草图拿纸画的开发画布也行这里捡两个最关键的说说。第一个是内容发布流程。管理员新增文章或视频后不是直接上架的——先进入草稿状态然后提交审核审核通过后才会在前端页面展示出来。这样设计是为了防止信息误发。高校的防艾宣传内容需要准确、科学如果发布流程没有审核环节内容出错的风险太大。审核角色和发布角色要分开不能让同一个人既是发布者又是审核者。第二个是检测预约流程。学生在平台上看到校医院或疾控中心的检测服务选择时间段提交预约管理员在后台确认后生成预约凭证。用户可以在“我的预约”里查看状态和历史记录还能在指定的隐私时间段取消预约。这个流程最重要的设计是匿名与隐私保护——前台预约使用脱敏显示管理员后台只看到学号后四位其他个人隐私信息需要更高权限才能查看。这不是技术上的难事但在高校场景中这个设计非常加分也算是平台在“防艾”这个敏感话题下应有的态度。2. 技术选型思路与理由2.1 为什么选SpringBoot Vue这套组合技术选型这个问题我在项目一开始就反复权衡过。前后端分离是当前Java Web开发的主流架构SpringBoot 负责后端接口服务Vue 负责前端交互界面两边通过 RESTful API 通信。这套组合的优势在于“分工明确、生态成熟、学习资料多”对于高校项目来说这三个优势几乎是致命的吸引力。先说 SpringBoot。它最大的贡献是解决了 Spring 家族繁琐的 XML 配置问题用自动装配机制把大量样板配置变成了约定俗成一个内嵌的 Tomcat 就能把服务跑起来不用再单独部署 war 包。开发者在配置文件里写几个坐标参数就能非常轻量地把一个 Web 项目跑起来。你去看现在的招聘市场SpringBoot 几乎是 Java 后端岗位的标配要求项目做完之后简历上写“熟悉 SpringBoot 框架开发”含金量是实打实的。再说 Vue。Vue 的核心优势是响应式数据绑定和组件化开发。拿这个平台来说后台管理端有大量的表单、表格、弹窗交互用 Vue 的组件化拆分之后每个功能区域的代码都很好维护。前端页面写完用 npm run build 打包成静态资源丢到 Nginx 里就能独立部署开发时还能用 Vite 或 Vue CLI 做热更新体验非常好。前后端分离还有一个隐藏的好处——接口文档驱动开发。我提前用 Apifox 把所有接口的定义路径、入参、出参约定好前后端并行开发的时候不需要互相等这个对项目进度管理帮助很大。2.2 前端技术栈Vue3 Element Plus Axios Pinia ECharts确定用 Vue 之后我选了 Vue 3 的 Composition API 写法配合 Element Plus 组件库做后台界面。这里有一个选型细节可以聊聊Vue 3 和 Element Plus 在 2023 年之后生态已经非常成熟了组件库的表格、表单、上传、日期选择这些组件直接开箱即用能省掉至少三成的前端开发工作量。状态管理我用了 Pinia 而不是 Vuex 4。虽然 Vuex 是老牌方案但 Pinia 的 API 设计更简洁去掉了 mutations 这个略显冗余的层直接同步改 store 里的状态TypeScript 支持也更好。对于这个项目来说我主要用 Pinia 来存用户登录信息和权限标识跨页面共享的时候直接从 store 读取不用每次都调接口。HTTP 请求我用 Axios 封装了一层。封装的核心是拦截器请求拦截器里自动往 header 里塞 JWT Token响应拦截器里统一处理 HTTP 状态码和业务状态码后端返回 401 就自动跳转登录页后端返回 403 就弹提示“无权限访问”。这样业务代码里不用每处都写 try catch统一收口减少了大量重复逻辑。数据可视化部分用了 ECharts宣传效果的柱状图、饼图、折线图都能直接找官方示例改学习成本很低。2.3 后端技术栈SpringBoot 2.7 MyBatis-Plus JWT Redis后端版本我选了 SpringBoot 2.7.18而不是最新的 SpringBoot 3.x。这里想重点说说原因。很多同学看到 2024 年、2025 年了觉得应该上 SpringBoot 3但实践下来 SpringBoot 3 有几个门槛——强制要求 JDK 17旧的 javax 包名全部变成了 jakarta很多第三方组件的兼容版本还不稳定。对于追求稳定交付的项目来说SpringBoot 2.7 是性价比非常高的选择它的社区资料最多遇到问题一搜就有答案。持久层用了 MyBatis-Plus。它是在 MyBatis 基础上做的增强大部分单表 CRUD 不用写 XMLBaseMapper 里直接提供 selectById、selectPage 这些现成方法。这个项目里的文章表、视频表、预约表、测评表基本都是单表操作MyBatis-Plus 能显著减少重复代码量分页插件用 PageHelper 式的一行配置就搞定。认证授权我用的是 JWT 方案。用户登录成功后后端生成一个带有效期的 Token 返回给前端前端存在 localStorage 里之后每个请求都带上这个 Token。这个方案的优点是无状态后端不需要保存会话信息很适合前后端分离架构。Redis 我用来做两部分事情一是存储验证码的短时缓存二是给视频的播放进度做热点缓存。选 Redis 的原因是它读写速度快且支持设置过期时间验证码五分钟过期这种需求天然契合 Redis 的 TTL 机制。3. 数据库设计与后端核心实现3.1 核心数据表设计思路数据库设计在项目里占了非常重要的位置表结构没设计好后面写代码会不断返工。我按业务模块把表分成了几组这里挑几张核心表解读一下设计思路。用户表user字段包括 id、学号、密码、姓名、性别、学院、班级、角色0-学生1-辅导员2-运营管理员3-系统管理员、电话、邮箱、创建时间、状态。密码字段存的是 BCrypt 加密后的密文绝对不能存明文。角色字段用 int 类型或用枚举字符串按位设计也行但对这种规模的项目 int 就够用。文章内容表articleid、标题、封面图、摘要、正文、分类科普知识/政策法规/案例分析、是否置顶、浏览量、状态0草稿 1待审核 2已发布 3已下架、创建人、审核人、创建时间、发布时间。加一个浏览量字段是为了后面数据统计能直接用不用 count 查询表记录性能上更稳。视频资源表videoid、标题、封面图、视频地址、播放时长、简介、所属分类、状态、上传人、创建时间。视频地址我存的是相对路径完整访问地址通过配置动态拼接这样部署环境切换时不需要改数据库。存储方面视频文件放在服务器的 /resources/videos 目录如果是云服务器也可以接 OSS。测评问卷表questionnaireid、标题、描述、状态、创建时间。测评题目表questionid、问卷 id、题目内容、选项 JSON、正确答案、分值。问卷答案表questionnaire_resultid、用户 id、问卷 id、得分、风险等级、提交时间。这里有几个设计细节值得说明选项用 JSON 格式存是因为不同题目的选项数量不一样做成 JSON 字段比做关联表更灵活风险等级是后端根据得分自动算出来的前端只需要展示结果和建议。预约表appointmentid、用户 id、服务类型检测/咨询、预约日期、时间段、地点、状态0待确认 1已确认 2已完成 3已取消、备注、创建时间。这张表要和用户表做关联但查询列表时只返回脱敏信息。除了这些核心表还有 banner 图表、通知公告表、操作日志表、字典表。字典表是我做项目时特别推荐加的一张大而全的表——状态值的枚举、学院列表、服务类型这些都可以放里面前端下拉框选项直接从这里拿后期要加选项不用改代码和数据库结构。3.2 登录认证与权限控制的落地方式登录认证这块我一共做了三个接口发送验证码、账号密码登录、获取当前登录用户信息。密码登录的流程是前端传账号和密码后端先校验验证码验证码存在 Redis 里key 是 uuidvalue 是四位数字再根据账号查用户用 BCrypt 校验密码校验通过后生成 JWT把用户 id 和角色放进 Token 的载荷里同时把用户基本信息存入 Redis最后返回 Token 和用户信息给前端。这里的关键实现是权限控制。我用 SpringBoot 的拦截器机制配合自定义注解 RequireRole做了一个轻量级的权限控制方案。拦截器里先校验 Token 是否存在和有效再从 Token 里解析出角色去匹配目标接口上标注的角色要求。放行规则这样定义// 自定义权限注解 Target(ElementType.METHOD) Retention(RetentionPolicy.RUNTIME) public interface RequireRole { String[] value() default {}; } // 拦截器核心逻辑 public class AuthInterceptor implements HandlerInterceptor { public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 放行预检请求 if (OPTIONS.equalsIgnoreCase(request.getMethod())) { return true; } String token request.getHeader(Authorization); if (!StringUtils.hasText(token) || !jwtUtil.validateToken(token)) { throw new BusinessException(401, 登录状态已失效请重新登录); } // 解析角色 String role jwtUtil.getRoleFromToken(token); if (handler instanceof HandlerMethod) { HandlerMethod handlerMethod (HandlerMethod) handler; RequireRole requireRole handlerMethod.getMethodAnnotation(RequireRole.class); if (requireRole ! null !Arrays.asList(requireRole.value()).contains(role)) { throw new BusinessException(403, 没有操作权限); } } return true; } }这套方案的优点是轻量、无状态、容易理解对一个小型管理系统来说完全够用。比引入 Spring Security 加 SecurityFilterChain 那一大套配置要直白得多。我在答辩时重点讲了权限控制的设计思路老师对这个点的评价还不错——不用框架堆砌能说清楚原理解释清楚为什么这样做比盲目引入复杂框架更能体现基本功。另外一个容易忽略的点是密码策略。管理员的初始密码建议统一设置为类似 Hiv2024 这样的临时密码首次登录强制修改。学生注册时如果要设置密码最少 8 位且必须包含字母和数字前端后端双端校验。3.3 内容管理与审核流程的后端实现内容管理模块是后台最核心的 CRUD 场景我用 MyBatis-Plus 的 IService 接口封装了一层通用方法每个业务 Service 继承后直接获得增删改查能力。文章发布接口的代码结构大致是这样的public void publishArticle(ArticleDTO articleDTO) { Article article new Article(); BeanUtils.copyProperties(articleDTO, article); article.setStatus(0); // 草稿 article.setCreatorId(currentUserId()); articleService.save(article); // 记录日志 logService.record(发布文章, 文章《 article.getTitle() 》已保存为草稿); }提交审核接口会把文章状态从草稿改成待审核运营管理员登录后台看到一个待办列表点开详情阅读内容通过或驳回。驳回时填写驳回原因系统会通知发布者。这个通知我这里做了简化直接存一条站内信用户下次登录时红点提示。视频上传是内容管理里比较麻烦的部分。我用的方案是前端 Element Plus 的上传组件把视频分片传到后端后端用 MultipartFile 接收后存到服务器指定目录。视频格式这块我建议统一转成 MP4因为 MP4 兼容性最好。考虑在线播放的体验还把视频转出了 M3U8 切片这也是标题热词里反复出现的 vue 播放 m3u8 这个需求的实际场景。转码用 FFmpeg 的命令行工具Java 里通过 ProcessBuilder 调用摄像头少的时候直接传原视频也行。M3U8 的播放地址生成逻辑是这样的后端在视频表里保存 .m3u8 文件的访问路径前端用 hls.js 解析播放。下面这一段是前端播放的核心代码我从实际项目中摘出来的template video refvideoRef controls autoplay classvideo-player/video /template script setup import Hls from hls.js; import { ref, onMounted, watch } from vue; const props defineProps({ videoUrl: { type: String, required: true } }); const videoRef ref(null); function playVideo(url) { if (Hls.isSupported()) { const hls new Hls(); hls.loadSource(url); hls.attachMedia(videoRef.value); } else if (videoRef.value.canPlayType(application/vnd.apple.mpegurl)) { // Safari 原生支持 HLS videoRef.value.src url; } } onMounted(() { if (props.videoUrl) { playVideo(props.videoUrl); } }); watch(() props.videoUrl, (newUrl) { if (newUrl) { playVideo(newUrl); } }); /script整个视频模块做完之后用户可以在线观看防艾科普视频后台还能看到每部视频的播放次数和人均观看时长这个数据直接辅助判断哪类内容的接受度更高。4. 前端页面开发与功能落地4.1 工程化初始化与路由设计前端工程我用的 Vite 来初始化 Vue 3 项目和 Vue CLI 相比Vite 的开发服务器启动速度快很多项目大点也不会卡。初始化命令很直接npm create vitelatest hiv-frontend -- --template vue cd hiv-frontend npm install npm install vue-router4 pinia axios element-plus element-plus/icons-vue echarts hls.js装完依赖后第一件事是建好目录结构。我的习惯是 src 下面分 api接口定义、assets静态资源、components公共组件、router路由、stores状态管理、utils工具函数、views页面。api 目录下每个模块建一个 js 文件比如 article.js 里统一放文章相关的接口调用这样后端接口路径集中管理改起来不会东找西找。路由设计上前台门户和后台管理分成两个路由容器。前台路由是公开的包括首页、知识库、视频课堂、在线测评、预约服务、个人中心后台管理路由做了动态权限控制根据用户角色异步加挂路由学生角色访问后台地址会被重定向到首页。这是前端权限控制的做法和后端接口权限是双重保障。Vue Router 还用到一个很重要的特性路由守卫。我在全局前置守卫里判断用户是否登录未登录跳转登录页并记录来源路径登录成功后跳回原页面。这个体验细节很微妙但用户感知非常明显。4.2 视频学习模块M3U8 播放与播放进度记录视频课堂是平台里用户最常访问的模块所以我把这个模块的细节做得比较多。页面上显示视频封面、标题、播放量、时长点击进入播放页。播放页的布局是左侧播放器、右边推荐列表用的是分栏布局。播放器上面提到的 hls.js 方案能胜任。播放进度的记录是一个隐藏的亮点功能。用户看到一半关了页面下次打开时从上次位置继续播放。实现逻辑是播放器触发 timeupdate 事件时用节流函数每 15 秒向后端提交一次当前播放时间同时记录用户 id 和视频 id点开播放页时先查后端有没有历史进度有的话设置 currentTime 跳转。注意这里有个细节节流是必须的不然 timeupdate 事件每秒触发三四次带宽和数据库压力都扛不住。节流的简单写法是维护一个时间戳判断是否过了设定间隔也可以直接用 lodash 的 throttle 方法。视频播放页还有一个贴心的设计首次播放前弹出提示框告知用户“本视频包含专业知识观看全程大约需要 X 分钟”用户点击“我已了解开始观看”后视频才播放这样也侧面起到心理铺垫的作用。这个设计在策划阶段就确定下来后续在用研反馈里好评率还挺高的。4.3 在线测评与结果分析在线测评模块我做了两套问卷一套是防艾知识竞赛类的题目有正确选项提交后立即出分另一套是风险评估量表没有对错根据选项累加风险分值最后映射为低风险、中风险、高风险三个等级。做这一块时最需要考虑的是前端交互体验。我用了 Element Plus 的步骤条组件把 10 道题分成 3 步每步展示 3~4 题用户答完一页点“下一题”最后一页展示结果。有一版我做的是所有题目在一个页面上通过滚动查看但测试后发现用户滚动操作冗长、容易漏题改成步骤条之后完成率明显提升。这就是产品思维和技术实现的结合能体现出对用户体验的思考。测评结果的展示也花了心思。得分页不是一个简单的数字而是一个评估报告雷达图展示五个维度知识掌握、风险意识、行为态度、自我防护、求助意愿的得分占比配合文案给出针对性建议。风险等级为“中风险”或“高风险”的用户页面提示“建议前往校医院或当地疾控中心进行专业咨询与检测”并提供预约服务的快捷入口。这类文案我在写的时候特别注意语气避免制造焦虑用“我们理解每个人的情况不同”这种温和表达替代恐吓式表述。后端生成评估报告的逻辑相对简单根据题目分组的权重计算综合得分然后用一个 Map 把分数区间映射到风险等级和建议文案再用 ECharts 把各维度数据传给前端渲染。4.4 宣传数据看板ECharts 展示运营效果后台的数据看板我用 ECharts 做了四个核心图表用户增长趋势折线图、内容分类阅读量占比饼图、预约服务数量柱状图、各学院参与度热力图。这些图表的数据来源是后端统一的统计接口返回一个 JSON包含时间范围内的用户注册数、文章阅读量、视频播放量、测评完成数、预约数等运营指标。值得讲一下访问量和活跃度的统计方式。我没有用复杂的埋点系统而是用一张每天汇总的行为统计表定时任务在每天凌晨把前一天的数据汇总写入报表查询直接读这张表。这种离线汇总的优点是查询性能好、逻辑简单对宣传平台这种量级的数据完全够用。如果未来数据量大可以扩展成 ClickHouse 之类的大数据方案但现阶段用不着。权限控制下不同角色看到的看板内容不同。辅导员只能看到自己学院的数据校医院可以看到全校的数据学生端则有一个个人学习档案面板展示自己观看过多少视频、完成过几次测评、最近一次风险等级。把数据权限做细整个平台的信息隔离就会显得很正规这也是答辩时一个不错的加分解。5. 开发过程中踩过的坑与排查心得5.1 SpringBoot 版本太高导致的兼容问题这个坑我相信很多用 SpringBoot 的同学都踩过。一开始我图新用了 SpringBoot 3.2结果项目中用到的 knife4j 接口文档组件和 MyBatis-Plus 的部分旧版本插件都不兼容报了一堆莫名其妙的错误。后来整体降级到 SpringBoot 2.7.18所有问题迎刃而解。这里有个排查思路可以分享遇到第三方组件报错时不要一开始就怀疑自己的代码错误先检查版本兼容矩阵。很多组件在官方文档或 GitHub 的 README 里会明确写支持哪些 SpringBoot 大版本。优先选择 SpringBoot 2.7 而不是 3.x不是说 3.x 不好而是它的生态迁移还需要时间对交付型项目来说稳定性更重要。比较隐蔽的问题还有自动配置没生效。比如配置了 Redis 连接但启动时没有报错实际一调用就 NPE。后来发现需要检查是不是缺失了 RedisAutoConfiguration 的自动装配条件排查方法是在启动类上加 -Ddebug 参数看自动装配报告过滤出 Redis 相关的项为什么没有生效。5.2 Vue 打包后路由刷新 404 和布局异常项目部署到服务器之后出现了两个经典的前端问题。第一个是刷新页面 404原因很简单——Vue Router 默认用 history 模式刷新时浏览器向服务器请求具体的路径但这个路径在静态服务器上不存在。解决办法是在 Nginx 配置里加一条 try_files 指令location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; }加了之后刷新就不再 404 了。如果你用的不是 Nginx 而是 Tomcat 部署那需要在后端加一个 Controller 把未知路径转发到 index.html或者改用 hash 模式路由。hash 模式不需要服务器配置但 URL 会多一个 # 号不太好看我推荐用 history 模式加服务器配置的方案。第二个问题是打包后布局异常。开发环境一切正常一打包上线就发现样式错乱排查到最后是静态资源路径问题——打包后的 index.html 里引用的 JS 和 CSS 路径是绝对路径 /assets/xxx但我的网站部署在服务器子目录下。解决办法是在 vite.config.js 里把 base 改成相对路径 ./重新打包就好。类似的还有 Element Plus 的字体文件加载不出来同样要把 public 路径配置对。5.3 跨域、联调与 Token 失效的排查前后端分离开发时跨域是绕不开的问题。我在开发环境用 Vite 的 proxy 做代理把 /api 开头的请求代理到后端的 localhost:8080这样浏览器不会产生跨域请求开发和生产的运行都很正常。生产环境则是通过 Nginx 反向代理统一转发location /api/ { proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Authorization $http_authorization; }这里要注意 proxy_pass 后面的斜杠问题我在这里吃过一次亏——/api/ 转发到 8080 后后面的路径如果有差异就会 404。加不加末尾斜杠在 Nginx 里行为完全不同配置时一定要先理清楚。另外一个是 Token 失效的体验问题。后端 Token 有效期我设了 24 小时但学生用系统时基本是上课间隙隔了两三天再打开就发现“登录已过期”体验很差。后来我加了双 Token 机制Access Token 有效期 2 小时Refresh Token 有效期 7 天Access Token 过期时用 Refresh Token 自动续期用户无感知只有 Refresh Token 也过期了才需要重新登录。这套机制在后端写一个 AOP 切面就能实现不太复杂但体验上升非常明显。5.4 部署发布与运维细节整个系统部署我用了最简单省钱的方案一台 2 核 4G 的云服务器安装了 JDK 8、Nginx、MySQL 8、Redis 6。后端通过 Maven 打成 jar 包用 nohup 命令后台启动前端 build 之后把 dist 目录放到 Nginx 的 html 目录下。下面的启动命令在实践中验证没有问题# 后端启动 nohup java -jar hiv-platform-1.0.0.jar --spring.profiles.activeprod app.log 21 # Nginx 配置 server { listen 80; server_name your-domain.com; location / { root /usr/share/nginx/html/dist; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080/; } }另外建议把 MySQL 和 Redis 都加上密码服务器的安全组只放行 80 和 22 端口8080 端口不要对外暴露这些是基本安全实践。数据库每天凌晨做一次全量备份备份文件保留 7 天用 crontab 定时任务就行。这些在毕设论文的“系统部署”章节里写上是加分项实际工作中也是保命技能。我在实际项目里还用过 SpringBoot Actuator 暴露健康检查端点配一个简单的脚本监控服务是不是活着挂了自动重启。对于教学项目来说这不是必须的但做出来的话说明你有生产环境意识面试的时候可以拿出来聊。6. 学习路线与项目扩展建议6.1 从零复现这个项目需要掌握哪些前置技能如果你现在准备照着这个思路做类似的项目我建议先确认自己的基础打得差不多了。前端需要掌握 HTML/CSS 基础、JavaScript 核心语法ES6 的箭头函数、解构赋值、Promise 这些是必须的、Vue 3 的组件写法、Axios 的基本使用后端需要掌握 Java 面向对象、Spring 的核心概念IoC 和 AOP 至少要理解、MyBatis 的 SQL 写法、MySQL 的基础增删改查和表设计能力。这些东西不需要全部精通再动手但基础语法要熟练到不用查文档的程度不然项目做着做着就变成“调试代码”而不是“写功能”了。我的建议是按“前端基础 2 周 后端基础 2 周 项目实战 4 周”的节奏来安排学习。如果已经有 Java Web 开发基础直接看 SpringBoot 的文档加上狂神的入门视频一周就能上手Vue 新手建议先看官方教程的“快速开始”部分把组件、路由、状态管理三座大山搞定再说。6.2 可扩展的方向从课程设计到真实运营平台这个项目做完之后我一直在想后续怎么扩展成真正能长期运营的平台。第一个扩展方向是内容推荐——根据用户浏览历史和测评结果用简单的标签匹配算法做防艾知识的个性化推荐虽然用不上协同过滤那么复杂的东西但能把“千人千面”的雏形做出来。第二个方向是移动端适配现在的界面只能说在手机上“能用”但谈不上“好用”下一步可以考虑做一套 uni-app 的小程序版本触达率会提升很多。第三个方向是更严谨的数据安全与隐私合规。平台涉及健康类敏感信息如果要在真实高校中上线运行必须认真考虑数据脱敏、操作审计、角色权限的最小化授权。我在代码里虽然做了 Token 校验和角色控制但要达到等保要求还有不少工作量。当然如果你只是在毕业设计层面当前的设计已经足够有诚意了。最后想分享一下我反复改了两版才定型的体会好项目不是一次写出来的是迭代出来的。做之前多花时间在需求分析、数据库设计和接口约定上后面实现会轻松很多反之如果一上来就闷头写代码后期返工的成本远大于前期规划的成本。我做这个 SpringBootVue 的高校防艾宣传平台最大的收获不是代码量而是“先想清楚再动手”这个朴素习惯。希望这篇整理能帮到正在做同类项目的你。