健康系统练习

一只ikun而已2023-08-27 13:19

健康系统

项目建构：

前后端分离，前端vue3，后端Java，springboot做跨域处理，前端将在vscode中 的tomcat下部署，后端将在ideal中集成的tomcat中部署

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x9E2ioJR-1693052126171)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629163636939.png)]

创建项目工程在ideal中直接选用springi...创建，选中web，sql中的mysdatatbasses

后端页面

在数据源中新建一个数据连接池application.yml：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SxN4lEOL-1693052126172)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629163732225.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7J3SX2re-1693052126172)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629163755233.png)]

其中的[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DijOKBaM-1693052126173)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629163810888.png)]加载了数据库连接池的驱动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pJ13CDH5-1693052126174)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629163832606.png)]

连接数据对象的地址，使用了jdbc进行连接

  • 上面的 mybatis.mapper-locations 属性指定了 Mapper 接口文件所在的位置，mybatis.type-aliases-package 属性则指定了类型别名所在的包。你可以根据你的实际情况进行调整。
  • 此时，Spring Boot 将使用这个端口号来启动 Web 服务器，为了防止后面前端页面中的tomcat中的端口重复

在浏览器中验证9000端口成功加载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-skLNuGDJ-1693052126174)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629163914736.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6qyNbqr3-1693052126175)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629163926111.png)]

在Java类中创建测试案列test来展示项目的结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mRgTc6mv-1693052126176)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629163946431.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-85G3Ei9C-1693052126176)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164004142.png)]

在浏览器上输入地址后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-emnpraIs-1693052126177)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164015258.png)]

前后端分离导致他们的服务器端口通信不一致，需要让他们保持通信

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k0hCQSS2-1693052126177)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164032605.png)]

前端页面：

环境准备：

需要下载node.js才能使用vue框架

安装node.js包管理器

在安装完node.js后需要安装安装Nodejs下的包管理器，打开windows命令窗口，输入"npm install -g cnpm --registry=https://registry.npm.taobao.org

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K5iFKrg5-1693052126178)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164057823.png)]

下载不了就国内镜像下载，可以更新一下版本，

安装vue-cli脚手架

切换到d盘目录安装脚手架：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0aGEEcLb-1693052126178)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164132153.png)]

npm install -g @vue/cli

查看下版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lPfIWztB-1693052126179)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164143190.png)]

启动下可视化界面在对应的目录下：

成功启动：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CZI6zl2c-1693052126179)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164157125.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rw8DpJ53-1693052126180)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164221757.png)]

初始预设项目的创建：

在D盘下创建此项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HeoSPQ8U-1693052126181)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164238780.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iJxEZMKF-1693052126181)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164247708.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xHFMBWLR-1693052126182)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164300368.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BSV5mCQZ-1693052126182)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164307959.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-STIxFJZz-1693052126183)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164313854.png)]

在最后创建的前一步

要选择创建的版本选择3.x版本的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6UyP3pkf-1693052126183)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164338789.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZ5nmLgO-1693052126183)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164349999.png)]

在创建完成后需要给vue添加一些组件在插件库里面添加插件

添加：插件，由于我是vue3所以使用plus版element

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lNrM51XD-1693052126184)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164358406.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gdAMr2Gl-1693052126184)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164431175.png)]

点击完成安装

添加依赖：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9RfFJrdk-1693052126184)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164448404.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QbMqRL0F-1693052126185)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164457834.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iSJLELAa-1693052126185)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164508463.png)]

这几个就是帮助设计样式，和提交的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DLOYR8in-1693052126185)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164523005.png)]

启动项目：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zxCmQ2on-1693052126186)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164708614.png)]

对基础页面进行删减：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-luohUuxC-1693052126186)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164732526.png)]

创建登录组件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oTVnOcgh-1693052126186)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164815042.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-APcai1BZ-1693052126187)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164838209.png)]

为了保证能访问到需要进行路由转发（index.js）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jY2M8ZWj-1693052126187)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164907311.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lIFXuohV-1693052126188)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164920763.png)]

在app主界面修设置了路由转发

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AiGLz3zH-1693052126188)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629164956197.png)]

开发login组件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V9LewL78-1693052126189)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629165251000.png)]

创建了全局的css样式global.css

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KFXE7J4k-1693052126189)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629165043075.png)]

在导入到全局变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qaS9scyS-1693052126190)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230629165431069.png)]

登录页面成功显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xiBoGXTi-1693052126190)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630111545165.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jm2Cg569-1693052126191)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630114039398.png)]

设置列表前面的搜索框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JAiPnUwI-1693052126191)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630155121756.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GMMkigz4-1693052126192)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630155216737.png)]

为了美化页面里面的图标需要下载好图标导入到项目

[]: https://www.iconfont.cn/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lLprWjfz-1693052126192)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630112152025.png)]

打开[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cOw1z4xN-1693052126192)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630112515702.png)]

这里面有用法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OvXiijGa-1693052126193)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630112552842.png)]

导入到项目在全局设置样式(main.js)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O5jIFoHH-1693052126193)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630112651844.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JMjtzxfc-1693052126193)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630161511754.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h4ZA0uAJ-1693052126194)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630161626155.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HjVVjSUZ-1693052126194)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630162115744.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u3Mr8wn1-1693052126194)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630162347457.png)]

注意这里是在里面是有一个点的要去掉

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TbWrBKwk-1693052126195)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630163119896.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GZm0Sz0r-1693052126195)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630163046569.png)]

样式添加：

在global.css设置了登录容器的大小即为可视化窗口的大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DtkkEf2X-1693052126195)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630180802388.png)]

在login.vue中设置了容器的高度大小为可视化窗口的100%

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MlT5fpcZ-1693052126196)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630180930113.png)]

设置了背景颜色和大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Su3HsLdl-1693052126196)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630181152615.png)]

成功让其填充到页面

设置了login------box登录容器的样式这里可以调整：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bSpQtAF-1693052126196)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230701174534998.png)]

设置了form表单样式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m5XHZ9EE-1693052126196)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630212257883.png)]

设置了log区域的div样式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qFsGeLFn-1693052126197)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630212351311.png)]

设置了图标：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7NfIw5M8-1693052126197)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630212423715.png)]

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8FsxOUcO-1693052126198)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230630212443473.png)]

