news 2026/9/16 3:53:50

带AI的青少年心理健康管理系统:SpringBoot+Vue毕设完整实现指南

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
带AI的青少年心理健康管理系统:SpringBoot+Vue毕设完整实现指南

做毕设选了这个题目的同学,我想先给你吃一颗定心丸:“带AI的青少年心理健康管理系统”是一个性价比极高的选题。它表面上是SpringBoot+Vue的经典前后端分离项目,但实际上通过一个“AI模块”把整个项目的技术深度和创新性都提上来了——既有管理系统的CRUD底盘,又有贴近真实业务场景的智能化功能,答辩时非常好讲,面试时也拿得出手。

这篇文章不是我临时编的,而是我帮你把这个标题背后要做的事、要踩的坑、要准备的文档和视频全部拆开揉碎讲清楚。无论你是刚学完Java基础、还没做过完整项目的小白,还是已经写过几个管理系统、想冲击高分的进阶玩家,照着这条线走,你都能在两周内把项目从零搭到可以答辩演示的程度。

1. 项目到底要做什么:需求拆解与总体设计思路

先说清楚这个系统是给谁用的、要解决什么问题,因为需求边界决定你的工作量。青少年心理健康管理本身是一个偏业务侧的课题,放在信息系统里做,核心是解决三件事:心理状态的可量化采集、异常状态的及时发现、干预过程的线上留痕

1.1 系统角色与核心功能边界

我见很多同学一上来就想把系统做得特别大,结果把自己坑了。这个题目最合理的角色划分是三类:

  • 学生(来访者):注册登录、填写心理测评量表、查看自己的测评报告、使用AI倾诉助手、在线预约心理咨询师。
  • 咨询师/老师:查看名下学生的测评结果、处理预警信息、填写咨询记录、回复学生留言。
  • 管理员:学生信息管理、咨询师管理、量表题库管理、预警规则配置、数据统计看板。

功能边界一旦划清楚,你后面的表结构、接口设计、页面数量就都定了。我建议你砍掉任何跟“心理健康”主线无关的需求——比如非要做一个校园论坛或者积分商城,那是给自己找麻烦。专注把测评、AI倾诉、预警、咨询这四条链路做完整,就已经超过九成同类毕设。

1.2 为什么AI模块是“辅助”而不是“替代”

标题里带AI,是这两年毕设的明显趋势,但很多人把AI做成了“缝合怪”——随便接一个聊天接口,让用户跟机器人闲聊,就算“带AI”了。这在答辩时很容易被老师追问:“你的AI解决了什么实际问题?跟系统业务有什么关系?”

我做这个项目时的处理方式,是把AI定位为心理健康的初筛与陪伴辅助,而不是诊断工具。具体落地方案是:

  1. AI情绪倾诉:学生打开一个对话窗口,可以匿名用自然语言描述自己最近的感受,AI基于大模型能力进行共情式回复。这不是无目的闲聊,而是通过对话引导用户描述睡眠、情绪、压力、人际关系等维度。
  2. AI风险评估初筛:对话结束后,系统调用AI对整段会话内容进行结构化摘要,输出情绪倾向标签(如焦虑、抑郁倾向、愤怒等)和风险等级(低/中/高),写进测评档案。
  3. 人工兜底:一旦风险等级达到阈值,系统自动触发预警,转给心理咨询师人工介入。

这样设计的好处是:AI和业务深度绑定,不是摆设;同时在伦理上站得住脚——心理问题不能靠AI下诊断,系统身份只是“辅助筛查与陪伴”,最终决策必须由人来完成。这一点在论文里写清楚,是很大的加分项。

1.3 前后端分离的整体架构选型

这个项目我强烈推荐用前后端完全分离的结构,这也是目前SpringBoot+Vue简历项目的标准形态。整体架构可以用一句话描述:Vue3+Vite构建前端SPA,通过Axios调用后端Restful API;SpringBoot作为后端服务层,MyBatis-Plus操作MySQL数据库;Redis缓存登录态和热点数据;AI模块通过封装HttpClient调用大模型API。

