🙊作者简介：多年一线开发工作经验，分享技术代码帮助学生学习。自有计算机毕设的工作室团队，专注计算机毕设开发、定制、远程、文档编写指导等。

🍅 查看主页更多项目 | 计算机毕设工作室 🍅

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

🍅 Java毕设项目精品实战案例《2000+套》🍅 

⬇️文章末尾获取联系方式，需要源码+毕设论文或者演示视频可以联系⬇️

⚡感兴趣大家可以点点关注收藏，后续更新更多项目资料。⚡          

项目运行演示

项目功能简介

个人健康管理系统（源码+数据库+论文+答辩ppt一整套齐全）java开发springboot+vue框架javaweb，可做计算机毕业设计或课程设计

本系统分为管理员、用户两个用户角色。

用户功能：
1. 注册登录：填写用户名、密码、姓名等信息完成注册，通过账号密码登录系统。
2. 健康相关查询：搜索食物名称、健康知识标题，查看食物营养成分、健康知识详情，可收藏、评论。
3. 健康管理：记录饮食、运动数据，填写个人健康信息（身高、体重、心率等），进行BMI计算，查看健康评估结果。
4. 智能咨询：通过AI助手咨询健康营养问题，获取个性化建议，支持文字、文件交互。
5. 个人中心：维护个人信息、修改密码，管理我的发布、收藏、举报记录及健康相关记录。

管理员功能：
1. 用户管理：查询、新增、修改、删除用户账号及信息，维护用户状态。
2. 健康内容管理：维护食物分类、健康知识分类，发布、审核食物营养、健康知识、运动相关信息。
3. 数据管理：查看所有用户饮食/运动记录、健康信息、BMI计算结果，统计营养摄入、运动时长等数据。
4. 互动管理：处理用户举报记录，管理论坛交流内容，维护平台内容合规性。

需求分析                 

3.2个人健康管理系统的需求分析

需求分析在软件系统的开发过程中占据着举足轻重的地位。遵循软件工程的思想和流程，可以显著提升开发效率，有效缩短软件开发的周期，并确保软件项目的质量。其中，需求分析作为软件工程方法中的一个关键环节，其重要性不言而喻。软件需求工程专门致力于分析和记录软件需求，它深入探究用户和系统所需的功能与特性。简而言之，需求分析就是明确用户和系统的具体需求，这包括问题的识别、需求的列举、优先级的排序等步骤。这一过程需要开发者进行细致入微的思考和广泛深入的调研，以确保需求的准确性和全面性[10]。

鉴于国内已有众多个人健康管理系统提供了丰富且成熟的功能作为参考，本次个人健康管理系统的开发将侧重于轻量化，旨在实现以下核心功能：

（1）系统需具备全面的用户注册与登录功能，同时，用户账号的管理工作将由管理员统一负责。

（2）个人健康管理系统的首页设计应简洁直观，确保用户能够迅速熟悉并上手各项功能，无需教程指导即可直接使用。

（3）为方便用户随时修改个人信息，并轻松查看食物营养、健康知识、运动、论坛交流、健康资讯等功能。系统将提供便捷的操作界面。

管理员将通过后台管理系统对所有信息进行全面编辑，包括但不限于信息的添加与删除等操作。

本课题要求实现一套个人健康管理系统，系统主要包括管理员模块和用户模块功能模块。 管理员用例图3.1所示：用户用例图3.2所示：

图3.1管理员用例图

                   

 

图3.2用户用例图

3.3系统流程设计

3.3.1 系统开发流程

在设计和开发个人健康管理系统时，首要任务是深入且细致地分析用户的实际需求及其特定情境，以确定系统需实现的所有功能。随后，需对整个系统的工作流程及各项功能进行详细设计，确保每个模块都能精准满足用户要求。最后，通过严格的测试来识别并解决潜在问题，从而确保系统的稳定性和正常运行。本系统的开发流程包括需求分析、总体设计（结构、功能、数据）、详细设计（模块、编码）、模块整合与调用、测试扩展与完善。

3.3.2 用户登录流程

登录流程支持管理员和其他用户的登录操作。在登录页面，用户需输入个人信息。前端页面随后将这些信息传递给后端接口。后端接口会查询数据库以验证用户身份的有效性。若用户身份有效，则登录成功；若无效，则登录失败，用户需重新输入信息并进行验证。如图3.3所示。

图3.3登录流程图

3.3.3 系统操作流程