设置了登录按钮的样式边界：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zZPVZwBh-1693052126198)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230701173301636.png)]

设置了form表单的样式：

调整后：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zIp9yQSa-1693052126198)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230701174317228.png)]

前端登录页面美化样式完成：

添加用户登录表单非空前验证：

添加属性：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jlo4ByWW-1693052126199)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230701182757603.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y1l6DqZS-1693052126199)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230701184927022.png)]

设置了用户名和密码的登录前必须输入验证:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EvFqPRN3-1693052126200)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230701185022027.png)]

并且在对应的表单中绑定了对应的事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n0olz5y7-1693052126200)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230701200329169.png)]

添加登录的提交需要导入axios

(vue2)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FKMaiVQG-1693052126201)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702111350772.png)]

由于我使用的是vue3导致使用的挂载方法不一致，且挂载axios有先后顺序，必须在访问app之前挂载

(vue 3)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P76AVk0L-1693052126201)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702113206566.png)]

在密码框添加了防可见

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FKNwBbld-1693052126201)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702113501245.png)]

为了验证按钮点了之后是否生效我加了验证的日志

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R3fRH8zS-1693052126202)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702154525872.png)]

浏览器开发者工具下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G9GLaU8J-1693052126202)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702154546271.png)]

在设置登录按钮的过程中由于vue3问题我修改了多次下面展示我修改的代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s40zs9Pj-1693052126202)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702162817944.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BfQQdXIn-1693052126203)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702162922673.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PlspMBVW-1693052126203)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702165143724.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-39TZki0C-1693052126203)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702163115502.png)]

这里我还将窗口的可视化进行了移动、

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mGtTUQlc-1693052126204)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702163316313.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MWVfjtpf-1693052126204)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702163239954.png)]

在点击登录和重置后，有信息输出表示成功了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-atYPOp1H-1693052126205)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702163408320.png)]

登录显示后端数据测试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-45DaPCz2-1693052126205)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702172342464.png)]

点击登录后成功显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QET4KhQC-1693052126206)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702172449087.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8M2rcCBB-1693052126206)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702172503447.png)]

添加了点击登录按钮后提示的消息框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUYmY2gK-1693052126207)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702184035615.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lbh9YNJa-1693052126207)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702184046877.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HBljCzQ1-1693052126207)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702184349221.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bM43xyid-1693052126208)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702184425252.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o37eoSkx-1693052126208)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230702183959934.png)]

添加home首页创建home首页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ri049k46-1693052126208)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230704104230878.png)]

在home页面写上基本框架

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vlyRscor-1693052126209)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230704104330750.png)]

重定向路由页面让路由进行跳转

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sYU9DTDH-1693052126209)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230704104419128.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y5PVU9X8-1693052126209)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230704104431873.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fZExqGwh-1693052126210)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230704104457891.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FFsvUlv6-1693052126210)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230704104521538.png)]

到此处完整的响应请求，基本完成，且前后端分离

创建user对象进行封装（get，Set）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DmFiSDnZ-1693052126211)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705095012602.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D14IiPuz-1693052126211)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705095047923.png)]

创建了一个登录控制器：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TSHtyKTD-1693052126211)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705095237799.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fafd531e-1693052126212)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705095310445.png)]

改变前端页面要访问的后台地址：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uJ7pXlUA-1693052126212)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705095415969.png)]

在点击登录后成功跳转login页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KgCEolCW-1693052126212)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705095459535.png)]

在后端接收到创建的User 对象

在后台控制台，查看到创建的User对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yUX61Gaj-1693052126212)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705095726836.png)]

到这实体用户User的自动封装，自动创建，已经完成

在dao成进行数据库的访问

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8tfK3JF7-1693052126213)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705113511752.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i2FuftaT-1693052126213)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705113521769.png)]

编写了查询语句

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O6VMMzjM-1693052126213)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705113548388.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KVVhDR1R-1693052126214)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705113559105.png)]

返回了controller层，进行登录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D8z4zF4y-1693052126214)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705113627697.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GfsPjiUw-1693052126215)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705113647060.png)]

在主程序入口进行了扫描dao层中的包的操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TtGCCiIp-1693052126215)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705113706041.png)]

点击了登录后跳转到home页面，在后端会查询到数据中的用户信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VpFckMEt-1693052126215)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705113950397.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XLIyhaJF-1693052126216)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230705114004183.png)]

导入json特殊字符串，形成json对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HEabBP3Q-1693052126216)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230714113431405.png)]

由于我是用的gradle创建的项目没有pom.xml文件，Gradle使用一个名为"build.gradle"（或者是"build.gradle.kts"，如果你使用Kotlin脚本）的文件来定义项目的构建配置。这个文件包含了项目的依赖项、插件、任务和其他构建设置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gqRu4LvO-1693052126216)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230714192350807.png)]

在login页面将对象转化为json字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PdP6zb3X-1693052126217)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230714192523983.png)]

在登录页面对跳转页面进行设置，设置了他的默认值是error，使用了json.tojsonstring来将对象和跳转页面进行返回

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-puftgDMZ-1693052126217)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230714193750738.png)]

将从后端发送过来的数据的flag值和ok对比，进行跳转

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eeZdtc0H-1693052126218)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230714201609504.png)]

在hom.vue中添加了退出按钮，并成功返回到登录页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RbvV3GFq-1693052126218)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230715134551677.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HOFB9pv0-1693052126218)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230715134609303.png)]

在点击了退出按钮后，成功返回到登录页面也就是login页面

在成功点击登录后，在浏览器调试页面查看会话中的存储数据，点击登录之后会在调试页面生成key 和值，在点击退出之后这些数据也不会清除，这样的安全性大大下降

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G6hD1hXa-1693052126219)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230715153503206.png)]

在home.vue中清除session

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDyPc2Zv-1693052126219)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230715153829428.png)]

改了之后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCNjoZCY-1693052126219)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230715154022790.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f3F6r4yp-1693052126220)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230715154100039.png)]

在设置完清楚会话session后我添加了一个安全退出的提示框（home.vue）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vAOytmH8-1693052126220)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230715155545262.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jKVgg6vO-1693052126220)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230715155535811.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tqFucLkl-1693052126221)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230715155614842.png)]

设置了路由守卫(index.js)

