基于SpringBoot+Vue的高校心理健康服务平台(AI心理分析、websocket即时通讯)

发布于:2025-07-05 ⋅ 阅读:(23) ⋅ 点赞:(0)

文档包含用例图、系统架构图、系统功能结构图、实体属性图、总体e-r图。

🎈系统亮点:AI心理分析、websocket即时通讯;

一.系统开发工具与环境搭建

1.系统设计开发工具

使用Java编程语言的Spring boot框架

项目架构:B/S架构

运行环境:win10/win11、jdk17

前端:

技术:框架Vue.js;UI库:ElementUI;

开发工具:Visual Studio Code;

后端:

技术:Java语言、mybatis plus、Spring boot框架;

开发工具:IDEA 2023.3.3版本;

数据库:

数据库:mysql5.7/8.0

数据库工具:Navicat12版本;

二.系统实现(部分截图)

2.1 开发平台搭建

2.1.1 数据库搭建

通过MySQL进行搭建高校心理健康服务平台的数据库,根据三种角色,学生、心理老师、管理员的功能模块一共设计了28张表结构,包含系统用户表、健康知识表、健康知识收藏表、健康知识类型表、封面表、收藏心理老师表、评论表、判断题型表、留言反馈表、消息通知表、多选题表、心理老师表、预约心理老师记录表、心理老师预约配置表、心理老师评价表、测评题目表、测评题目明细表、单选题表、学生表、主观题表、系统标签表、系统通知表、通知分类表、测试表、用户提交答题表、用户提交答题明细表、会话集合表、聊天消息表。最终创建完如图5-1所示。数据库关系图如图5-2所示。

图5-1 数据库创建完成后

图5-2 数据库关系图

2.1.2 后端搭建

启动IntelliJ IDEA选择项目JDK版本为17,进行创建一个SchoolPsychologicalServiceSite.springboot名称的项目,src/main/java是源代码主目录,用于存放项目的业务代码,系统采用经典的MVC分层架构设计,将系统分为表现层,业务逻辑层,数据库访问层和实体层,各层之间职责明确,降低了代码的耦合度,提高了系统的可维护性和可扩展性。控制器层用来接收前端发送的HTTP请求,进行参数校验、调用业务逻辑层方法,并将处理结果返回给前端。业务逻辑层进行实现系统的核心业务逻辑,调用数据访问层的方法进行数据的增删改查操作。数据库访问层负责与数据库进行交互,执行SQL语句,完成数据的持久化操作。实体层定义系统的实体类,对应数据库中的表结构。后端项目结构图如图5-3所示。

图5-3 后端项目结构图

2.1.3 前端搭建

高校心理健康服务平台的前端项目使用Vue2框架,使用脚手架进行搭建前端项目,在vue.config.js中配置项目相关信息,如代理服务器、资源路径等。package.json记录项目依赖和脚本命令。src下的api文件存放封装的POST请求接口,assets进行存储系统的静态资源,如图标、图片、字体文件等。components放置系统可复用的Vue组件,如按钮组件、分页组件、卡片组件等,提升开发效率和代码复用性。router/index.js中配置不同路径对应的组件。views存放视图组件,Admin和Front文件夹分别存放管理员、心理老师和用户界面相关组件。404.vue文件处理404页面,ForgetPassword.vue实现忘记密码功能,Login.vue和Register.vue分别负责用户登录和注册。前端项目结构图如图5-4所示。

图5-4 前端项目结构图

2.2 学生模块

2.2.1 注册模块

学生进入/Register注册界面,输入用户名、邮箱、手机号码、密码、二次确认密码,并通过图形验证码,进行注册,前端会进行非空验证,保证所输入的信息都不为空。并使用正则表达式验证所输入的手机号码是否合规,邮箱格式是否正确,输入的密码是否大于6个字符。都通过后,前端将学生输入的信息作为参数传递给/AppUser/Register接口,进行查询用户表里是否存在用户名、邮箱、手机号信息,不存在,则调用数据库的增加方法,进行注册学生。前端接收到接口返回的信息,进行跳转界面到登录/Login界面。注册界面图如图5-5所示。