系统操作流程的分析是软件开发流程中至关重要的一个步骤，它代表了整个系统从启动到结束的全部运作流程，且必须确保这一流程中的每一步都是明确无误的，这样一个规范的流程图可以使开发者易于理解，快速的投入到接口开发中，从而提升系统开发效率。

同时，流程图还能减少开发者对系统操作流程产生歧义和降低沟通的成本，系统操作流程如图3.4所示。

图3.4系统操作流程图

4 系统总体设计

本次个人健康管理系统采用了Spring Boot框架进行开发，Spring Boot非常适合快速搭建Web应用程序。在Spring Boot中，B/S（浏览器/服务器）设计模式中的视图层被细分为View模块和Template模块。其中，View模块负责处理动态逻辑，而Template模块则负责页面的具体实现。Model（模型）与Template（模板）通过View（视图）进行连接。这样的划分使得程序中的每个部分都专注于单一的任务，大大降低了模块间的耦合度，从而方便了开发者的管理和维护。为了更清晰地展现本系统的整体架构，我们采用了结构图的形式进行表达，以下是该个人健康管理系统的功能结构图设计实现，设计实现该个人健康管理系统的功能结构图4.1所示：

图4.1 系统总体结构图

4.1 数据库设计原则

完成数据库设计后，我们可以根据所建立的数据库关系更直观地理解数据库的整体结构以及各个数据表之间的关联。在此基础上，我们可以着手创建数据表。数据库的使用使得我们能够迅速修改和检索相关信息，无需在复杂的程序代码中进行搜索，从而极大地提高了工作效率。系统总体E-R图如图4.2所示。

图4.2系统总体E-R图

4.2模型的设计

在关系数据E-R图中，分析并创建数据表，数据表用来记录信息，数据表关系由多个数据表组成，该系统中存在多个自定义模型，下面依次进行介绍。

表4.1是一个健康知识管理系统的数据库表设计，用于存储和管理健康相关的知识信息。表中包含多个字段，每个字段都有其特定的数据类型和用途。以下是各字段的详细说明：id：主键字段，类型为bigint，用于唯一标识每条健康知识记录。additive：类型为timestamp，表示记录的创建时间，默认值为当前时间戳（CURRENT_TIMESTAMP）。zhishiningcheng：类型为varchar，长度为200，用于存储健康知识的名称。zhishifenlei：类型为varchar，长度为50，用于标识健康知识的分类。tuqian：类型为longtext，用于存储与健康知识相关的图片数据。zhishishiping：类型为longtext，用于存储与健康知识相关的视频数据。zhishijianshu：类型为longtext，用于存储健康知识的简要描述。zhishineirong：类型为longtext，用于存储健康知识的详细内容。clicktime：类型为datetime，记录用户最近点击该知识的时间。clicknum：类型为int，记录该知识被点击的次数，默认值为0。discussnum：类型为int，记录该知识的评论数，默认值为0。storeupnum：类型为int，记录该知识的收藏数，默认值为0。

该表设计旨在全面管理健康知识的相关信息，包括文本、图片、视频等多种形式的内容，并跟踪用户的互动行为，如点击、评论和收藏。

字段名称	类型	长度	字段说明	主键	默认值
id	bigint	--	主键	主键	--
addtime	timestamp	--	创建时间	--	CURRENT_TIMESTAMP
zhishimingcheng	varchar	200	知识名称	--	--
zhishifenlei	varchar	50	知识分类	--	--
tupian	longtext	4294967295	图片	--	--
zhishishipin	longtext	4294967295	知识视频	--	--
zhishijianshu	longtext	4294967295	知识简述	--	--
zhishineirong	longtext	4294967295	知识内容	--	--
clicktime	datetime	--	最近点击时间	--	--
clicknum	int	--	点击次数	--	0
discussnum	int	--	评论数	--	0
storeupnum	int	--	收藏数	--	0

表4.1健康知识

健康信息管理系统的数据库表设计，用于存储和管理用户的健康相关信息。表中包含多个字段，每个字段都有其特定的数据类型和用途。以下是各字段的详细说明：id：主键字段，类型为bigint，用于唯一标识每条健康信息记录。addtime：类型为timestamp，表示记录的创建时间，默认值为当前时间戳（CURRENT_TIMESTAMP）。yonghuming：类型为varchar，长度为50，用于存储用户的用户名。xingming：类型为varchar，长度为50，用于存储用户的姓名。xingbie：类型为varchar，长度为200，用于存储用户的性别。nianling：类型为int，用于存储用户的年龄。touxiang：类型为longtext，用于存储用户的头像图片数据。shengao：类型为int，用于存储用户的身高（单位：厘米）。tizhong：类型为int，用于存储用户的体重（单位：千克）。xinlv：类型为double，用于存储用户的心率（单位：次/分钟）。xueya：类型为double，用于存储用户的血压（单位：mmlg）。xuetang：类型为double，用于存储用户的血糖（单位：mmlg）。shuinianzhil：类型为varchar，长度为200，用于描述用户的睡眠质量。richanghuodo：类型为varchar，长度为200，用于描述用户的日常活动量。jiankangzhu：类型为longtext，用于存储用户的健康状况描述。