这段代码是使用 Vue Router 中的全局前置守卫 beforeEach，它的作用是在路由导航之前进行拦截和处理。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pHesAb17-1693052126221)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230715162620512.png)]

测试了登录页面正常登录，和退出

设置home页面的布局

在elemenet中找到containerd 容器布置器

Container | Element Plus (element-plus.org)

找到一个有头，有左有右，没有尾巴的布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-neCM7JkX-1693052126221)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230717103614949.png)]

在home首页插入代码：

布局设置：
html 复制代码 
<template>
    <!-- 公共布局组件 -->
    <div class="common-layout">
        <!-- 整体布局容器引入container布局设置 -->
        <el-container class="home-container">
                 <!-- 侧边栏 -->
                 <el-aside width="200px">Aside</el-aside>
            <!-- 主内容区域 -->
            <el-container>
                <!-- 页面头部 -->
                <el-header>
                    首页
                    <!-- <ElButton class="btns1" type="info" @click="logout">安全退出</ElButton> -->
                    
                </el-header>
                <!-- 页面主体 -->
                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>
</template>
并在style中设置了布局样式
html 复制代码 
/* 布局器的填充 height: 100vh，可以确保布局容器填充整个视口的高度*/
.home-container{
    height: 100vh;
}
/* home主页样式设置 */
/* 头样式 */
.el-header{
    background-color: #373d41;
}
/* 侧边栏样式 */
.el-aside{
    background-color: #333744;
}
/* 主体样式 */
.el-main{
    background-color: #eaedf1;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hTLdpTNW-1693052126222)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230717122954763.png)]

在侧边栏里面添加了图标
html 复制代码 
<!-- 侧边栏 -->
        <el-aside width="200px">
            <img src="../assets/OIP.png" alt="">
        </el-aside>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xRirdXdg-1693052126222)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230717170247978.png)]

添加了文字信息设置了文字信息的样式

html 复制代码 
/* 头样式 */
.el-header {
    /* 背景颜色 */
    background-color: #373d41;
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 在主轴上居中对齐 */
    justify-content: center;
    /* 在交叉轴上居中对齐 */
    align-items: center;
    /* 左边距设置为0% */
    padding-left: 0%;
    /* 文字颜色 */
    color: #fff;
    /* 字体大小 */
    font-size: 20px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1RAtkEH-1693052126222)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230717194531753.png)]

添加导航栏

导航 |元素加 (element-plus.org)

html 复制代码 
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>

添加了注册按钮：

vue 复制代码 
<el-button type="success" @click="register">注册</el-button>

在set中设置了register注册方法

// 注册按钮点击事件

vue 复制代码 
  const register = () => {

   app.$router.push("/SigIn");

  };

在return中设置了返回函数

vue 复制代码 
register // 返回register函数

在路由中导入了注册的路径

vue 复制代码 
// 导入SignIn主页
import SignIn from '../components/SigIn.vue'

设置了重定向的组件和路径

vue 复制代码 
 {

  // 重定向到这个路径

  path: "/SigIn",

  // 导入的组件

  component:SignIn





 }

在sigin页面添加了注册表单并设置了样式

vue 复制代码 
<template>
  <div class="container">
    <div class="form-wrapper">
      <h2 class="centered-title">---注册---</h2>
      <form @submit.prevent="registerUser">
        <label for="username">用户名：</label>
        <input type="text" v-model="username" required><br>

        <label for="password">密码：</label>
        <input type="password" v-model="password" required><br>

        <label for="email">邮件：</label>
        <input type="email" v-model="email" required><br>

        <label>等级：</label>
        <input type="checkbox" v-model="isAdmin" :value="true">
        <label>普通管理员</label>
        <input type="checkbox" v-model="isUser" :value="true">
        <label>用户</label><br>

        <button type="submit">注册</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      email: "",
      isAdmin: false,
      isUser: false,
    };
  },
  methods: {
    registerUser() {
      // 在这里执行用户注册逻辑
      // 可以使用this.username、this.password、this.email等访问用户输入的数据
      // 可以使用this.isAdmin和this.isUser判断用户选择的等级
      // 发送表单数据到后端进行处理和存储
      // 可以使用axios或其他方法与后端进行通信
    },
  },
};
</script>

<style>
/* 样式设置开始 */

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* 100% viewport height */
  background-image: url("../assets/register.png");
  background-size: cover;
  /* 将背景图铺满容器并保持纵横比例 */
}

.form-wrapper {
  width: 400px;
  padding: 20px;
  background-color: rgba(241, 241, 241, 0.5);
  /* 将背景颜色设置为透明白色，透明度为0.5 */
  border-radius: 5px;
}

.centered-title {
  text-align: center;
  /* 将标题文本居中显示 */
}

form {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"],
input[type="email"] {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

/* 样式设置结束 */</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-88mrfHW8-1693052126223)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230723194129026.png)]

由于前面设置了路由守卫，导致了在login页面只能跳转到home页面，注册页面跳转不出来，我修改了路由守卫，让他不用验证用户，就能直接跳转到注册页面

vue 复制代码 
if (to.path==="/sigin")return next();

将前端的注册页面完成，现在将前端收集的数据发送到后端

controller层

java 复制代码 
package com.healthsystem.portplay.controller;

import com.healthsystem.portplay.bean.User;
import com.healthsystem.portplay.dao.UserDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class RegisterController {
    /**
     * 自动注入 UserDao 对象
     */
    @Autowired
    UserDao userDao;
    /**
     * 处理登录请求的方法
     *
     * @param user 包含登录信息的 User 对象
     * @return 返回包含登录结果和用户信息的 JSON 字符串
     */
    @RequestMapping("/register")
    public String registerUser(@RequestBody User user){
        userDao.save(user); // 假设 userDao 中有一个保存用户的方法 saveUser(User user)

        // 返回一个表示注册成功的 JSON 字符串
        return "{\"success\": true}";
    }
}

dao层来访问数据层

java 复制代码 
import com.healthsystem.portplay.bean.User;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

//"@Repository" 是一个注解，它用于在 Spring 框架中标识一个类为数据访问对象（DAO）。
@Repository
//定义接口，在login层实现
public interface UserDao {
    // 保存用户信息到数据库
    void save(User user);
    //    "@Param" 是一个注解，它通常用于在使用 MyBatis 进行数据库访问时，标识方法参数与 SQL 语句中的参数的映射关系
    User GetUserByMessage(@Param("username") String username, @Param("password") String password);
}