图5-5 注册界面图

2.2.2 登录模块

学生进入登录/Login界面,会调用/Select/RoleType接口,查询数据库用户表的所有角色信息,并使用单选框的形式展示。使用el-form组件创建了一个登录表单,引用名为 loginForm,绑定了表单数据formData和验证规则 rules。输入账号、密码,并选择学生角色,输入正确的图形验证码进行登录,触发LoginBtn点击事件,首先验证表单的validate 方法判断输入的信息是否有效,有效则传递formData给/User/SignIn接口,通过输入的参数查询数据库中用户表中是否存在该记录,若可以查到该学生信息,将生成一个JWT。登录界面图如图5-6所示。

图5-6 登录界面图

2.2.3 首页模块

学生登录系统后,进入首页/Front/Home界面,该界面进行展示广告轮播图、心理资讯板块和心理老师展示板块。广告轮播图使用使用el-carousel组件进行实现。调用前端this.BannerListApi()方法,通过封装的POST方法进行调用后端接口/Banner/List,查询数据库封面表进行获取广告轮播图数据,将获取的数据赋值给BannerDataList。当BannerDataList有数据,前端会循环展示轮播图,包括图片和标题;若BannerDataList为空,则显示默认图片和“欢迎访问”。广告轮播图下方是心理资讯,组件创建时,就会调用this.ArticleListApi()方法,该方法会调用后端方法/Article/List获取相关心理资讯信息,查询心理咨表的数据,将获取的信息存储在ArticleDataList集合,进行展示心理资讯的作者、发布时间、阅读量。首页界面图如图5-7所示。

图5-7 首页界面图

2.2.4 心理知识模块

学生可以查看心理知识,进入心理知识/Front/ArticleList界面,允许学生通过关键词进行搜索心理知识,调用/Article/List,传递学生输入的关键词查询数据库的心理知识表进行搜索,通过模糊查询,查询是否存在该条心理知识信息,存在,则返回该心理知识信息进行展示。心理知识界面图如图5-8所示。

图5-8 心理知识界面图

5.2.5 心理咨询老师列表模块

学生点击心理咨询导航栏,进入/Front/PsychologistAppointList心理咨询界面,进行选择预约日期,点击不同的日期,将AppointDate预约日期传递给/PsychologistAppointSetting/PsychologistAppointList后端接口,获取心理咨询老师PsychologistAppoint表的数据,展示心理老师的服务人数、已预约人数、剩余预约人数等信息。学生可以进行收藏喜欢的心理咨询老师,调用/CollectPsychologist/ToggleCollect接口,先查询数据库心理咨询师收藏表是否存在该用户收藏心理老师的这条记录,若查询到该条记录是已收藏,将改为取消收藏;未收藏,则改为收藏。心理老师列表界面如图5-9所示。

图5-9 心理老师列表界面

5.2.6 预约心理咨询老师模块

学生通过心理老师列表获取可预约的心理老师,进入/Front/BookPsychologist界面,调用/Psychologist/Get获取心理老师详情信息,通过心理老师Id查询心理老师表数据,将返回的内容保存在Psychologist中,当Psychologist数据存在时显示心理老师头像、姓名、职位、专长、擅长疾病。可预约的时间通过el-table展示预约时间设置数据,包含起始时间、截至时间、余票,每一行数据有“预约”按钮,点击触发ToAppoint方法并传入该行数据,跳转/Front/ToAppoint界面,进行预约,输入备注,调用/PsychologistAppointment/ToAppoint方法进行预约,声明预约心理咨询师老师实体,将预约记录的信息赋值到心理咨询师老师实体,调用数据库的insert方法进行新增。预约成功后,跳转到/Front/UserCenter?currentMenu=MyPsychologistAppointment个人中心的我的预约界面,查看所有的预约记录,查询订单预约表信息,获取数据返回给前端。预约心理老师界面图如图5-10所示。

图5-10 预约心理老师界面图

2.2.7 心理测评模块