表4.2设计旨在全面管理用户的健康信息，包括基本个人信息、生理指标、生活习惯和健康状况描述等。通过这些数据，系统可以更好地了解用户的健康状况，并提供个性化的健康管理建议。

字段名称	类型	长度	字段说明	主键	默认值
id	bigint	--	主键	主键	--
addtime	timestamp	--	创建时间	--	CURRENT_TIMESTAMP
yonghuming	varchar	50	用户名	--	--
xingming	varchar	50	姓名	--	--
xingbie	varchar	200	性别	--	--
nianling	int	--	年龄	--	--
touxiang	longtext	4294967295	头像	--	--
shengao	int	--	身高(cm)	--	--
tizhong	int	--	体重(kg)	--	--
xinlv	double	--	心率(次)	--	--
xueya	double	--	血压(mmHg)	--	--
xuetang	double	--	血糖(mmHg)	--	--
shuimianzhiliang	varchar	200	睡眠质量	--	--
richanghuodongliang	varchar	200	日常活动量	--	--
jiankangzhuangkuang	longtext	4294967295	健康状况	--	--

表4.2：健康信息

健康评估管理系统的数据库表设计，用于存储和管理用户的健康评估信息。表中包含多个字段，每个字段都有其特定的数据类型和用途。以下是各字段的详细说明：id：主键字段，类型为bigint，用于唯一标识每条健康评估记录。addtime：类型为timestamp，表示记录的创建时间，默认值为当前时间戳（CURRENT_TIMESTAMP）。pingguxiangmu：类型为varchar，长度为200，用于存储健康评估的项目名称。yonghuming：类型为varchar，长度为200，用于存储进行健康评估的用户的用户名。xingming：类型为varchar，长度为200，用于存储用户的姓名。tupian：类型为longtext，用于存储与健康评估相关的图片数据。pinggujiaguong：类型为varchar，长度为200，用于存储健康评估的结果。pinggushuoming：类型为longtext，用于存储健康评估的详细说明。pinggujianyi：类型为longtext，用于存储根据评估结果给出的建议。pinggushijia：类型为datetime，用于记录健康评估的具体时间。

表4.3设计旨在全面管理用户的健康评估信息，包括评估项目、评估结果、详细说明、建议以及评估时间等。通过这些数据，系统可以更好地了解用户的健康状况，并提供个性化的健康管理建议和改善措施。

字段名称	类型	长度	字段说明	主键	默认值
id	bigint	--	主键	主键	--
addtime	timestamp	--	创建时间	--	CURRENT_TIMESTAMP
pingguxiangmu	varchar	200	评估项目	--	--
yonghuming	varchar	200	用户名	--	--
xingming	varchar	200	姓名	--	--
tupian	longtext	4294967295	图片	--	--
pinggujieguo	varchar	200	评估结果	--	--
pinggushuoming	longtext	4294967295	评估说明	--	--
pinggujianyi	longtext	4294967295	评估建议	--	--
pinggushijian	datetime	--	评估时间	--	--

表4.3健康评估

5 系统详细设计与实现

遵循软件工程的规范流程，在系统进入详细设计与实现阶段时，我们需要将模块、视图以及模板有效地整合起来，以实现各项预定功能。本章将详细阐述这些模块的设计思路及其实施过程。

5.1 前台用户功能模块

当用户打开系统的网址后，首先看到的就是首页界面。在这里，用户能够看到个人健康管理系统的导航条显示首页、食物营养、健康知识、运动、论坛交流、健康资讯、个人中心等。系统首页界面如图5.1所示：

图5.1系统首页界面

