健康系统练习

一只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一样，就不展示了
相关推荐
running up that hill1 分钟前
数据库中的增删改查操作、聚合函数、内置函数、分组查询
java·数据库·sql·mysql
潜洋5 分钟前
Spring Boot 教程之六：Spring Boot - 架构
java·spring boot·后端·架构
希忘auto9 分钟前
详解RabbitMQ在Ubuntu上的安装
java·rabbitmq
铅华尽16 分钟前
Java---JDBC案例--手机信息管理系统
java·开发语言·智能手机
小码的头发丝、21 分钟前
Maven的安装与配置
java·数据库·maven
说书客啊31 分钟前
计算机毕业设计 | SpringBoot+vue线上家具商城 家居商品购买系统(附源码+论文)
java·spring boot·node.js·vue·毕业设计·智能家居·课程设计
小阿龙...33 分钟前
创建mapreduce项目使用maven
java·ide·hadoop·spark·big data
疯一样的码农36 分钟前
使用命令行创建 Maven 项目
java·maven
2的n次方_39 分钟前
MyBatis Plus 项目的创建和使用
数据库·mybatis·mybatis plus
飞滕人生TYF44 分钟前
位运算实现加法 的过程中 保证最终进位为 0 详解
java·位运算
热门推荐
01【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10国内外大模型汇总：Open AI大模型、Google大模型、Microsoft大模型、文心一言大模型、通义千问大模型、字节豆包大模型、智普清言大模型