uesrmapper.xml文件

xml 复制代码 
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--namespace 就是dao层的位置-->
<mapper namespace="com.healthsystem.portplay.dao.UserDao">
    <select id="GetUserByMessage" resultType="com.healthsystem.portplay.bean.User">
        select *
        from `user`
        where username = #{username}
          and password = #{password}
          and state = 1;
    </select>
    <insert id="save" parameterType="com.healthsystem.portplay.bean.User">
        INSERT INTO `user` (username, password, email) VALUES
            (#{username}, #{password}, #{email})
    </insert>
</mapper>

添加了注册成功会拉起登录程序，登录成功跳转到home首页

vue 复制代码 
async submitFormData(formData) {
      // 发送表单数据到后端进行处理和存储
      const response = await axios.post('/register', formData);
      const res = response.data;
     
      // 假设后端返回的 JSON 结果中有一个名为 'success' 的字段，表示注册是否成功
      if (res.success) {
        // 注册成功
        ElMessage.success('成功');
        // 在注册成功后调用登录方法，传递注册的用户名和密码
        this.login(formData.username, formData.password);

      } else {
        // 注册失败
        ElMessage.error('失败');
      }
    },

在其中我尝试了几次注册成功跳转失败，我去检查后端，和前端代码，并没有发现，没有发现问题，但是我还是将前端的拉起登录部分检查，以为是数据传送不到登录页面。睡了一会发现，应该不是这个问题，可能是数据库中的账户状态问题

当账户状态是0时，登录不了，我改变了他的状态

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDitrkHX-1693052126223)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230725170724081.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AJJuU031-1693052126224)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230725170803858.png)]

成功登录当首页

设置了一个联系的三个链接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ztwrf1AN-1693052126224)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230725203829752.png)]

在关于我们页面设置了关于我们，和联系我们的留言

vue 复制代码 
<template>
  <div class="about">
    健康是人类最宝贵的财富，而身体就像一台复杂的系统，由无数细胞、器官和生理功能组成。这个系统的优越运作，决定了我们的生活质量和幸福感。然而，我们对于这个系统的了解并不够深入，很多时候，我们可能忽视了健康的重要性，直到我们失去它才懂得后悔。<br><br>
    健康的系统由来并不是简单的积累，而是与我们的生活方式、饮食习惯和运动锻炼密切相关。首先，饮食是健康系统的基石。我们的身体需要各种营养来维持正常的生理功能，而这些营养来自于我们的日常饮食。如果我们长期摄入不健康的食物，就会导致营养不良和各种健康问题。<br><br>

    其次，运动锻炼是保持健康系统运转的关键。适量的运动可以促进血液循环，增强心肺功能，提高免疫力，还可以预防慢性疾病的发生。缺乏运动的人往往容易出现肥胖、高血压、高血脂等问题，严重影响身体健康。<br><br>

    此外，良好的生活习惯也是健康系统的重要组成部分。不良的生活习惯，如熬夜、吸烟、喝酒等，都会对健康造成不良影响。因此，我们应该养成良好的生活习惯，保持规律的作息和饮食，远离不健康的嗜好.<br><br>

    除此之外，精神健康也是健康系统不可或缺的一环。长期的压力、焦虑和抑郁会对身体产生负面影响，甚至导致心理疾病的发生。因此，我们要学会放松心情，保持积极的心态，学会应对生活中的各种挑战。<br><br>
  </div>
</template>
<script>
</script>
<style lang="less">
.about{
  background-color: #f0f0f0;
  // background-image: url("../assets/register.png");
  background-size: cover;
  
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  border-radius: 5px;
}
</style>
vue 复制代码 
<template>
    <div>
        <h2>留言</h2>
        <form @submit.prevent="submitMessage">
            <label for="name">姓名：</label>
            <input type="text" v-model="name" required><br>

            <label for="email">邮箱：</label>
            <input type="email" v-model="email" required><br>

            <label for="message">留言内容：</label>
            <textarea v-model="message" required></textarea><br>

            <button type="submit">提交</button>
        </form>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            name: "",
            email: "",
            message: "",
        };
    },
    methods: {
        submitMessage() {
            // 在这里你可以编写将留言提交给后端的逻辑，或者执行其他你想要的操作。
            // 例如，你可以使用axios向后端服务器发送包含表单数据的POST请求。

            // 留言成功提交后，你可以显示成功消息或者将用户重定向到其他页面。
        },
    },
};
</script>
  
<style lang="less">
/* 如果需要，你可以在这里添加自定义样式来美化表单元素 */
</style>

添加了常见问题页面的展示

vue 复制代码 
<template>
    <div class="faq">
        <h2>健康系统常见问题</h2>
        <el-collapse v-model="activeTab">

            <!-- FAQ 1 -->
            <el-collapse-item title="健康系统是什么？">
                <p>健康系统是一个在线健康管理平台，旨在帮助用户跟踪和管理他们的健康信息，包括健康指标、疾病历史、药物记录等。</p>
            </el-collapse-item>

            <!-- FAQ 2 -->
            <el-collapse-item title="如何使用健康系统？">
                <p>使用健康系统非常简单。您只需创建一个账户并登录，然后填写您的健康信息，包括身高、体重、血压等。您还可以设置提醒和目标来帮助您管理健康。</p>
            </el-collapse-item>

            <!-- FAQ 3 -->
            <el-collapse-item title="健康系统是否安全？">
                <p>是的，我们采取了多重安全措施来保护您的个人健康信息。所有数据都加密存储，并且只有您和授权的医疗专业人员才能访问您的健康数据。</p>
            </el-collapse-item>

            <!-- FAQ 4 -->
            <el-collapse-item title="能否与医生共享我的健康数据？">
                <p>是的，您可以选择与您的医生或医疗团队共享您的健康数据。这样，他们可以更好地了解您的健康状况，并为您提供更加个性化的医疗建议。</p>
            </el-collapse-item>

            <!-- FAQ 5 -->
            <el-collapse-item title="健康系统是否有手机应用？">
                <p>是的，我们提供了手机应用，您可以在iOS和Android设备上下载和安装健康系统的手机应用，方便您随时跟踪和管理您的健康信息。</p>
            </el-collapse-item>

            <!-- 添加更多的FAQ，按照相同的格式即可 -->

        </el-collapse>
    </div>