在用户尝试使用前台系统执行任何操作之前，必须先完成注册并登录。在注册流程中，用户需在注册页面详细填写个人信息，这包括用户账号、姓名、密码（含确认密码）、性别、头像以及电话号码等。随后，前端会利用HTTP请求的方式，将这些信息安全地传送至Java后端进行处理。后端在接收到这些信息后，会执行一系列验证步骤，确保用户名的唯一性，并将新用户的全部数据妥善保存在MySQL数据库中。一旦数据成功存储，后端会即时向前端发送注册成功的确认信息。前端接收到此确认后，会立即通知用户，表明其已完成注册流程。这一系列步骤共同构成了新用户数据的收集、验证及存储的完整过程。如图5.2所示。

图5.2 用户注册界面

核心代码如图5.3；5.4所示：

图5.3

图5.4

图5.3和图5.4代码主要用于用户注册功能，使用Element UI组件库来构建表单元素，包括用户名、密码、确认密码和姓名等字段，每个表单用了el-form-item组件来包裹，el-form-item是Element UI提供的表单项组件，用来布局和样式管理；v-model是Vue.js中用于双向数据绑定的指令，通过v-model实现数据的双向绑定，并通过v-if和prop实现条件渲染和表单验证。将输入框的值与registerForm对象中的相应属性进行双向绑定，只有当tableName的值是相应值的时候，才会渲染对应的表单项，tableName是动态变量，用来控制表单的显示内容；再通过表单验证来指定表单项的字段名。输入框的占位符提示文本；根据changeRules函数的返回值动态设置class，如果changeRules返回是true，就添加required类，用来标记必填项；密码块将密码输入框类型设置为密码框，输入的内容显示成星号或者圆点，需要用户再次输入密码，确保两次输入的密码一致。

用户进行登录操作时，需在登录页面输入其账号和密码。这一流程始于Vue前端界面，用户在此输入必要的登录信息。随后，这些信息通过HTTP请求的方式被发送到Java后端进行处理。后端接收到请求后，会与MySQL数据库进行交互，以验证用户提供的凭证是否有效。若验证通过，即用户凭证正确无误，后端会生成一个令牌（例如JWT）并返回给前端。这个令牌赋予了用户访问系统的权限。整个过程从用户输入信息开始，经过系统验证，最终以系统响应并授予用户访问权限结束。。如果认证成功，后端生成一个令牌（如JWT）并返回给前端，允许用户访问系统。这个过程涵盖了从用户输入到系统验证和响应的全过程。如图5.5所示。

图5.5 用户登录界面

登录核心代码如图5.6；5.7所示：

图5.6

图5.7

图5.6和图5.7代码用于实现用户登录功能，使用了Vue.js的模板语法和Element UI组件库来构建表单。通过v-if和v-for实现条件渲染和列表渲染，只有当loginType的值为1时，才会渲染相应的表单项，loginType是动态变量，用于控制登录方式；通过prop进行表单验证，指定这个表单项的字段名；通过v-model将输入框的值与loginForm中的值进行双向绑定，再通过:type=’showPassword?’text’:’password’’动态设置输入框的类型，若showPassword为true则显示明文，否则显示密码；使用图标按钮用于切换密码的显示状态，根据showPassword的值动态切换图标样式，点击图标时，切换showPassword的值，在true和false之间来回切换。在“角色”的盒子中，roles是包含角色信息的数组，只有当roles数组的长度大于1时，才会渲染角色选择部分。<el-radio>是Element UI的单选框组件，用于选择角色，再遍历roles数组为每个角色生成一个单选框，为每个单选框设置唯一的key，当单选框的值发生变化时触发getCurrentRow方法，并将当前角色对象item作为参数传递，显示角色的名称。

点击食物营养，用户在食物营养页面可以查看食物名称、分类、图片、碳水化合物(g)、脂肪(g)、蛋白质(g)、卡路里(大卡)、胆固醇(mmol/L)、膳食纤维(g)、营养分析等信息，还可以进行领养、收藏或者评论等操作；如图5.8所示。

图5.8食物营养界面图

点击健康知识，用户在健康知识页面搜索栏输入标题，进行查询，还可以查看知识名称、知识分类、图片、知识视频、知识简述、知识内容等信息，还可以进行收藏或者评论等操作；如图5.9所示。

图5.9健康知识界面图

用户点击个人中心，在个人中心页面可以更新个人详细信息，还可以对修改密码、饮食记录、运动记录、健康信息、健康评估、BMI计算、举报记录、我的发布、我的收藏进行详细操作；如图5.10所示：

图5.10个人中心界面

5.2 后台管理员功能模块

管理员登录，通过登录页面输入用户名、密码等信息，进行登录操作，如图5.11所示。

图5.11管理员登录界面图