前端工程负责页面渲染和路由控制,后端工程只暴露JSON接口互不干扰。开发和部署也都是独立的,前端打包成静态文件后可以丢Nginx或者直接放进后端静态目录,后端打成Jar包独立运行。

这里有个非常重要的经验供你参考:无论你用什么工具生成项目骨架,自己必须完整跑通一遍整个前后端交互链路。我见过不少同学用现成脚手架生成了代码,答辩时老师问“这个登录的token是怎么发的、存在哪里”,一句话都答不上来。项目是其次,你是否真正理解每一行的作用,才是评分的关键。

2. 技术选型的几个关键决策:SpringBoot、Vue和AI到底怎么配

这部分是很多人开工时最纠结的。你可能会看到网上有Spring Boot 2.x和3.x两个大版本,Vue有2和3两代,AI接入方式更是五花八门。我这节直接给出结论,然后解释每个选择的理由。

2.1 后端:为什么推荐SpringBoot 2.7 + JDK 8

选技术版本,第一条原则是:不要盲目追新,要追生态兼容度

我知道现在Spring Boot 3.x + JDK 17已经是主流新方向,但你注意那些热词里反复出现“springboot版本太高”这个问题,说明很多人在这上面栽过跟头。Spring Boot 3.0开始基于Jakarta EE,很多老教程、老依赖都不兼容,你搜到的资料可能跑不起来。

我的建议是:

  • Spring Boot 2.7.x,这是2.x最后一个稳定版本,生命周期覆盖时间长,网上资料最多。
  • 配套JDK 8,这是目前国内Java企业里存量最大的环境,兼容性毫无问题。
  • ORM用MyBatis-Plus,单表CRUD几乎不用写SQL,自带分页插件,能帮你节省大量时间。
  • 鉴权用JWT + Spring Boot拦截器,不要上Spring Security全家桶,毕设场景里Security的配置成本远大于收益。

如果你非要上Spring Boot 3,那一定要确认你用的MyBatis-Plus、Redis客户端、验证码工具等所有依赖都有对应Jakarta版本的starter。以我的经验,这个排查成本至少多出两三天,对赶毕设的同学不划算。

2.2 前端:Vue 3 + Vite + Element Plus的组合

Vue的生态已经全面转向Vue 3,我也建议你直接用Vue3,因为现在新的组件库和教程资料已经几乎不维护Vue 2了。具体组合是:

  • Vue 3使用组合式API(<script setup>),代码组织比Options API清晰很多。
  • Vite做构建工具,开发时热更新秒级响应,比Webpack舒服太多。
  • Element Plus做UI组件库,表格、表单、弹窗、日期选择器这些后台管理常用的组件开箱即用。
  • Pinia做状态管理,比Vuex更轻量,TS支持也更好。
  • Axios做HTTP请求,统一封装拦载器处理token和错误码。

有个热词是“vue安装及环境配置”,很多新手卡在这一步。我提醒几个关键点:Node.js版本不要装太旧的,建议18以上;npm源可以换成国内镜像,否则依赖装到天荒地老;Vite创建项目用npm create vite@latest,选Vue模板,然后npm install就行。如果你遇到node-sass报错,直接换成sass或者dart-sass,别再纠结node-sass了。

2.3 AI接入:大模型API、本地模型与自建规则怎么选

AI模块的实现方式,按工作量和答辩效果排序,我把它分成三个档次:

方案实现方式工作量答辩亮点推荐度
方案A调用大模型API(如OpenAI、国内大模型平台)最低效果最好,对话自然,容易演示
方案B本地Ollama部署开源模型(如Qwen)中等本地离线可控,突出私有化部署
方案C自建关键词规则库做应对较低创新性弱,容易暴露逻辑简单