</template>
  
<script>
import { ref } from 'vue';

export default {
    setup() {
        const activeTab = ref(0);

        return {
            activeTab
        };
    }
};
</script>
  
<style>
.faq {
  height: 100vh; /* 设置高度为视口的100%，让div元素铺满整个页面 */
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 5px;
}
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tlMm2V7g-1693052126224)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230727212307337.png)]

文章目录

重新设置了home主页的布局

vue 复制代码 
 <div class="common-layout">
        <el-container>
            <!-- 头部 -->
            <el-header class="el-header">
                <!-- 头像显示当前登录的用户名称 -->
                <el-button class="logout-button" @click="logout">退出</el-button>
            </el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="200px" class="aside-container">
                    <el-menu :default-active="activeMenu" @select="handleMenuSelect" class="menu-container">
                        <el-menu-item index="1">用户量</el-menu-item>
                        <el-menu-item-group class="el-menu-item-group__divider"></el-menu-item-group>
                        <!-- 分割线 -->
                        <el-menu-item index="2">用户状态</el-menu-item>
                    </el-menu>
                </el-aside>
                <!-- 主栏 -->
                <el-main>

                </el-main>
            </el-container>
        </el-container>
    </div>

设置了分界线在用户量，和用户状态上

vue 复制代码 
<el-aside width="200px" class="aside-container">
                    <el-menu :default-active="activeMenu" @select="handleMenuSelect" class="menu-container">
                        <el-menu-item index="1">用户量</el-menu-item>
                        <el-menu-item-group class="el-menu-item-group__divider"></el-menu-item-group>
                        <!-- 分割线 -->
                        <el-menu-item index="2">用户状态</el-menu-item>
                    </el-menu>
                </el-aside>

直接显示用户名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WMxKkhtZ-1693052126225)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230731212157667.png)]

将在点击用户量时，显示图标的功能去掉

html 复制代码 
项目报错问题解决的思路

在一次打开项目的时候发现有问题由于没有截图保存

在查看前端问题是发现是axios跨域处理有问题

在后端的报错发现是

User user1 = userDao.GetUserByMessage(user.getUsername(), user.getPassword());

这行有问题

我去看了我的dao层发现在GetUserByMessage发现这个方法有问题

我去查看了我的xml映射文件修改了我的dao层位置和user的位置，重新运行的程序发现还是不行

在日志中发现我的数据库链接池可能有问题，我重新写了一次我的数据库驱动，

```xml
**driver-class-name**: com.mysql.cj.jdbc.Driver
```

重新跑了一次程序发现成功运行

我准备在我的用户量界面查询数据库信息然后通过图表显示在界面

我想的是在后端查询到用户量按月份统计

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f99AmPyr-1693052126225)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230807172649522.png)]

在数据库查询到的数据，然后通过dao层，通过控制器，返回给前端，在前端绘制图表

查询数据的映射文件：
xml 复制代码 
   <select id="GetUserByMessage" resultType="com.healthsystem.portplay.bean.User">
        select *
        from `user`
        where username = #{username}
          and password = #{password}
          and state = 1;
    </select>

dao层将查询到的数据转到一个集合里面，包括，用户量，月份

java 复制代码 
List<Map<String,Object>>GetUserCountByMonth();

再通过控制器将集合里面的数据返回给前端

java 复制代码 
    // 获取用户数量的控制器方法
    @GetMapping("/countByMonth")
    public List<Map<String,Object>>GetUserCountByMonth(){
        return userDao.GetUserCountByMonth();
    }

前端绘制图表并在打开页面就直接加载

vue 复制代码 
		<!-- 主栏 -->
        <!-- 用户量统计图组件 -->
<el-main>
          <div v-if="activeMenu === '1'">
            <div>
              <canvas ref="chartCanvasRef" width="400" height="200</canvas>
            </div>
          </div>
</el-main>
vue 复制代码 
import axios from "axios";
import { Chart } from "chart.js";
const chartCanvasRef = ref(null); // 使用 ref() 函数声明 chartCanvasRef 变量
// 发送获取用户数量数据请求并绘制图表
async function fetchUserCount() {
  try {
    // 向 "/countByMonth" 端点发起 GET 请求以获取用户数量数据
    const response = await axios.get("/countByMonth");
    // 从响应中提取用户数量数据
    const userCount = response.data;

    // 从用户数量数据中提取月份标签和用户数量
    const monthLabels = userCount.map((data) => data.month);
    const userCounts = userCount.map((data) => data.user_count);

    // 获取用于绘制图表的 Canvas 上下文
    const ctx = chartCanvasRef.value.getContext("2d");

    // 使用 Chart.js 库创建一个新的条形图
    new Chart(ctx, {
      type: "bar", // 使用 "bar" 类型绘制条形图
      data: {
        labels: monthLabels, // 使用月份标签作为 X 轴
        datasets: [
          {
            label: "用户数量", // 数据集的标签
            data: userCounts, // 用户数量数据作为 Y 轴
            backgroundColor: "rgba(75, 192, 192, 0.2)", // 条形图的背景颜色
            borderColor: "rgba(75, 192, 192, 5)", // 条形图的边框颜色
            borderWidth: 1, // 条形图的边框宽度
          },
        ],
      },
      options: {
        scales: {
          x: {
            type: "category", // 使用 "category" 类型作为 X 轴的标尺
            labels: monthLabels, // 使用月份标签作为 X 轴标尺上的刻度
          },
          y: {
            beginAtZero: true, // Y 轴从零开始
          },
        },
      },
    });
  } catch (error) {
    console.error("Error fetching user count:", error);
  }
}
// 页面加载时就自动显示用户量统计图表
onMounted(fetchUserCount);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EOQV4RZ1-1693052126225)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230807173538057.png)]

打算在用户状态里面画出用户名，和用户状态显示出他的状态开关和用户等级，并且支持用户状态的修改，在添加一个可以删除用户的按钮

在vue3的官网，找到对应的开关的样式在测试页面做好测试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T0i1W86S-1693052126226)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230808124724482.png)]

这个就是我需要的状态按钮的开关

vue 复制代码 
 <el-switch v-model="value" active-text="Open" inactive-text="Close" />