管理员点击登录摁钮页面跳转到个人健康管理系统对食物营养、知识分类、健康知识、饮食记录、运动类型、运动、运动记录、健康信息、健康评估、BMI计算、举报记录等功能，进行相应操作，如图5.12所示。

图5.12管理员功能界面图

管理员首页核心代码如图5.13；5.14；5.15所示：

图5.13

图5.14

图5.15

图5.13和图5.14以及图5.15代码实现了首页一部分内容，包括欢迎信息、统计数据、权限控制、动态数据绑定以及动画效果，使用animate__animated动画类实现动画效果。在“饮食记录总数”代码段通过id=”statis1”为饮食记录统计项设置唯一的ID，通过class=”statis1 animate__animated”中的statis1定义饮食记录统计项的样式；运用v-if来进行渲染，用isAuth方法来检查当前用户是否有权限查看饮食记录的总数，若isAuth返回为true，则渲染该统计项；yinshishujuCount是从Vue实例中获取的动态数据，用来显示饮食记录的总数；通过{{}}语法将统计数据动态绑定到页面。运动记录总数、健康信息总数代码与饮食记录总数相似。

在用户信息功能中，用户通过视图层（View层）进行交互操作，例如点击“新增”按钮或填写用户信息表单。这些操作被视图层捕获，并作为请求发送至对应的控制器层（Controller层）。控制器接收到请求后，会调用服务层（Service层）来执行相关的业务逻辑处理，这包括验证用户输入的数据是否有效，以及与数据库进行交互等。服务层在完成这些逻辑处理后，会与数据访问对象层（DAO层）进行交互，DAO层则具体负责执行数据操作，如搜索、新增、更新或删除用户信息等，并将操作的结果返回给控制器。最终，控制器会根据这些操作结果来更新视图层，使用户在用户信息页面上能够看到最新的信息或得到相应的操作反馈。此外，用户还可以在用户信息页面的输入栏中输入用户名、姓名、性别来进行搜索，从而查看到用户的详细信息，并根据实际需求进行修改或删除等操作；如图5.16所示。

图5.16用户管理界面

在分类功能中，用户通过视图层（View层）进行交互操作，例如点击“新增”按钮或填写分类表单。这些操作被视图层捕获，并作为请求发送至对应的控制器层（Controller层）。控制器接收到请求后，会调用服务层（Service层）来执行相关的业务逻辑处理，这包括验证用户输入的数据是否有效，以及与数据库进行交互等。服务层在完成这些逻辑处理后，会与数据访问对象层（DAO层）进行交互，DAO层则具体负责执行数据操作，如搜索、新增、更新或删除分类等，并将操作的结果返回给控制器。最终，控制器会根据这些操作结果来更新视图层，使用户在分类页面上能够看到最新的信息或得到相应的操作反馈。此外，用户还可以在分类页面的输入栏中输入分类来进行搜索，从而查看到分类的详细信息，并根据实际需求进行修改或删除等操作；如图5.17所示。

图5.17分类管理界面

管理员点击食物营养管理，在食物营养管理页面对食物名称、分类、图片、碳水化合物(g)、脂肪(g)、蛋白质(g)、卡路里(大卡)、胆固醇(mmol/L)、膳食纤维(g)、营养分析等信息，进行查询、添加或删除食物营养等操作。如图5.18所示：

图5.18食物营养管理界面

管理员点击健康知识管理，在健康知识养管理页面对知识名称、知识分类、图片、知识视频、知识简述、知识内容等信息，进行查询、添加或删除健康知识等操作。如图5.19所示：

图5.19健康知识管理界面

管理员点击饮食记录管理，在饮食记录管理页面对食物名称、饮食类型、饮食日期、图片、口味、碳水化合物(g)、脂肪(g)、蛋白质(g)、热量(大卡)、胆固醇(mmol)、膳食纤维(g)、饮水量(ml)、总能量、饮食记录、用户名、姓名、手机等信息，进行查询或删除饮食记录等操作。如图5.20所示：

图5.20饮食记录管理界面

管理员点击运动管理，在运动管理页面对运动名称、运动类型、图片、运动视频、运动时长、运动效果、运动介绍等信息，进行查询、添加或删除运动等操作。如图5.21所示：

图5.21运动管理界面

管理员点击运动记录管理，在运动记录管理页面对运动名称、运动类型、运动图片、运动日期、运动强度、运动时长(h)、运动记录、用户名、姓名、手机等信息，进行查询或删除运动记录等操作。如图5.22所示：