学生可以通过心理测评列表,前端调用Test/List接口,通过查询Test心理测评表信息。得到item.IsFinish的值,采用Vue的v-if和v-else指令,如果为false,则显示“进入测评”按钮;值为true,则显示“再次测评”按钮。选择心理测评测评题目,进行测评。心理测评列表界面如图5-11所示。

图5-11 心理测评列表界面图

学生选择好心理测评测评题目后,跳转到/Front/QuestionnaireAnswer测评界面,并将通过TestId、QuestionnaireId、UserAnswerId参数传到此界面。心理测评测评题目包含了四种题型,单选题、多选题、判断题、主观题。通过封装好的SingleChoiseQuestion、MultipleChoiceQuestion、JudgmentQuestion、SubjectiveQuestion组件进行展示,学生答完所有的题目,可进行提交,调用/UserAnswer/Sumbit接口进行请求,调用UserAnswerMapper查询提交记录的信息。通过返回的数据解构Success 字段,判断请求是否成功。成功后,则通过this.$router.replace方法替换当当前路由,从而实现页面跳转,跳转到/Front/UserCenter?currentMenu=UserAnswerList,可以进行查看学生所有的测评记录,查询UserAnswer用户提交答题记录表获取测评记录进行展示。测评测试界面如图5-12所示。

图5-12 测评测试界面图

2.2.8 我的测评模块

通过调用/UserAnswer/List接口获取测评列表,查询数据库UserAnswer表数据,并通过自定义的PaginationBox组件进行分页展示测评记录,通过插槽接收分页数据data。每条测评记录都会显示问卷标题、类型标签,和测评状态。展示测评的开始时间、提交时间,测评的总题量,展示所有题型的题数,总得分,以及个人得分信息。学生可以通过/UserAnswer/Get接口查看个人的测评记录,通过用户提交答题Id查询用户提交答题表的数据进行展示。也可以进行心理分析,通过调用/UserAnswer/UserPsychologicalAnalysis进行心理分析,提取测评的基本信息,如标题、ID、提交时间、总分等。根据问卷总分和用户实际得分计算得分百分比,评估用户的心理健康状态。分别对单选题、多选题、判断题和主观题进行分析,并给出相应的分析。对每个题目的回答进行详细分析,包括题目内容、用户答案、正确答案、得分等。根据得分百分比和用户的回答生成心理健康建议。根据得分百分比判断用户是否需要专业咨询,并给出相应的建议。我的测评界面如图5-13所示。

图5-13 我的测评界面图

系统首先依据路由参数,尝试从本地存储中获取测评提示词或已生成的分析结果。若仅获取到测评提示词,而未找到对应的分析结果,系统将自动触发startAnalysis方法,启动AI分析流程。为实现与AI模型的交互通信,系统利用TTSRecorder类实例化bigModel对象。通过SendMessage方法,将包含系统指令以及用户测评结果的提示信息发送至AI模型。AI模型处理后返回分析内容,经由MessageCallBack函数进行处理,在处理过程中,系统实时更新并累积显示分析结果,待分析结束后,将完整的分析内容存储至本地存储。若从本地存储中成功获取到已有的分析结果,则直接进行加载展示。展示过程中,分析结果以结构化的形式呈现。AI心理分析界面图如图5-14所示。

图5-14 我的测评界面图

2.2.9 我的预约模块

学生可以进入个人中心,我的预约/Front/UserCenter?currentMenu=MyPsychologistAppointment界面,根据用户Id查询预约记录表数据,该界面会提醒学生,若要取消预约,需要提前2小时进行取消,否则取消无效;当超时10分钟后,会自动进行取消预约。通过卡片的方式展示预约的记录,分别展示排队号、所预约的心理老师信息、联系电话等信息。状态为待赴约状态下,学生可以进行取消,在取消的时候,将会提醒学生“你确定要取消预约吗,一个月内只能取消3次”。将调用/PsychologistAppointment/UserCancel接口进行取消操作,修改预约记录表信息,更改状态为“已取消”。当服务完成后,预约订单状态为完成,学生可以根据自己的情况,给心理老师进行评价,选择服务评分,填写评价内容,调用/PsychologistComment/CreateOrEdit接口,声明一个心理老师评价实体,将用户输入的评价保存在该实体,调用数据库的新增方法进行新增评价。我的预约界面图如图5-15所示。