需要的是在点击了开关之后需要对value的值进行更新，我在测试页面对他进行了他操作

vue 复制代码 
<template>
  <el-switch
    :modelValue="value"
    @update:modelValue="updateValue"
    active-text="Open"
    inactive-text="Close"
  />
</template>

<script setup>
import { ref } from "vue";

// 使用 ref() 定义 value 变量
const value = ref(false);

// 使用 updateValue 函数来处理更新 value 变量的事件
const updateValue = (newValue) => {
  value.value = newValue;
};
</script>

<style scoped>
/* 样式定义，可以根据需要添加样式 */
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-csZiiRVS-1693052126226)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230808125218954.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DHLB9LPU-1693052126227)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230808125231080.png)]

在这里我实现了开关打开的状态和关闭的切换

现在需要在用户等级为用户的加上他的会员时间，需要有个起始时间，和截至时间，以天为单位

已经在数据库里面添加了对应的会员的时间跨度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6htHpVpd-1693052126227)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230808170059212.png)]

只需要按照用户名来区分，并且每个用户都要包括用户名、角色、状态、起始时间和结束时间，

sql 复制代码 
SELECT
    username,
    role,
    state,
    startTime,
    endTime
FROM
    user
ORDER BY
    username;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hww7VNDW-1693052126227)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230808170205794.png)]

我在测试页面已经加上了状态转换的

问题：

将用户信息检索出来放入表中，设置了开关按钮，但是发现开关或者只能打开状态，关闭，不能关闭或者打开。经过几次排查，发现在点击了开关，让其关闭时候，我后端的update信息携带的state：1，不是我想要的0

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0iVtbiP-1693052126227)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230810211653238.png)]

我点击关闭了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iHIkUtFM-1693052126228)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230810211720358.png)]

等到轮询，发现状态为改变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XFilPC8d-1693052126228)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230810211751043.png)]

在浏览器开发环境发现我的后端的updatestate

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6mElv5Q3-1693052126229)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230810211905386.png)]

关闭是0

出问题代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZRdDihHQ-1693052126229)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230810211930911.png)]

修改后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ioTAA0Ns-1693052126229)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230810212123101.png)]

代码更新了，点击关闭

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rwas0GQT-1693052126230)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230810212207310.png)]

我的update也正常了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4BYnqCmV-1693052126230)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230810212235229.png)]

功能成功了后，加入主页面

表单界面|

vue 复制代码 
<!-- 用户状态修改 -->
          <div v-if="activeMenu === '2'">
            <table>
              <thead>
                <!-- 标签栏 -->
                <tr>
                  <th>用户名</th>
                  <th>等级</th>
                  <th>开始时间</th>
                  <th>截止时间</th>
                  <th>状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="user in users" :key="user.username">
                  <td>{{ user.username }}</td>
                  <td>{{ user.role }}</td>
                  <td>{{ user.startTime }}</td>
                  <td>{{ user.endTime }}</td>
                  <td>
                    <el-switch
                      v-model="user.state"
                      active-text=""
                      inactive-text=""
                      @change="handleSwitchChange(user)"
                    />
                  </td>
                </tr>
              </tbody>
            </table>
            <canvas
              ref="userStatechartCanvasRef"
              width="400"
              height="200"
            ></canvas>
          </div>
java 复制代码 
import { ref, onMounted, onBeforeUnmount } from "vue";
java 复制代码 
//菜单2
const userStatechartCanvasRef = ref(null);
const users = ref([]);
java 复制代码 
// 在组件挂载前调用异步函数，获取用户名信息
// 定时器，每隔一段时间获取用户信息
let pollingInterval;
onMounted(async () => {
  try {
    // 页面加载时就自动显示用户量统计图表1
    fetchUserCount();
    // 在组件挂载前调用异步函数，获取用户名信息1
    getUserInfo();
    // 初始化时立即获取一次用户信息2
    await fetchUserInfo();
    // 设置定时器，每隔 5毫秒秒获取一次用户信息2
    pollingInterval = setInterval(fetchUserInfo, 5000); // 每 5毫 秒轮询一次
    drawChart();
  } catch (error) {
    console.error("Error fetching user information:", error);
  }
});
// onMounted(getUserInfo);
// 获取用户信息,在菜单2中的
async function fetchUserInfo() {
  try {
    const response = await axios.get("/UserInfo");
    users.value = response.data;
  } catch (error) {
    console.error("Error fetching user information:", error);
  }
}
// 使用 Chart.js 或其他绘图库绘制图表，
// 根据数据进行绘制菜单2中
function drawChart(canvasRef) {
  if (canvasRef) {
    const ctx = canvasRef.getContext("2d");
  }
}
// 用户状态的切换，菜单2中
function handleSwitchChange(user) {
  const newState = user.state ? 1 : 0;
  updateDatabaseState(user.username, newState)
    .then(() => {
      // Update the user's state locally
      user.state = newState;
    })
    .catch((error) => {
      console.error("Error updating state:", error);
    });
}
// 将状态信息推送到后端，菜单2中
async function updateDatabaseState(username, newState) {
  try {
    const response = await axios.put("/updateState", {
      username: username,
      state: newState,
    });
    return response.data;
  } catch (error) {
    throw error;
  }
}

// 在组件被销毁前清除定时器，菜单2中
onBeforeUnmount(() => {
  clearInterval(pollingInterval);
});

其中有菜单1的，有1和2 标注
html 复制代码 
// 菜单2样式
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #55d515;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #35e51e;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GXVOnf8d-1693052126231)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230810213243175.png)]

添加分页功能，他的数据展示在下页展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EHIAolpA-1693052126231)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230811222518410.png)]

添加了一个修改时间，时间是以天为单位来计算的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0HmNLYxN-1693052126231)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230811222846081.png)]

vue 复制代码 
   <td>
            <input
              type="date"
              v-model="user.startTime"
              @change="updateTime(user)"
            />
          </td>
          <td>
            <input
              type="date"
              v-model="user.endTime"
              @change="updateTime(user)"
            />
          </td>