图5.22运动记录管理界面

管理员点击健康信息管理，在健康信息管理页面对用户名、姓名、性别、年龄、头像、身高(cm)、体重(kg)、心率(次)、血压(mmHg)、血糖(mmHg)、睡眠质量、日常活动量、健康状况等信息，进行查询或删除健康信息等操作。如图5.23所示：

图5.23健康信息管理界面

管理员点击BMI计算管理，在BMI计算管理页面对用户名、姓名、头像、体重(kg)、身高(m)、BMI、bmi指标、计算时间等信息，进行查询或删除BMI计算等操作。如图5.24所示：

图5.24 BMI计算管理界面

5.3 智能AI的接入

在本系统中，我们接入了百度云千帆智能AI，以增强系统的功能性和用户体验。通过集成这一先进的AI技术，用户可以向系统咨询各种健康营养知识，获得个性化的建议和信息。百度云千帆智能AI具备强大的自然语言处理和机器学习能力，能够理解用户的查询并提供准确、实时的回答。

用户可以通过系统的界面输入与健康、营养相关的问题，AI会迅速分析问题并生成详细的解答。这些解答可以涵盖饮食建议、营养搭配、健康生活习惯等多个方面。此外，AI还能根据用户的个人健康数据（如年龄、性别、体重、身高等）提供定制化的建议，帮助用户更好地管理自己的健康。

通过接入百度云千帆智能AI，系统不仅提升了用户获取健康信息的便捷性，还增强了系统的智能化水平，使得健康管理更加科学和个性化。这一功能特别适合那些希望通过专业指导改善健康状况的用户，为他们提供了一个可靠、智能的健康咨询平台。功能效果如图5.25所示：

图5.25 智能AI接入界面

实现获取聊天记录列表，图5.26所示。通过HTTP GET请求从服务端获取聊天记录，请求参数包括用户ID、排序方式和限制条数，获取到数据后调用formatMessages方法对数据进行格式化处理，并将结果赋值给this.chatList，最后将聊天内容区域的滚动条滚动到底部，以确保最新的消息可见。

图5.26 获取聊天记录列表

实现发送聊天信息，如图5.27和5.28所示。首先检查消息内容是否为空，若为空就弹出错误提示并返回，若传入ask参数，就使用这个参数作为消息内容，设置消息的类型、用户头像、用户名和用户ID，再通过HTTP POST请求将消息发送到服务器，若发送成功就调用getChatList方法刷新聊天记录，若askType为1并且ask为空，就调用getChathelper方法获取聊天助手的信息，若askType为2，则通过WebSocket发送消息，最后清空输入框中的内容。

图5.27 发送聊天消息

图5.28 发送聊天消息

关闭聊天窗口和WebSocket消息处理，如图5.29所示，若askType为2，则关闭WebSocket连接，将chatFormVisible设置为false，隐藏聊天窗口。WebSocket消息处理当接收到WebSocket消息时，调用getChatList方法刷新聊天记录。

图5.29

跳转到聊天界面和文件上传成功后的处理，如图5.30所示。通过检查localStorage中是否存在frontToken来检查用户是否已经登录，若未登录则跳转到登录页面，设置askType为1，表示使用HTTP请求进行聊天，调用saveChathelper方法保存聊天助手信息，调用getChatList方法获取聊天记录，将chatFormVisible设置为true，显示聊天窗口。文件上传成功则调用addChat方法发送文件路径作为消息内容并设置相应消息类型。

图5.30

向AI助手发送问题并获取回复，如图5.31所示。设置this.aiLoading为true，表示正在加载AI回复，获取聊天内容区域的DOM元素并在100毫秒后将滚动条滚动到底部以确保最新消息可见。通过HTTP POST请求将用户的问题发送到后端，若请求成功就调用saveChathelper方法将AI的回复保存到聊天记录中，请求失败则默认回复，无论是否成功，最后都将this.aiLoading设置为false，表示加载结束。

图5.31

🙊作者简介：多年一线开发工作经验，分享技术代码帮助学生学习。自有计算机毕设的工作室团队，专注计算机毕设开发、定制、远程、文档编写指导等。

🍅 查看主页更多项目 | 计算机毕设工作室 🍅

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

🍅 Java毕设项目精品实战案例《2000+套》🍅 

⬇️文章末尾获取联系方式，需要源码+毕设论文或者演示视频可以联系⬇️

⚡感兴趣大家可以点点关注收藏，后续更新更多项目资料。⚡