图5-15 我的预约界面图

2.2.10 反馈申请模块

学生可以通过反馈申请模块向系统提出自己的建议,输入反馈标题以及反馈内容,进行提交,调用/LeaveFeedBack/CreateOrEdit接口,声明反馈申请实体,将内容赋值给反馈申请,调用数据库的新增方法。新增成功后,前端界面将会跳转到/Front/UserCenter?currentMenu=MyLeaveFeedBackList界面,查看学生提出的反馈申请列表,可以查看反馈申请的状态,支持进行编辑和删除。反馈申请界面图如图5-16所示。

图5-16 反馈申请界面图

2.2.11 通知模块

学生进入通知/Front/SysNoticeList界面,调用/SysNotice/List接口获取系统通知列表,查询数据库SysNotice系统通知表,并进行分页展示。进行for循环接口返回的数据,为每一个通知信息生成一个 <el-card> 组件,展示通知信息的标题、内容、发布时间。绑定了点击事件,当用户进行点击标题或者内容,会调用父组件中的 ToDetail 方法,并将通知信息 Id 作为参数传递进去,用于跳转到通知详情页面。通知界面如图5-17所示。

图5-17 反馈申请界面图

2.3 心理咨询老师模块

2.3.1 测评题目模块

心理咨询老师可以进行组合测评题目,进行新增测评题目,输入测评题目的标题、小标题、测评题目标签、选择是否限时,以及测评的分钟数,进行提交,将输入的input参数传递给/Questionnaire/CreateOrEdit接口,进行新增测评题目。新增成功后,可以进行组题,点击组题,进入组题/Admin/CreateOrEditQuestionnaireDet界面,使用 Element UI组件构建页面布局。包含卡片式的标题栏,展示选项卡、保存按钮以及题目总分和各题型统计信息。下方分为左右两部分,左侧是固定的题目列表,通过折叠面板展示不同题型(单选题、多选题、判断题、主观题)的题目,可进行搜索和勾选操作;右侧根据题目类型动态渲染不同的题目组件。通过 $Post 方法发送HTTP请求获取各题型的题目列表和问卷题目明细列表。handleSearch 用于处理搜索操作;各题型的 handleXXXQuestionsChange 方法在用户勾选或取消勾选题目时调用,通过 updateQuestionnaireList 方法更新问卷题目明细列表,实现添加和移除题目操作。handleMoveUp 和 handleMoveDown 分别用于将题目上移和下移,通过改变问卷题目明细列表中题目的顺序实现排序功能。测评题目界面图如图5-18所示。

图5-18 我的测评界面图

2.3.2 判断题模块

心理老师可以管理判断题,为判断题进行增删改查操作,点击新增,输入判断题题干、分类、选项答案与解析,调用/JudgmentQuestion/CreateOrEdit进行新增,当判断题需要更改时,选中判断题,调用/JudgmentQuestion/Get接口获取判断题的原始数据,进行更改,传递判断题ID进行调用/JudgmentQuestion/CreateOrEdit进行修改。当不再需要改判断题进行测试时,可以选择进行删除操作。判断题管理界面如图5-19所示。

图5-19 判断题管理界面图

2.3.3 心理测评模块

心理老师进行新增心理测评,添加心理测评标题、测评题目(测评题目),选择有效测评时间、选择是否随机打乱内容,调用/Test/CreateOrEdit接口进行新增心理测评,需要等待管理员进行审核,审核成功后,才会展示给前台界面,学生可以进行心理测评。心理老师可以通过标题、测评题目等信息调用/Test/List进行搜索相关测评信息。根据实际情况,决定要删除该心理测评,点击删除按钮,会有一个提示框提示“你确认要删除吗?”,进行二次确认,防止心理老师删除错误。心理测评界面图如图5-20所示。

图5-20 心理测评界面图

2.3.4 学生咨询模块