java 复制代码 
// 更新用户时间信息2
function updateTime(user) {
  const NewstartTime = user.startTime;
  const NewendTime = user.endTime;
  updateDatabaseTime(user.username, NewstartTime, NewendTime)
    .then(() => {
      // Time updated successfully
      user.startTime = NewstartTime;
      user.endTime = NewendTime;
    })
    .catch((error) => {
      console.error("Error updating time:", error);
    });
}
// 将时间信息推送到后端
async function updateDatabaseTime(username, NewstartTime, NewendTime) {
  try {
    const response = await axios.put("/updateTime", {
      username: username,
      startTime: NewstartTime,
      endTime: NewendTime,
    });
    return response.data;
  } catch (error) {
    throw error;
  }
}

为了判断用户是否过期，想使用springboot中的定时任务来检查数据库中的用户时间信息是否过期，当你在Spring中创建一个 @Component 类时，它会被自动识别为一个Spring管理的组件。在你的情况下，你可以创建一个带有定时任务的组件，用来检查和更新用户状态。

java 复制代码 
@Component
public class CheckUserTimeSchedule {
    private final UserDao userDao;

    @Autowired
    public CheckUserTimeSchedule(UserDao userDao) {
        this.userDao = userDao;
    }

    @Scheduled(fixedRate = 30000)
    public void checkAndUpdateUserStatus() {
        List<Map<String, Object>> usersMapList = userDao.GetUserInfo(); // 获取所有用户信息

        LocalDate currentDate = LocalDate.now();

        for (Map<String, Object> userMap : usersMapList) {
            String username = (String) userMap.get("username");
            LocalDate endTime = (LocalDate) userMap.get("endTime");

            if (endTime != null && endTime.isBefore(currentDate)) {
                // 用户的截止时间已过期，将状态更新为 false（已过期）
                userDao.updateUserState(username, false);
            }
        }
        System.out.println("检查并更新用户状态");
    }
}

创建一个员工表用来统计员工打卡情况

sql 复制代码 
-- 创建员工表
CREATE TABLE employee (
    id INT NOT NULL,
    username VARCHAR(255) NOT NULL,
    sign_in DATETIME,
    PRIMARY KEY (id, username),
    FOREIGN KEY (id) REFERENCES user(id)
);

给表中插入用户等级为管理员的

sql 复制代码 
insert into employee(id, username, sign_in) select id, username, null from user where role = '普通管理员';

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQCOIsgq-1693052126232)(C:\Users\computer\AppData\Roaming\Typora\typora-user-images\image-20230816211904238.png)]

vue 复制代码 
<div v-if="activeMenu === '3'">
            <table>
              <thead>
                <!-- 标签栏 -->
                <tr>
                  <th>员工</th>
                  <th>签到记录</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="Employee in Employees" :key="Employee.username">
                  <td>{{ Employee.username }}</td>
                  <td>{{ Employee.sign_in }}</td>
                </tr>
              </tbody>
            </table>
            <canvas ref="chartCanvasRefe" width="400" height="200"></canvas>
          </div>
java 复制代码 
// 菜单3
const chartCanvasRefe = ref(null);
const Employees = ref([]);
java 复制代码 
pollingInterval = setInterval(pollEmployeeInfo, 60 * 1000); //每 1分钟 秒轮询一次
java 复制代码 
// 使用 Chart.js 或其他绘图库绘制图表，
// 根据数据进行绘制菜单2中
function drawChart(canvasRef, canvasRefe) {
  if (activeMenu === "1" && canvasRef) {
    const ctx = canvasRef.getContext("2d");
  }
  if (activeMenu === "3" && canvasRefe) {
    const ctx1 = canvasRefe.getContext("2d");
  }
}
java 复制代码 
// 获取员工信息，3
async function fetchEmployeeInfo() {
  try {
    const response = await axios.get("/employeeInfo");
    Employees.value = response.data;
  } catch (error) {
    console.error("Error fetching Employee information:", error);
  }
}
xml 复制代码 
<select id="GetEmployeeInfo" parameterType="com.healthsystem.portplay.bean.Employee">
        select username, sign_in
        from employee
        order by username;
    </select>
java 复制代码 
 List<Map<String, Object>> GetEmployeeInfo();
java 复制代码 
package com.healthsystem.portplay.controller;

import com.healthsystem.portplay.dao.UserDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
import java.util.Map;

@RestController
public class EmployeeInfo {
private final UserDao userDao;
@Autowired
    public EmployeeInfo(UserDao userDao){this.userDao=userDao;}
    @GetMapping("/employeeInfo")
    public List<Map<String,Object>>GetEmployeeInfo(){
    return userDao.GetEmployeeInfo();
    }
}

为了区分普通管理员，和超级管理员，我添加了一个新的页面只用来显示，等级为用户的页面

vue 复制代码 
<template>
  <div>
    <span class="username-text">{{ username }}</span>
    <span class="logout-text" @click="logout">退出</span>
    <canvas ref="userStatechartCanvasRef" width="400" height="0"></canvas>
    <table>
      <thead>
        <!-- 标签栏 -->
        <tr>
          <th>用户名</th>
          <th>开始时间</th>
          <th>截止时间</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in displayedUsers" :key="user.username">
          <td>{{ user.username }}</td>
          <!-- 时间修改组件 -->
          <td>
            <input
              type="date"
              v-model="user.startTime"
              @change="updateTime(user)"
            />
          </td>
          <td>
            <input
              type="date"
              v-model="user.endTime"
              @change="updateTime(user)"
            />
          </td>
          <!-- 用户状态切换组件 -->
          <td>
            <el-switch
              v-model="user.state"
              active-text=""
              inactive-text=""
              @change="handleSwitchChange(user)"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 分页控制条 -->
    <el-pagination
      v-if="totalUsers > pageSize"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalUsers"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElPagination } from "element-plus";