我的结论是:优先方案A,国内大模型平台的接口文档清晰,有免费额度,申请也很方便;对话质量直接决定你答辩演示的观感。方案B适合对本地部署有额外兴趣的同学,但需要你有较好的机器配置,而且开源小模型的对话质量会差一截。

接口调用方式上,不建议用SDK,直接用RestTemplateOkHttp调HTTP接口就够了,减少依赖。核心是把API密钥放在后端配置里,不要让前端直接持有密钥——这一点答辩时被问到的概率非常高。

2.4 为什么必须先想清楚AI的Prompt设计

AI模块能不能展示出效果,90%取决于Prompt写得好不好。我见过很多人接了API就以为完事了,结果用户随便发一句“你好”,AI回了一大段心理分析,看起来非常假。

在这个项目里,我写的系统Prompt分了三层:

  1. 角色设定层:你是青少年心理健康支持助手,语气温和、不评判、不诊断、不用专业术语吓唬用户。
  2. 任务引导层:每次回复尽量引导用户描述自己的情绪状态、睡眠情况、近期压力源。
  3. 边界限制层:当用户出现自伤、自杀等极端表达时,不要继续深入回复,而是明确建议其拨打心理援助热线或尽快寻求线下帮助。

这套设计让AI既完成了陪伴功能,又完成了信息采集功能,同时还规避了伦理风险。你在论文里把Prompt设计逻辑写清楚,比贴十页源码都管用。

3. 数据库设计与核心表结构:一张表都不能乱

数据库设计是这个项目的地基,地基歪了后面所有代码都别扭。我的习惯是先画ER图再建表,关系理清楚后再写实体类。心理健康领域的数据有一个特点,就是业务状态多、层级深,表之间关联比普通“书籍管理系统”复杂,所以我下面把核心表逐一给你捋一遍。

3.1 核心表清单与设计思路

  • sys_user(用户表):用户基本信息,包括用户名、密码(bcrypt加盐加密)、角色类型、昵称、年龄、学号/工号。不要直接存明文密码,这也属于职业习惯了。
  • sys_role(角色表):学生、咨询师、管理员三种角色。可以做成用户表直接带role字段,简单项目不必拆角色权限表。
  • psy_scale(测评量表表):存放量表名称、类型(如SCL-90、SDS抑郁自评量表、SAS焦虑自评量表)、题目数量、适用年龄区间。
  • psy_question(测评题目表):题目内容、题目序号、所属量表ID、题目维度。这里注意,量表题目是要按固定顺序展示的,必须有一个sort字段。
  • psy_record(测评记录表):一次测评的会话记录,记录用户ID、量表ID、答案快照(JSON)、总分、单项均分、风险等级、测评状态。
  • psy_result(测评结果表):从记录表中按需生成,包含维度得分明细、等级判定、建议内容。冗余一些字段没关系,查询时候省事。
  • ai_chat_session(AI对话会话表):会话ID、用户ID、开始时间、结束时间、风险等级、会话摘要。
  • ai_chat_message(AI对话消息表):每条对话内容、发送方(user/ai)、原始文本、过滤标记。
  • psy_warning(预警记录表):触发预警的来源(测评/AI会话)、风险等级、处理状态、处理人。
  • psy_appointment(预约表):学生预约咨询师的记录,包含时间段、状态(待确认/已确认/已完成/已取消)。
  • psy_consult_record(咨询记录表):咨询师填写的咨询摘要、结果,关联预约表。

这里我用了psy_前缀统一心理类业务表,sys_前缀统一系统表,命名规范清晰,论文里的数据字典也好写。

3.2 测评记录表字段设计的细节

psy_record为例,很多人会设计出这样的表:

CREATE TABLE `psy_record` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `user_id` bigint(20) NOT NULL COMMENT '测评用户ID', `scale_id` bigint(20) NOT NULL COMMENT '量表ID', `score_total` int(11) DEFAULT NULL COMMENT '总分', `score_average` decimal(5,2) DEFAULT NULL COMMENT '均分', `level` varchar(10) DEFAULT NULL COMMENT '风险等级', `status` tinyint(4) DEFAULT '0' COMMENT '状态:0进行中,1已完成,2已过期', `answer_json` json DEFAULT NULL COMMENT '答案快照', `create_time` datetime DEFAULT NULL COMMENT '创建时间', `finish_time` datetime DEFAULT NULL COMMENT '完成时间', PRIMARY KEY (`id`), KEY `idx_user_id` (`user_id`), KEY `idx_scale_id` (`scale_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='测评记录表';

我特意加了status字段,作用很大:当用户做到一半退出时,记录还是0进行中,下次进来可以继续或者重新测评。这个状态机设计在答辩时是一个非常容易讲清楚的业务亮点。还有answer_json用JSON类型直接存用户每道题的选项,省掉了再做一张答案明细表的复杂度——如果老师问为什么这么设计,你可以说:“量表题目选项结构简单稳定,JSON快照可以保证每次作答的数据完整性和不可变性,查历史记录时直接读快照,不再依赖当前题目表。”

3.3 表之间的关系与关键索引

关系上核心是一张多对多关系:一个用户可以做多个量表,一个量表可以被多个用户做,这个多对多实际上是通过psy_record这张中间表来实现的,同时它自己还携带了业务信息。另外,ai_chat_sessionai_chat_message是一对多,psy_warning可以分别关联用户、测评记录或AI会话。

索引方面,最容易被忽略的是预警列表页的查询——后台要按处理状态、风险等级、时间范围筛选,建议在psy_warning上建组合索引(status, level, create_time)。如果你不做索引,数据量到几万条以后页面会明显变慢,而这件事在项目答辩前一晚才被发现的话,你只能在报告里硬着头皮写“查询优化”然后心虚地蒙混过关。

3.4 敏感数据与学生隐私的处理

心理健康系统里全是隐私数据,这是这个项目区别于普通管理系统的重要特征。我在设计时做了三件比较值得写进论文的事:

  1. 密码存储:使用BCrypt加盐哈希,绝不明文入库。
  2. 日志脱敏:正常日志里不打印测评原始答案和AI完整对话内容,只打印用户ID和状态。
  3. 前端权限控制:路由级拦截器保证学生只能看自己的测评记录,老师看不到未授权学生的详情。

你写论文的时候,隐私设计单独开一节来写,会让老师觉得你做项目不是为了交差,而是真对业务有思考。

4. 核心功能实现与AI集成:从登录到风险评估的完整链路

骨架搭好之后,核心就是把业务跑通。我按照用户从登录到完成一次AI倾诉的路径,把关键实现步骤拆开讲。

4.1 登录鉴权:JWT + Redis的双重保险

登录模块看起来简单,但它是整个系统的门面,也是技术面试被问得最多的点。我采用的方案是:

  1. 用户提交用户名密码,后端校验通过后生成JWT token,签名密钥放在application.yml里。
  2. 把token写入Redis,设置过期时间(比如2小时),同时返回给前端。
  3. 前端把token存在localStorage,每次Axios请求通过拦截器在Header里带Authorization: Bearer <token>
  4. 后端写一个JwtInterceptor,在WebMvcConfig里注册拦截器,放行登录接口和静态资源,其余接口统一校验。

Redis在这里解决的核心问题是登录状态的服务端可控性。JWT本身是无状态的,但万一用户被管理员禁用,token在过期前仍然有效;引入Redis后,管理员禁用用户时直接删掉Redis里的key,token立即失效。这个“无状态token + 有状态缓存”的组合,在答辩和面试里很有内容可讲。

核心代码大致这样:

@Component public class JwtInterceptor implements HandlerInterceptor { @Autowired private StringRedisTemplate redisTemplate; @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token = request.getHeader("Authorization"); if (StringUtils.hasText(token) && token.startsWith("Bearer ")) { token = token.substring(7); // 校验签名和有效期 Claims claims = JwtUtil.parseToken(token); if (claims != null) { // 检查Redis中是否存在该token String redisKey = "login:token:" + claims.get("userId"); if (token.equals(redisTemplate.opsForValue().get(redisKey))) { request.setAttribute("userId", claims.get("userId")); request.setAttribute("role", claims.get("role")); return true; } } } response.setStatus(401); response.getWriter().write("{\"code\":401,\"message\":\"未登录或登录已过期\"}"); return false; } }

一个容易被忽略的坑是:前端路由守卫里你做了跳转,后端接口也要做鉴权,两边都要配,不能只做一边。不然懂技术的人直接通过接口地址就能绕过你的页面限制。

4.2 量表测评:完整的状态机与分值计算逻辑

测评模块是整个系统的业务核心,比AI模块还重要,因为心理健康管理系统的本质就是“量表工具的信息化”。

核心流程是:用户点击开始测评,后端创建一个psy_record记录,status设为0;前端按题目顺序逐题展示,用户每选一项就提交答案到后端更新answer_json;最后一题完成后点击提交,后端执行计分逻辑:

  1. 按量表类型取出总分计算规则。比如SDS抑郁自评量表,20个题目,每题1-4分,需要把其中10道反向计分的题目分数反转(1变4、2变3、3变2、4变1)。
  2. 计算总分,再按公式换算为标准分。SDS标准分 = 原始分 × 1.25。标准分53-62为轻度抑郁,63-72为中度,73以上为重度。
  3. 根据风险等级生成建议文本,写进psy_result,同时更新psy_record的status为1。

反向计分这个细节是最容易被新手忽略的,但它恰恰说明你懂心理学量表的基本规则。我在论文的业务逻辑设计里专门画了一个流程图来表达计分处理流程,这也是答辩时比较出彩的地方。

4.3 AI情绪倾诉模块:对话、摘要、风险识别一条龙

这是整个项目最亮眼的部分,也是标题里“AI”的落点。我的实现路径是这样的:

前端是一个聊天页面,左侧是历史会话列表,右侧是聊天窗口。用户发送消息后,后端先把用户消息入库,同时将最近10轮对话历史拼接成上下文,带上系统Prompt一起发给大模型API。大模型返回结果后,再存入ai_chat_message表。

为了不让用户等太久,AI接口的响应时间要控制好。我建议调用API时设置连接超时5秒、读取超时30秒,并且使用流式输出(SSE),这样字是逐个蹦出来的,用户体感上比干等十几秒再一次性出结果要好很多。前端用fetch的原生ReadableStream或者EventSource都能接收流式数据,难度不大但体验提升明显。

对话结束后,用户点击“结束倾诉”,后端把整段会话文本送给AI做二次分析,Prompt大致这样设计:

你是一个心理健康风险初筛引擎。请分析以下对话记录,输出JSON格式结果: 1. emotion_tags: 情绪标签数组,从[焦虑, 抑郁, 愤怒, 恐惧, 孤独, 平静, 积极]中选择 2. risk_level: 低/中/高 3. summary: 60字以内的对话摘要,客观描述用户表达的主要内容 4. suggestions: 给咨询师的建议要点 对话记录: {{session_text}}

这里有个经验:一定要让AI输出结构化JSON,然后再用代码解析出来,不要把摘要、标签这些逻辑让AI自由发挥。结构化数据可以直接入库、直接展示在看板上,是“可用”和“能跑”的分界线。

4.4 预警机制与WebSocket实时推送

预警是这个系统的“安全兜底”,业务逻辑上很清晰:测评结果风险等级为高,或者AI会话分析风险等级为高,就自动生成一条psy_warning,同时通过WebSocket推送给相关咨询师。

WebSocket实现起来不复杂:后端用Spring的WebSocketHandler维护一个会话池,key是咨询师用户ID;预警触发时找到对应用户,sendMessage推过去。前端在咨询师工作台页面建立连接,收到新预警就弹窗提醒。这里注意线上部署时WebSocket要配合Nginx的proxy_set_header UpgradeConnection配置,否则长连接会被截断,后端本地调试完全没问题,一部署就掉线。这个问题我排了整整一天,当时差点把电脑砸了。

预警处理的闭环也很重要:咨询师查看预警后,可以标记“已处理”,填写处理方式(联系学生、安排面谈、转介等)。这个闭环一完成,整个系统的业务流程就是完整的“发现-预警-干预-记录”链路。

4.5 数据看板:用ECharts把统计分析可视化

管理员和学校心理老师最关心的不是单个学生的情况,而是整体趋势。看板页面我用ECharts做了四个核心图表:

  1. 测评人数趋势图(折线图,按周汇总)
  2. 心理状态分布饼图(各风险等级占比)
  3. 量表使用次数柱状图
  4. 预警处理率环形图

后端要提供对应的统计接口,用MyBatis-Plus的QueryWrapper或者写SQL聚合都行。比如按周统计测评人数,核心SQL是:

SELECT DATE_FORMAT(create_time, '%Y-%u') as week, COUNT(*) as cnt FROM psy_record WHERE status = 1 GROUP BY week ORDER BY week

看板功能不用做得特别重,但一定要有,因为它是老师一眼就能看出系统价值的页面,也是你论文里“应用效果”章节的截图素材。

5. 文档和演示视频怎么准备:毕设答辩的隐形加分项

项目标题里“+文档+指导搭建视频”不是随便加的。很多人代码写得不错,但不会展示自己,最后分数反而不如一个代码一般但讲得清楚的同学。这部分我重点说说文档结构和视频准备。

5.1 论文文档的结构与写作顺序

论文不要等到代码写完才动笔,而是边做边写。我推荐的结构是:

  • 第一章 绪论:背景意义、国内外研究现状、研究内容
  • 第二章 相关技术介绍:SpringBoot、Vue、AI大模型API、MySQL、Redis等
  • 第三章 需求分析:可行性分析、功能需求、非功能需求,配合用例图
  • 第四章 系统设计:总体架构图、功能模块设计、数据库设计(ER图 + 表结构)
  • 第五章 系统实现:按功能模块贴核心代码 + 运行截图,重点突出AI倾诉和预警模块
  • 第六章 系统测试:功能测试用例表、测试结果、部分性能测试说明
  • 第七章 总结与展望:总结做的内容和收获,提出未来的改进方向

论文里图比文字重要。我建议你至少准备:系统架构图、功能结构图、业务流程图(测评流程、预警流程)、ER图、用例图、系统部署图。不用追求画得多专业,但一定要清晰。用ProcessOn或者draw.io画,导出SVG插进Word里,格式基本不会乱。

5.2 演示视频怎么录才有效果

指导搭建视频最忌讳的是从头到尾沉默地一通操作,观众完全不知道你在干嘛。正确的做法是:边操作边讲解关键点,录屏软件用OBS或者EV录屏,每段控制在3-5分钟,按顺序录以下几段:

  1. 环境准备:JDK、Node、MySQL、Redis的安装与配置。
  2. 后端启动:IDEA导入SpringBoot项目,修改数据库连接配置,启动后访问Swagger或直接调试一个接口。
  3. 前端启动:Vite启动开发服务器,配置Axios代理,打开登录页。
  4. 核心流程演示:登录、填写测评、查看报告、AI倾诉、预警处理,每一步都演示实际效果。
  5. 打包部署:前端npm run build,后端mvn package,讲清楚怎么把前端静态资源放到后端或Nginx里。

录视频有一个很实在的作用:你在录的过程中会遇到各种环境问题(端口占用、依赖缺失、路径错误),这些问题在你正式演示前都暴露并解决一遍,相当于提前演练了答辩环境。我当年就是因为录视频时发现一个接口在部署环境下跨域配置失效,才避免了答辩现场翻车。

5.3 答辩防问清单:高频问题提前准备

根据我自己的经历和帮人模拟答辩的经验,老师针对这类项目最常问的问题就这几个:

  1. 为什么选这个课题?回答方向:青少年心理问题有现实需求 + 信息技术手段能辅助心理筛查 + 结合AI可以做一些智能化的尝试。
  2. AI模块是怎么实现的?用的什么模型?回答方向:调用大模型API,设计系统Prompt实现情绪陪伴和对话后结构化分析。
  3. 为什么不用Spring Security而是自己写拦截器?回答方向:项目角色少、接口数量有限,轻量级自定义实现更容易控制和管理;如果项目后续扩展复杂权限体系,再引入Security不迟。
  4. 系统安全性怎么保障?回答方向:BCrypt加密、JWT+Redis、接口参数校验、隐私数据脱敏。
  5. 如果上线商用,你觉得最大的挑战是什么?回答方向:数据隐私合规、AI的伦理边界、专业咨询师资源对接。

每个问题都要能展开讲两三分钟,不要背稿,而是用自己的话说。你先理解了才能讲得自然。

6. 常见问题与排查实录:那些热词背后真实踩过的坑

最后这部分,我把开发过程中最常遇到的几个问题和排查思路整理成清单。这些热词不是空穴来风,几乎每个都是真实的坑。

6.1 SpringBoot版本太高引发的连锁问题

如果你用SpringBoot 3.x,最容易踩的坑是:javax.servlet全部变成jakarta.servlet,很多老依赖失效;MyBatis-Plus需要3.5.3及以上版本才支持SpringBoot 3;spring-boot-starter-validation坐标也都变了。

我建议你新建项目时直接选SpringBoot 2.7.x,可以省去一大半环境问题的排查时间。如果已经用了3.x也别慌,把你的依赖版本逐一对照官方兼容矩阵升级一遍,基本也能跑通,只是要花时间。

6.2 Vue打包后布局异常

本地开发一切正常,执行npm run build后部署到服务器,发现页面布局乱了、图片加载不出来。这是典型的静态资源路径问题。Vite默认base/,如果你的应用部署在根路径下没事,但部署在子目录(比如http://ip:8080/health/)就必须在vite.config.js里配置:

export default defineConfig({ base: '/health/', // 修改为你的部署子路径 plugins: [vue()] })

另一个常见坑是路由用createWebHistory模式,部署到服务器后刷新页面就404。这是因为刷新时Nginx找不到对应的文件路径,需要把路由回退到index.html。解决方案有两个:一是改用createWebHashHistory(但URL里会有#号);二是在Nginx配置里加:

location / { try_files $uri $uri/ /index.html; }

这两种方案你至少得会一种,不然部署演示时就是一个大坑。

6.3 AI接口超时与数据格式问题

大模型API有时候响应很慢,如果前端设置超时时间太短,就会出现“AI已读不回”的假象。我建议:

  • 后端调用AI接口时设置连接超时5秒、读取超时60秒。
  • 前端在用户发送消息后,立即显示“对方正在输入...”的动画,而不是让按钮一直转圈。
  • 如果接口返回必须解析JSON,一定要try-catch包住解析逻辑,AI偶尔会输出非严格JSON格式的内容,解析失败时给用户返回一条兜底消息:“我刚才走神了,你可以再说一遍吗?”

6.4 播放m3u8格式的心理课程视频

如果系统里补充了“心理微课”模块,你可能会遇到视频上传后无法播放的问题。m3u8是HLS流媒体格式,浏览器不能直接<video src="xxx.m3u8">播放,需要引入hls.js或者video.js。前端用hls.js的方式很简单:

import Hls from 'hls.js' if (Hls.isSupported()) { const hls = new Hls() hls.loadSource(videoUrl) hls.attachMedia(videoElement) }

不涉及视频播放器的同学,这段可以跳过;涉及的话,不要让播放器问题卡你超过半天,直接用现成方案。

6.5 端口占用、Redis连接失败等基础问题速查

我把几个高频的环境问题整理成了速查表,方便你排查:

现象原因解决办法
后端启动报8080端口被占用上次服务没关掉netstat -ano | findstr 8080找到PID后kill,或用server.port换端口
连接Redis失败Redis服务未启动,或配置地址不对本地先启动Redis服务,检查hostport配置
MySQL无法连接时区问题或密码加密规则连接URL加serverTimezone=Asia/Shanghai
前端请求接口404后端没启动,或代理配置错了检查Vite的server.proxy配置,确认后端端口一致
上传文件失败大小限制SpringBoot配置文件里调大spring.servlet.multipart.max-file-size

做项目本来就是个发现问题、解决问题的过程,遇到bug不要慌,按报错信息一层层拆,绝大多数问题都能在搜索引擎里找到答案。我个人的心得是:当你把这些问题排查完一遍,你学到的比看十遍教程都多。

6.6 一个容易被忽略的细节:环境隔离

如果你在实验室的电脑和宿舍的电脑之间来回切换开发,强烈建议把配置文件的变量抽出来,用application-dev.ymlapplication-prod.yml两个环境。本地开发连本机的MySQL和Redis,部署时用maven的profile指定prod环境。这个习惯不仅避免了你每次换电脑都要改配置,写论文的时候还能在技术选型里加一句“支持多环境配置”,又是一个小小的加分项。

最后再多说一句,做这个项目最忌讳的是“收藏了当做了”。你不需要把每个功能都做成完美,但一定要亲手跑通主链路。当你第一次完整地登录、测评、AI倾诉、收到预警、处理完预警,那种成就感会让你觉得之前的踩坑全是值得的。如果搭建过程中遇到具体问题,带着报错信息去查、去试、去解决,这本身就是做项目最大的收获。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/16 3:53:12

磁盘I/O %util飙高?从iostat到根因定位的实战排查指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/9/16 3:51:44

AI生成代码时代,Git冲突手动解决最短流程:merge/rebase实战

今天早上我打开合并请求&#xff0c;红色 conflict 提示铺了 37 个文件&#xff0c;拉到第一个文件一看&#xff0c;真正的业务改动只有两行&#xff0c;剩下两百多行全是 AI 助手格式化、重排 import、顺手重构带来的噪音 diff。Git 冲突、merge、rebase 这几个词谁都会背&…

作者头像 李华
网站建设 2026/9/16 3:50:49

Docker部署SRS:快速搭建实时流媒体服务

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/9/16 3:50:18

试卷手写擦除全流程:数据合成、U-Net训练与OCR评估

简介&#xff1a;基于深度学习的试卷手写文字擦除毕业设计资料包&#xff0c;面向计算机视觉方向学生与毕业设计开发者&#xff0c;聚焦去除图像中的手写文字并保留背景信息。整套资源共29个文件&#xff0c;以22个Python源码为核心&#xff0c;覆盖模型结构&#xff08;如SA-G…

作者头像 李华
网站建设 2026/9/16 3:49:23

UE5编译报错Could not be compiled?从日志到环境全链路排查指南

你肯定见过这个红色大边框提示&#xff1a;“UE5 Could not be compiled. Try rebuilding from source manually.” 不少朋友第一次看到时直接懵了&#xff0c;明明刚才还好好的&#xff0c;怎么突然就编译不过了呢&#xff1f;尤其当你正赶一个移动端策略游戏原型、或者刚从代…

作者头像 李华
网站建设 2026/9/16 3:48:52

Agent插件生态构建指南:从协议设计到安全分发实践

这几年做Agent开发的朋友应该都有同一种体感&#xff1a;单机版Agent已经不够玩了。你把记忆、工具调用、多步规划这些能力全塞进一个Agent里&#xff0c;折腾半天&#xff0c;场景还是那么几个&#xff0c;边界还是卡在那里。真正的分水岭&#xff0c;是当你开始琢磨“怎么让别…

作者头像 李华