学生和心理老师可以进行即时通讯聊天。组件挂载时,调用 InitSelectWechatUser 方法获取好友列表,若路由参数中包含要聊天的好友 ID,则自动选中该好友并获取与其的聊天记录。聊天模块左侧展示心理老师的好友列表信息,点击好友头像,右侧聊天窗口展示与该好友的聊天记录。好友发送的消息在左侧,心理老师发送的消息在右侧。通过WebSocket 监听消息,收到聊天消息时,将消息添加到聊天记录列表,并自动滚动到聊天记录底部,便于用户查看最新消息。学生咨询界面图如图5-21所示。

图5-21 学生咨询界面图

2.3.5 测评情况模块

心理老师可以查看学生提交的测评回答情况,进入该界面,调用/UserAnswer/List接口获取具体信息,包含联系电话、测评计划、得分情况,不同题型的得分情况等信息。点击回答情况按钮,调用/UserAnswer/Get接口获取学生的答题情况,单选题、多选题、判断题这三种题型,系统会自动进行判断得分,对于主观题,心理老师要根据学生的回答情况进行打分,对于每一道题进行打分,都会进行调用/UserAnswerDet/CreateOrEdit接口,进行汇总分数。测评情况界面图如图5-22所示。

图5-22 学生咨询界面图

2.3 管理员模块

2.3.1 反馈管理模块

管理员需要进行管理学生提交的反馈信息,进入该界面,通过POST请求调用/LeaveFeedBack/List进行获取所有的反馈信息,包含反馈标题、反馈内容、反馈人等信息。管理员进行处理反馈信息,输入回复内容,进行处理,调用/LeaveFeedBack/CreateOrEdit接口进行处理,修改该反馈信息的回复内容、处理人、已经是否处理。处理成功后,关闭处理框,进行重新刷新该反馈列表信息。反馈管理界面图如图5-23所示。

图5-23 反馈管理界面图

2.3.2 排班管理模块

管理员可以为心理老师进行排版,选择心理老师、预约的日期、预约的起始时间以及服务的数量信息,进行排班处理,调用/PsychologistAppointSetting/CreateOrEdit进行新增排班记录。学生就可以预约该心理老师。当有时间变动时,管理员可以进行修改或者删除排班信息。排班管理界面图如图5-24所示。

图5-24 排班管理界面图

2.3.3 工作统计模块

进入工作统计/Admin/ReceptionEchart界面,系统使用Echarts实现为管理员展示心理老师服务人次图,调用/PsychologistAppointment/ReceptionEchart获取数据,从数据库中查询所有的心理老师信息,利用PsychologistAppointmentMapper的selectList方法查询心理咨询预约记录,筛选出预约状态为完成或者待赴约的记录。工作统计界面图如图5-25所示。

图5-25 工作统计界面图

2.3.4 健康知识管理模块

管理员可以进行管理健康知识模块,审核心理老师发布的健康知识,通过/Article/Get获取检查健康知识,并健康知识的内容进行分析,选择审核状态和输入审核结果,调用/Article/CreateOrEdit接口进行修改审核状态。当审核成功后,学生可以进行浏览健康知识信息;审核失败,则学生将不会看到该条健康知识信息。管理员也可以进行删除该健康知识信息。健康知识管理界面图如图5-26所示。

图5-26 健康知识管理界面图

2.3.5 心理老师管理模块

管理员具备对心理老师信息的全面管理权限,能够执行增删改查核心操作。管理员可新增心理老师信息,录入姓名、职工号、职称、专业特长等详细资料,调用/Psychologist/CreateOrEdit接口,进行新增心理老师信息,为高校心理健康服务平台补充心理老师资力量;管理员可以对不再任职的心理老师信息进行删除,选择对应的心理老师进行删除,调用/Psychologist/Deleted接口进行删除心理老师,保证系统数据的准确性和有效性;允许管理员根据实际情况,心理老师职称升职,将会及时为心理老师更新职称。心理老师管理界面图如图5-27所示。

图5-27 心理老师管理界面图


网站公告

今日签到

点亮在社区的每一天
去签到