import axios from "axios";
import { Chart } from "chart.js";
// 发送登录请求并获取用户的用户名，菜单
async function getUserInfo() {
  try {
    // 获取当前登录账号的信息
    const currentUser = JSON.parse(window.sessionStorage.getItem("user"));
    // 将用户名更新为当前登录用户的用户名
    username.value = currentUser.username;
  } catch (error) {
    console.error("Error getting username:", error);
  }
}
//菜单2
const userStatechartCanvasRef = ref(null);
const users = ref([]);
// 分页相关变量
const currentPage = ref(1);
const pageSize = ref(7); // 每页显示的条目数
const totalUsers = computed(() => users.value.length); // 计算总用户数量
// 退出登录
function logout() {
  // 清除键值对，会话 session
  window.sessionStorage.clear();
  // 使用 Vue Router 使用 router 是 Vue Router 中的实例来进行页面跳转
  router.push("/login"); // 路由到首页
  // 使用 Element Plus 的消息提示组件显示退出消息
  ElMessage.success({
    message: "安全退出",
    // 设置了弹出时间
    duration: 2000,
  });
}
// 在组件挂载前调用异步函数，获取用户名信息
// 定时器，每隔一段时间获取用户信息
let pollingInterval;
onMounted(async () => {
  try {
    // 在组件挂载前调用异步函数，获取用户名信息
    getUserInfo();
    // 初始化时立即获取一次用户信息，2
    await fetchUserInfo();
    // 设置定时器，每隔 1分钟获取一次用户信息
    pollingInterval = setInterval(() => {
      fetchUserInfo();
    }, 60 * 1000); // 每 1分钟 秒轮询一次
    // pollingInterval = setInterval(pollEmployeeInfo, 60 * 1000); //每 1分钟 秒轮询一次
    drawChart();
  } catch (error) {
    console.error("Error fetching user information:", error);
  }
});
// 获取用户信息,2
async function fetchUserInfo() {
  try {
    const response = await axios.get("/UserInfo");
    users.value = response.data;
  } catch (error) {
    console.error("Error fetching user information:", error);
  }
}
// 用户状态的切换，2
function handleSwitchChange(user) {
  const newState = user.state ? 1 : 0;
  updateDatabaseState(user.username, newState)
    .then(() => {
      // Update the user's state locally
      user.state = newState;
    })
    .catch((error) => {
      console.error("Error updating state:", error);
    });
}
// 将状态信息推送到后端，2
async function updateDatabaseState(username, newState) {
  try {
    const response = await axios.put("/updateState", {
      username: username,
      state: newState,
    });
    return response.data;
  } catch (error) {
    throw error;
  }
}
// 计算当前页显示的用户列表,2
const displayedUsers = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return users.value.slice(startIndex, endIndex);
});

// 处理分页改变事件,2
function handlePageChange(newPage) {
  currentPage.value = newPage;
}
// 更新用户时间信息2
function updateTime(user) {
  const NewstartTime = user.startTime;
  const NewendTime = user.endTime;
  updateDatabaseTime(user.username, NewstartTime, NewendTime)
    .then(() => {
      // Time updated successfully
      user.startTime = NewstartTime;
      user.endTime = NewendTime;
    })
    .catch((error) => {
      console.error("Error updating time:", error);
    });
}
// 将时间信息推送到后端，2
async function updateDatabaseTime(username, NewstartTime, NewendTime) {
  try {
    const response = await axios.put("/updateTime", {
      username: username,
      startTime: NewstartTime,
      endTime: NewendTime,
    });
    return response.data;
  } catch (error) {
    throw error;
  }
}
// 在组件被销毁前清除定时器，菜单2中
onBeforeUnmount(() => {
  clearInterval(pollingInterval);
});
</script>

<style scoped>
/* 用户名文字样式 */
.username-text {
  color: #1a37cd;
  font-size: 16px;
  margin-left: 20px;
  /* 调整左边距 */
}
/* 退出文字样式 */
.logout-text {
  margin-left: auto;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s;
  /* 平滑的颜色过渡效果 */
}
.logout-text:hover {
  text-decoration: underline;
  color: #18191a;
  /* 悬停时改变颜色，突出效果 */
}
/* 菜单2样式 */
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #55d515;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #35e51e;
}

</style>

他的功能是和超级用户差不多的

在菜单4中查询了数据库信息中的分店信息

设置了分页处理和菜单2一样，就不展示了

const response = await axios.put("/updateState", {

username: username,

state: newState,

});

return response.data;

} catch (error) {

throw error;

}

}

// 计算当前页显示的用户列表,2

const displayedUsers = computed(() => {

const startIndex = (currentPage.value - 1) * pageSize.value;

const endIndex = startIndex + pageSize.value;

return users.value.slice(startIndex, endIndex);

});

// 处理分页改变事件,2

function handlePageChange(newPage) {

currentPage.value = newPage;

}

// 更新用户时间信息2

function updateTime(user) {

const NewstartTime = user.startTime;

const NewendTime = user.endTime;

updateDatabaseTime(user.username, NewstartTime, NewendTime)

.then(() => {

// Time updated successfully

user.startTime = NewstartTime;

user.endTime = NewendTime;

})

.catch((error) => {

console.error("Error updating time:", error);

});

}

// 将时间信息推送到后端，2

async function updateDatabaseTime(username, NewstartTime, NewendTime) {

try {

const response = await axios.put("/updateTime", {

username: username,

startTime: NewstartTime,

endTime: NewendTime,

});

return response.data;

} catch (error) {

throw error;

}

}

// 在组件被销毁前清除定时器，菜单2中

onBeforeUnmount(() => {

clearInterval(pollingInterval);

});

他的功能是和超级用户差不多的

在菜单4中查询了数据库信息中的分店信息

设置了分页处理和菜单2一样，就不展示了
相关推荐
binishuaio几秒前
Java 第11天 (git版本控制器基础用法)
java·开发语言·git
zz.YE2 分钟前
【Java SE】StringBuffer
java·开发语言
老友@2 分钟前
aspose如何获取PPT放映页“切换”的“持续时间”值
java·powerpoint·aspose
wrx繁星点点17 分钟前
状态模式（State Pattern）详解
java·开发语言·ui·设计模式·状态模式
Upaaui20 分钟前
Aop+自定义注解实现数据字典映射
java
zzzgd81620 分钟前
easyexcel实现自定义的策略类, 最后追加错误提示列, 自适应列宽,自动合并重复单元格, 美化表头
java·excel·表格·easyexcel·导入导出
友善的鸡蛋22 分钟前
解决：使用EasyExcel导入Excel模板时出现数据导入不进去的问题
java·easyexcel·excel导入
星沁城22 分钟前
240. 搜索二维矩阵 II
java·线性代数·算法·leetcode·矩阵
NoneCoder35 分钟前
Java企业级开发系列（1）
java·开发语言·spring·团队开发·开发
一只爱好编程的程序猿37 分钟前
Java后台生成指定路径下创建指定名称的文件
java·python·数据下载
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play