一只ikun而已
一只ikun而已

健康系统练习

健康系统

项目建构：

前后端分离，前端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首页插入代码：

布局设置：
<template>
    
    <div class="common-layout">
        
        <el-container class="home-container">
                 
                 <el-aside width="200px">Asideel-aside>
            
            <el-container>
                
                <el-header>
                    首页
                    
                    
                el-header>
                
                <el-main>Mainel-main>
            el-container>
        el-container>
    div>
template>
并在style中设置了布局样式
/* 布局器的填充 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)]

在侧边栏里面添加了图标

        <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)]

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

/* 头样式 */
.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)

      <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 Onespan>
          template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item oneel-menu-item>
            <el-menu-item index="1-2">item twoel-menu-item>
          el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item threeel-menu-item>
          el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item fourtemplate>
            <el-menu-item index="1-4-1">item oneel-menu-item>
          el-sub-menu>
        el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu />el-icon>
          <span>Navigator Twospan>
        el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document />el-icon>
          <span>Navigator Threespan>
        el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting />el-icon>
          <span>Navigator Fourspan>
        el-menu-item>
      el-menu>

添加了注册按钮：

注册

在set中设置了register注册方法

// 注册按钮点击事件

  const register = () => {

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

  };

在return中设置了返回函数

register // 返回register函数

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

// 导入SignIn主页
import SignIn from '../components/SigIn.vue'

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

 {

  // 重定向到这个路径

  path: "/SigIn",

  // 导入的组件

  component:SignIn





 }

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

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

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

if (to.path==="/sigin")return next();

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

controller层

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层来访问数据层


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文件

DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<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首页

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)]

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

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

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

文章目录

  • **项目建构：**
  • **后端**页面
    • **在数据源中新建一个数据连接池application.yml：**
    • **在Java类中创建测试案列test来展示项目的结构**
    • **前后端分离导致他们的服务器端口通信不一致，需要让他们保持通信**
  • **前端页面：**
    • **环境准备：**
      • **需要下载node.js才能使用vue框架**
      • **安装node.js包管理器**
      • **安装vue-cli脚手架**
      • **启动下可视化界面在对应的目录下：**
      • **初始预设项目的创建：**
      • **要选择创建的版本选择3.x版本的**
      • **在创建完成后需要给vue添加一些组件在插件库里面添加插件**
      • **添加依赖：**
      • **启动项目：**
        • **对基础页面进行删减：**
        • **创建登录组件：**
        • **为了保证能访问到需要进行路由转发（index.js）**
        • **开发login组件：**
        • 创建了全局的css样式global.css
        • 登录页面成功显示：
        • 设置列表前面的搜索框
      • 样式添加：
        • 在global.css设置了登录容器的大小即为可视化窗口的大小
        • 在login.vue中设置了容器的高度大小为可视化窗口的100%
        • 设置了form表单样式：
        • 设置了log区域的div样式：
      • 添加用户登录表单非空前验证：
        • 添加属性：
        • 并且在对应的表单中绑定了对应的事件
        • **由于我使用的是vue3导致使用的挂载方法不一致，且挂载axios有先后顺序，必须在访问app之前挂载**
        • **在密码框添加了防可见**
        • 为了验证按钮点了之后是否生效我加了验证的日志
        • 登录显示后端数据测试
        • 添加了点击登录按钮后提示的消息框
        • 添加home首页创建home首页
        • 在home页面写上基本框架
        • 创建user对象进行封装（get，Set）：
        • 创建了一个登录控制器：
        • 到这实体用户User的自动封装，自动创建，已经完成
        • 导入json特殊字符串，形成json对象
        • 在成功点击登录后，在浏览器调试页面查看会话中的存储数据，点击登录之后会在调试页面生成key 和值，在点击退出之后这些数据也不会清除，这样的安全性大大下降
        • 设置了路由守卫(index.js)
      • 设置home页面的布局
        • 在elemenet中找到containerd 容器布置器
          • 布局设置：
          • 并在style中设置了布局样式
          • 在侧边栏里面添加了图标
      • 添加了注册按钮：
        • 在set中设置了register注册方法
        • 在return中设置了返回函数
        • 在路由中导入了注册的路径
        • 设置了重定向的组件和路径
        • controller层
        • dao层来访问数据层
        • uesrmapper.xml文件
      • 重新设置了home主页的布局
        • 设置了分界线在用户量，和用户状态上
        • 直接显示用户名
        • 我准备在我的用户量界面查询数据库信息然后通过图表显示在界面
          • 查询数据的映射文件：
        • 打算在用户状态里面画出用户名，和用户状态显示出他的状态开关和用户等级，并且支持用户状态的修改，在添加一个可以删除用户的按钮
          • 现在需要在用户等级为用户的加上他的会员时间，需要有个起始时间，和截至时间，以天为单位
        • 问题：

重新设置了home主页的布局

 

        
            
            
                
                退出
            
            
                
                
                    
                        用户量
                        
                        
                        用户状态

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


                    
                        用户量
                        
                        
                        用户状态

直接显示用户名

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

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

项目报错问题解决的思路

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

在查看前端问题是发现是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层，通过控制器，返回给前端，在前端绘制图表

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

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

List<Map<String,Object>>GetUserCountByMonth();

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


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

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

		
        

          

            

              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)]

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

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

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)]

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

表单界面|


          

            

              
                
                

                  用户名
                  等级
                  开始时间
                  截止时间
                  状态
                

              
              
                

                  {{ user.username }}
                  {{ user.role }}
                  {{ user.startTime }}
                  {{ user.endTime }}
                  
                    
                  
                

              
            

            
          


import { ref, onMounted, onBeforeUnmount } from "vue";

//菜单2
const userStatechartCanvasRef = ref(null);
const users = ref([]);

// 在组件挂载前调用异步函数，获取用户名信息
// 定时器，每隔一段时间获取用户信息
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 标注

// 菜单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)]

   
            
          
          
            
          

// 更新用户时间信息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管理的组件。在你的情况下，你可以创建一个带有定时任务的组件，用来检查和更新用户状态。

@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("检查并更新用户状态");
    }
}

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

-- 创建员工表
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)
);

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

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)]


            

              
                
                

                  员工
                  签到记录
                

              
              
                

                  {{ Employee.username }}
                  {{ Employee.sign_in }}
                

              
            

            
          


// 菜单3
const chartCanvasRefe = ref(null);
const Employees = ref([]);

pollingInterval = setInterval(pollEmployeeInfo, 60 * 1000); //每 1分钟 秒轮询一次

// 使用 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");
  }
}

// 获取员工信息，3
async function fetchEmployeeInfo() {
  try {
    const response = await axios.get("/employeeInfo");
    Employees.value = response.data;
  } catch (error) {
    console.error("Error fetching Employee information:", error);
  }
}

<select id="GetEmployeeInfo" parameterType="com.healthsystem.portplay.bean.Employee">
        select username, sign_in
        from employee
        order by username;
    select>

 List<Map<String, Object>> GetEmployeeInfo();

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();
    }
}

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

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

在菜单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一样，就不展示了

你可能感兴趣的:(java,tomcat,java,spring,mybatis)

  • Java进阶知识-反射 m0_74825108 面试学习路线阿里巴巴java服务器前端
    获取Class对象有三种方式获取Class对象：根据类的完整包名获取ClassClassclazz=Class.forName(“com.example.xjp.demo.reflect.PersonInfo”);根据类名直接获取ClassClassclazz=PersonInfo.class;根据实例类的对象获取ClassPersonInfopersonInfo=newPersonInfo();
  • Java进阶总结——集合 m0_74823683 面试学习路线阿里巴巴java开发语言
    Java进阶总结——集合说明：对于以上的框架图有如下几点说明1.所有集合类都位于java.util包下。Java的集合类主要由两个接口派生而出：Collection和Map，Collection和Map是Java集合框架的根接口，这两个接口又包含了一些子接口或实现类。集合接口：6个接口（短虚线表示），表示不同集合类型，是集合框架的基础。抽象类：5个抽象类（长虚线表示），对集合接口的部分实现。可扩展
  • HTML5新特性深度解析 longdong7889 前端学习html5前端html
    HTML5新特性深度解析HTML5作为现代Web开发的基石，其LivingStandard模式持续为开发者带来创新工具。本文将深入剖析2023年值得关注的最新特性，通过技术解析与实战示例展现其应用场景。一、革新性API赋能Web应用1.1PopoverAPI：原生交互革命显示详情悬浮内容支持自动关闭和层级管理浏览器原生实现弹窗系统支持auto/manual状态控制无需JavaScript实现显隐逻
  • 你需要更新的Java知识（面试必看、全网最全、持续更新） 珠峰日记 java后端
    一、java基础1、JDK版本相关（新特性、是否长期支持、选择建议等）新特性JDK8StreamAPI：提供了过滤、映射、排序等功能，让集合操作更简便。接口默认方法和静态方法：增强了接口的灵活性，允许在接口中定义默认方法和静态方法。JDK17密封类和接口：通过sealed、permits关键字限制类的继承或接口的实现，提高代码安全性和可维护性。模式匹配（instanceof）：在instanceo
  • Spring Boot 异步编程 珠峰日记 springbootjava后端
    文章目录一、异步方法的使用1.开启异步支持2.定义异步方法3.调用异步方法踩坑记录心得体会二、线程池配置1.自定义线程池2.使用自定义线程池踩坑记录心得体会三、异步任务的监控与管理1.日志记录2.异常处理3.线程池监控踩坑记录心得体会在现代应用程序开发中，异步编程是提升系统性能和响应能力的重要手段。SpringBoot提供了便捷的方式来实现异步编程，下面将详细介绍异步方法的使用、线程池配置以及异步
  • SpringBoot缓存实践 珠峰日记 springboot缓存后端
    文章目录一、引言二、SpringCache抽象（一）核心概念与原理（二）优势与局限性三、集成常用缓存（一）集成Redis缓存1.集成步骤2.踩坑记录与心得体会（二）集成Ehcache缓存1.集成步骤2.踩坑记录与心得体会四、缓存注解的使用（一）`@Cacheable`（二）`@CachePut`（三）`@CacheEvict`（四）`@Caching`（五）踩坑记录与心得体会五、总结一、引言在当今
  • Springboot应用json数据传给前端首字母大写变小写的问题 珠峰日记 css3cssspringjqueryhtml
    对接.net数据，属性首字母大写传给前端后自动转成了小写。解决思路网上有三种：1)如果没有使用fastjson(阿里巴巴出品),使用@JsonProperty("XXXX")的注解方式可以解决问题，XXXX就是转换成Json的属性名，但注意，只有放在getter上才是有效的，直接在属性上加没效果.(这说明spring默认的jackson类库处理是基于访问器。2)如果使用了fastjson,就用@J
  • Spring测试框架中的@ContextConfiguration继承机制 t0_54program springjava后端个人开发
    在Spring框架中，@ContextConfiguration注解是一个非常重要的工具，它用于指定测试类的上下文配置来源。然而，很多人可能并不清楚，这个注解还提供了inheritLocations和inheritInitializers属性，用于控制是否继承父类的配置位置和上下文初始化器。本文将通过具体的代码示例，深入探讨这两个属性的作用。默认行为：继承配置位置和初始化器在默认情况下，inher
  • Spring Boot——消息队列集成RabbitMQ详细步骤大全 程序员阿皓 SpringBootjava-rabbitmqspringbootrabbitmq
    SpringBoot提供了与多种消息队列系统集成的支持，其中最常见的是集成RabbitMQ或Kafka。以RabbitMQ为例集成的详细步骤如下：1.添加RabbitMQ的依赖首先，在SpringBoot项目的pom.xml文件中添加RabbitMQ的依赖：org.springframework.bootspring-boot-starter-amqp2.配置RabbitMQ的连接信息在appli
  • java 进阶教程_Java进阶教程 第2版 m0_74825718 面试学习路线阿里巴巴java开发语言
    第2版前言第1版前言语言基础篇第1章Java语言概述1.1Java语言简介1.1.1Java语言的发展历程1.1.2Java的版本历史1.1.3Java语言与C／C1.1.4Java的特点1.2JDK和Java开发环境及工作原理1.2.1JDK1.2.2Java开发环境1.2.3Java工作原理1.3第一个Java程序1.3.1JavaApplication程序第2版前言第1版前言语言基础篇第1章
  • SpringBoot(2，arm架构和x86架构区别 m0_64205716 程序员面试java后端
    //gradle自身会用到的相关设置buildscript{//仓库repositories{//本地mavenLocal()//中央仓库mavenCentral()//grandle插件maven{url‘https://plugins.gradle.org/m2/’}}//子模块会用到的变量ext{springBootVersion=‘2.4.4’}}//插件plugins{id‘java’i
  • 整合Python3.10 和 JDK1.8 docker镜像合成；java 调用python 敏君宝爸 pythonjavadocker
    ​准备-rw-r--r--1rootroot5732月2213:20Dockerfile-rw-r--r--1rootroot26382752月2213:18eva-1.0-SNAPSHOT.jar-rw-r--r--1rootroot23812月2213:18pascal2labelme.py-rw-r--r--1rootroot602月2213:22requirements.txt-rw-r-
  • LogBack 动态修改日志级别 敏君宝爸 日志logspringbootjava
    由于线上运行的项目，出现问题想看下sql的参数，或者一些框架的debug日志。需要把日志界别从info-->debug。需要动态实时的修改日志界别。只要类：LoggersEndpointmaven依赖:org.springframework.bootspring-boot-starter-actuatorspringboot1.x===================yml配置==========
  • TypeScript 和 JavaScript 的区别 前端与小赵 理念javascripttypescript前端
    1.类型系统JavaScript:动态类型：变量可以在运行时改变其类型。没有内置的类型检查机制，在编译时不会进行类型检查。类型错误通常在运行时才会被发现。TypeScript:静态类型：变量在声明时需要指定类型，并且在编译时会进行类型检查。提供了丰富的类型系统，包括基本类型、接口、类、泛型等。类型错误可以在编译时被捕获，提高了代码的可靠性和可维护性。2.语法和特性JavaScript:基本语法包括
  • springboot 适配ARM 架构 敏君宝爸 springboot架构java
    下载对应的mavenhttps://hub.docker.com/_/maven/tags?page=&page_size=&ordering=&name=3.5.3-alpinedockerpullmaven:3.5.3-alpine@sha256:4c4e266aacf8ea6976b52df8467134b9f628cfed347c2f6aaf9e6aff832f7c452、下载对应的jdk
  • javaEE概述 qq_45691343
    前言小编最近在学习javaEE的基础，所以总结了一下关于javaEE的框架知识，希望可以帮助到大家whatjavaEEjavaEE输入分布式多层的应用程序，javaEE平台用的是分布式多层应用模型为企业应用（由组件构成），根据他们不同的逻辑功能分为不同组件，构成JavaEE应用程序的组件根据应用组件在javaEE的不同环境安装到不同机器上，原因是因为：安装在不同组件还可以运行是基于vmWhyjav
  • JavaEE概述和入门 曦暮 servletservletjavacgi
    javaEE开发：为什么学JavaEE在我们学习Java语言时，你肯定是想知道Java到底能干些什么，现在到了JavaEE这个阶段，就可以告诉你了。JavaEE：Java平台企业版（JavaPlatformEnterpriseEdition），之前称为Java2Platform,EnterpriseEdition(J2EE)，2018年3月更名为JakartaEE(这个名称应该还没有得到群众认可)
  • JavaEE概述以及总结心得 一点星Cloud JavaEE过滤器javatomcat
    JavaEE概述以及总结心得Servlet生命周期JavaEE_01lifecycle学习任务:浏览器的任务:请求，处理，响应servlet任务:接收请求，通过对应的java代码处理请求，处理之后对其发出响应servlet由服务器创建，是单例的项目发布:tomcat集成进来注意:1,添加tomcat2,配置D:\ProgramFiles(x86)\apache-tomcat-9.0.33\weba
  • Java多线程与高并发专题——为什么 Map 桶中超过 8 个才转为红黑树？ 黄雪超 技术基础java开发语言并发编程
    引入JDK1.8的HashMap和ConcurrentHashMap都有这样一个特点：最开始的Map是空的，因为里面没有任何元素，往里放元素时会计算hash值，计算之后，第1个value会首先占用一个桶（也称为槽点）位置，后续如果经过计算发现需要落到同一个桶中，那么便会使用链表的形式往后延长，俗称“拉链法”。当链表长度大于或等于阈值（默认为8）的时候，如果同时还满足容量大于或等于MIN_TREEI
  • 8、Java核心API系列(六) 跟着汪老师学编程 java开发语言
    七、文件与IO1、文件和目录操作（File类）Java中的File类位于java.io包中，主要用于处理文件和目录的基本操作，如创建、删除、复制、移动文件或目录，以及获取文件的属性。1.创建文件或目录创建文件：使用File类的构造器并调用createNewFile()方法。创建目录：使用mkdir()方法创建单层目录，使用mkdirs()方法创建多层目录。示例：importjava.io.File
  • 10、Java核心API系列(八) 跟着汪老师学编程 java开发语言
    九、并发与多线程1、Java并发API概述Java并发API是Java语言中用于多线程编程的核心工具包，主要位于java.util.concurrent和java.util.concurrent.locks包中。它提供了高效、简洁的方式来处理并发编程中的常见问题。Java并发的核心目标：提高程序的响应速度。提高程序的吞吐量（处理更多任务）。-简化并发编程的复杂性。Java并发的基本概念：线程（Th
  • 5、Java核心API系列（三） 跟着汪老师学编程 javawindows
    四、集合框架1、集合框架概述Java集合框架为Java应用程序提供了数据结构的实现，这些数据结构如接口、类和算法是为了处理对象集合的一种统一的方式。集合框架的核心接口主要包括：Collection、List、Set、Queue和Map。Collection接口：定义：是所有集合的根接口，定义了集合的基本操作，如添加、移除、遍历等。子接口：List、Set、Queue等。方法：add(Ee)：添加元
  • Spring Boot整合Resilience4j教程 嘵奇 提升自己springbootjava
    精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取以下是将SpringBoot与Resilience4j整合的详细教程，包含基础配置和核心功能示例：SpringBoot整合Resilience4j教程Resilience4j提供容错机制（断路器、重试、限流等），帮助构建弹性微服务。一、环境准备创建项目使用SpringInitializr生成项目，选择：
  • React生态、Vue生态与跨框架前端解决方案 Coder LM Wang JavaScript前端react.jsvue.js
    React生态系统1基础框架React.js是一个用于构建UI的JavaScript库。2应用框架Next.js是基于React.js的完整应用框架。主要负责应用如何工作：应用架构：路由系统、页面结构渲染策略：服务端渲染(SSR)、静态生成(SSG)、客户端渲染性能优化：代码分割、图片优化、字体优化开发体验：热模块替换、TypeScript支持部署：Vercel平台集成、自托管选项3UI组件库MU
  • 基于SpringBoot的电影售票系统 Computer程序设计 Java计算机程序设计springboot后端javavue.jsspringjava-eetomcat
    引言  在当今信息化高速发展的时代，互联网已经成为人们日常生活不可或缺的一部分。电影作为一种重要的文化娱乐形式，其售票方式也逐渐从传统的线下购票转向线上购票。基于SpringBoot和Vue的电影售票系统，正是为了迎合这一趋势而设计的。该系统不仅为用户提供了便捷、高效的购票渠道，还为影院管理者提供了强大的后台管理功能。通过该系统，用户可以轻松浏览影片信息、选择座位、在线支付，完成购票全过程；而影院
  • Java团队招人 码哥文章都是干货 redisspringspringbootjava数据库
    招生对象:在校大学生，零基础小白招生目的:刚开始先跟着学习技术，技术成熟一起接单挣钱成立一个小组，又学了技术又有项目经验，简历和就业全包要学习态度认真的，想学的名额8个
  • 实时数据推送：Spring Boot 中两种 SSE 实战方案 微特尔普拉斯 javaSpringBoothtml5前端服务器springhttp交互
    在Web开发中，实时数据交互变得越来越普遍。无论是股票价格的波动、比赛比分的更新，还是聊天消息的传递，都需要服务器能够及时地将数据推送给客户端。传统的HTTP请求-响应模式在处理这类需求时显得力不从心，而服务器推送事件（Server-SentEvents，SSE）为我们提供了一种轻量级且高效的解决方案。本文将介绍两种基于SpringBoot实现SSE的方案，并结合代码示例，帮助你快速掌握实时数据推
  • Java阻塞队列深度解析：高并发场景下的安全卫士 没什么技术 java阻塞队列
    一、阻塞队列的核心价值在电商秒杀系统中，瞬时涌入的10万请求如果直接冲击数据库，必然导致系统崩溃。阻塞队列如同一个智能缓冲带，通过流量削峰和异步解耦两大核心能力，成为高并发系统的核心组件。二、Java阻塞队列实现类对比队列实现类数据结构锁机制适用场景吞吐量ArrayBlockingQueue数组单锁ReentrantLock固定容量场景中LinkedBlockingQueue链表双锁分离高吞吐量生
  • 深入解析Java MDC：日志链路追踪的利器 没什么技术 javaMDC
    一、什么是MDC？MDC（MappedDiagnosticContext）是SLF4J提供的一个线程安全的诊断上下文工具。它允许开发者在同一线程上下文中存储多个键值对信息，这些信息可以自动附加到日志输出中，实现日志的上下文关联。二、MDC的核心作用作用说明典型场景链路追踪跟踪请求完整处理流程分布式系统调用跟踪上下文传递跨方法传递公共参数用户ID、机构号等透传日志增强自动添加公共字段到日志请求IP、
  • 深入源码分析spring AOP 萌新coder Java基础知识springjava后端
    深入源码分析springAOP一、SpringAOP核心概念AOP（面向切面编程）是Spring框架的核心功能之一，它通过动态代理技术，在不修改源代码的情况下，为业务逻辑横向添加通用功能（如日志、事务、权限等）。其核心思想是将业务代码与非业务代码解耦，例如：//业务代码publicvoidtransferMoney(){//转账逻辑...}//非业务代码（日志记录）publicvoidlog(){
  • 对股票分析时要注意哪些主要因素？ 会飞的奇葩猪 股票 分析 云掌股吧
    　　众所周知，对散户投资者来说，股票技术分析是应战股市的核心武器，想学好股票的技术分析一定要知道哪些是重点学习的，其实非常简单，我们只要记住三个要素：成交量、价格趋势、振荡指标。     一、成交量 　　大盘的成交量状态。成交量大说明市场的获利机会较多，成交量小说明市场的获利机会较少。当沪市的成交量超过150亿时是强市市场状态，运用技术找综合买点较准；
  • 【Scala十八】视图界定与上下文界定 bit1129 scala
    Context Bound，上下文界定，是Scala为隐式参数引入的一种语法糖，使得隐式转换的编码更加简洁。   隐式参数 首先引入一个泛型函数max，用于取a和b的最大值 def max[T](a: T, b: T) = { if (a > b) a else b }  因为T是未知类型，只有运行时才会代入真正的类型，因此调用a >
  • C语言的分支——Object-C程序设计阅读有感 darkblue086 applec框架cocoa
    自从1972年贝尔实验室Dennis Ritchie开发了C语言，C语言已经有了很多版本和实现，从Borland到microsoft还是GNU、Apple都提供了不同时代的多种选择，我们知道C语言是基于Thompson开发的B语言的，Object-C是以SmallTalk-80为基础的。和C++不同的是，Object C并不是C的超集，因为有很多特性与C是不同的。 Object-C程序设计这本书
  • 去除浏览器对表单值的记忆 周凡杨 html记忆autocompleteform浏览
                                       &n
  • java的树形通讯录 g21121 java
    最近用到企业通讯录，虽然以前也开发过，但是用的是jsf，拼成的树形，及其笨重和难维护。后来就想到直接生成json格式字符串，页面上也好展现。 // 首先取出每个部门的联系人 for (int i = 0; i < depList.size(); i++) { List<Contacts> list = getContactList(depList.get(i
  • Nginx安装部署 510888780 nginxlinux
    Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源
  • java servelet异步处理请求 墙头上一根草 ｊａｖａ异步返回ｓｅｒｖｌｅｔ
    servlet3.0以后支持异步处理请求，具体是使用AsyncContext ，包装httpservletRequest以及httpservletResponse具有异步的功能，        final AsyncContext ac = request.startAsync(request, response);   ac.s
  • 我的spring学习笔记8-Spring中Bean的实例化 aijuans Spring 3
    在Spring中要实例化一个Bean有几种方法： 1、最常用的（普通方法） <bean id="myBean" class="www.6e6.org.MyBean" /> 使用这样方法，按Spring就会使用Bean的默认构造方法，也就是把没有参数的构造方法来建立Bean实例。 （有构造方法的下个文细说） 2、还
  • 为Mysql创建最优的索引 annan211 mysql索引
    索引对于良好的性能非常关键，尤其是当数据规模越来越大的时候，索引的对性能的影响越发重要。 索引经常会被误解甚至忽略，而且经常被糟糕的设计。 索引优化应该是对查询性能优化最有效的手段了，索引能够轻易将查询性能提高几个数量级，最优的索引会比 较好的索引性能要好2个数量级。 1 索引的类型 (1) B-Tree 不出意外，这里提到的索引都是指 B-
  • 日期函数 百合不是茶 oraclesql日期函数查询
      ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02 13:45:25为例) Year: yy two digits 两位年 显示值:07 yyy three digits 三位年 显示值:007
  • 线程优先级 bijian1013 javathread多线程java多线程
    多线程运行时需要定义线程运行的先后顺序。 线程优先级是用数字表示，数字越大线程优先级越高，取值在1到10，默认优先级为5。 实例： package com.bijian.study; /** * 因为在代码段当中把线程B的优先级设置高于线程A,所以运行结果先执行线程B的run()方法后再执行线程A的run()方法 * 但在实际中，JAVA的优先级不准，强烈不建议用此方法来控制执
  • 适配器模式和代理模式的区别 bijian1013 java设计模式
    一.简介        适配器模式：适配器模式（英语：adapter pattern）有时候也称包装样式或者包装。将一个类的接口转接成用户所期待的。一个适配使得因接口不兼容而不能在一起工作的类工作在一起，做法是将类别自己的接口包裹在一个已存在的类中。      &nbs
  • 【持久化框架MyBatis3三】MyBatis3 SQL映射配置文件 bit1129 Mybatis3
     SQL映射配置文件一方面类似于Hibernate的映射配置文件，通过定义实体与关系表的列之间的对应关系。另一方面使用<select>,<insert>,<delete>，<update>元素定义增删改查的SQL语句， 这些元素包含三方面内容 1. 要执行的SQL语句 2. SQL语句的入参，比如查询条件 3. SQL语句的返回结果
  • oracle大数据表复制备份个人经验 bitcarter oracle大表备份大表数据复制
    前提：    数据库仓库A（就拿oracle11g为例）中有两个用户user1和user2,现在有user1中有表ldm_table1,且表ldm_table1有数据5千万以上，ldm_table1中的数据是从其他库B（数据源）中抽取过来的，前期业务理解不够或者需求有变，数据有变动需要重新从B中抽取数据到A库表ldm_table1中。    
  • HTTP加速器varnish安装小记 ronin47 http varnish 加速
    上午共享的那个varnish安装手册，个人看了下，有点不知所云，好吧~看来还是先安装玩玩！ 苦逼公司服务器没法连外网，不能用什么wget或yum命令直接下载安装，每每看到别人博客贴出的在线安装代码时，总有一股羡慕嫉妒“恨”冒了出来。。。好吧，既然没法上外网，那只能麻烦点通过下载源码来编译安装了！ Varnish 3.0.4下载地址： http://repo.varnish-cache.org/
  • java-73-输入一个字符串，输出该字符串中对称的子字符串的最大长度 bylijinnan java
    public class LongestSymmtricalLength { /* * Q75题目：输入一个字符串，输出该字符串中对称的子字符串的最大长度。 * 比如输入字符串“google”，由于该字符串里最长的对称子字符串是“goog”，因此输出4。 */ public static void main(String[] args) { Str
  • 学习编程的一点感想 Cb123456 编程感想Gis
           写点感想，总结一些，也顺便激励一些自己.现在就是复习阶段，也做做项目.      本专业是GIS专业，当初觉得本专业太水，靠这个会活不下去的，所以就报了培训班。学习的时候，进入状态很慢，而且当初进去的时候，已经上到Java高级阶段了，所以.....，呵呵，之后有点感觉了，不过，还是不好好写代码，还眼高手低的，有
  • [能源与安全]美国与中国 comsci 能源
         现在有一个局面：地球上的石油只剩下N桶，这些油只够让中国和美国这两个国家中的一个顺利过渡到宇宙时代，但是如果这两个国家为争夺这些石油而发生战争，其结果是两个国家都无法平稳过渡到宇宙时代。。。。而且在战争中，剩下的石油也会被快速消耗在战争中，结果是两败俱伤。。。       在这个大
  • SEMI-JOIN执行计划突然变成HASH JOIN了 的原因分析 cwqcwqmax9 oracle
    甲说： A B两个表总数据量都很大，在百万以上。 idx1  idx2字段表示是索引字段 A B 两表上都有 col1字段表示普通字段 select xxx from A where A.idx1 between mmm and nnn      and exists (select 1 from B where B.idx2 =
  • SpringMVC-ajax返回值乱码解决方案 dashuaifu AjaxspringMVCresponse中文乱码
      SpringMVC-ajax返回值乱码解决方案   一：（自己总结，测试过可行） ajax返回如果含有中文汉字，则使用：（如下例：） @RequestMapping(value="/xxx.do")       public @ResponseBody void getPunishReasonB
  • Linux系统中查看日志的常用命令 dcj3sjt126com OS
    因为在日常的工作中，出问题的时候查看日志是每个管理员的习惯，作为初学者，为了以后的需要，我今天将下面这些查看命令共享给各位 cat tail -f 日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志，是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关的日志信息 /var/log/maillog 与邮件相关的日志信
  • [应用结构]应用 dcj3sjt126com PHPyii2
    应用主体 应用主体是管理 Yii 应用系统整体结构和生命周期的对象。 每个Yii应用系统只能包含一个应用主体，应用主体在 入口脚本中创建并能通过表达式 \Yii::$app 全局范围内访问。 补充: 当我们说"一个应用"，它可能是一个应用主体对象，也可能是一个应用系统，是根据上下文来决定[译：中文为避免歧义，Application翻译为应
  • assertThat用法 eksliang JUnitassertThat
    junit4.0  assertThat用法 一般匹配符1、assertThat( testedNumber, allOf( greaterThan(8), lessThan(16) ) ); 注释： allOf匹配符表明如果接下来的所有条件必须都成立测试才通过，相当于“与”（&&） 2、assertThat( testedNumber, anyOf( g
  • android点滴2 gundumw100 应用服务器android网络应用OSHTC
    如何让Drawable绕着中心旋转？ Animation a = new RotateAnimation(0.0f, 360.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f); a.setRepeatCount(-1); a.setDuration(1000); 如何控制Andro
  • 超简洁的CSS下拉菜单 ini htmlWeb工作html5css
    效果体验：http://hovertree.com/texiao/css/3.htmHTML文件： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>简洁的HTML+CSS下拉菜单-HoverTree</title>
  • kafka consumer防止数据丢失 kane_xie kafkaoffset commit
    kafka最初是被LinkedIn设计用来处理log的分布式消息系统，因此它的着眼点不在数据的安全性（log偶尔丢几条无所谓），换句话说kafka并不能完全保证数据不丢失。   尽管kafka官网声称能够保证at-least-once，但如果consumer进程数小于partition_num，这个结论不一定成立。   考虑这样一个case，partiton_num=2
  • @Repository、@Service、@Controller 和 @Component mhtbbx DAOspringbeanprototype
    @Repository、@Service、@Controller 和 @Component 将类标识为Bean Spring 自 2.0 版本开始，陆续引入了一些注解用于简化 Spring 的开发。@Repository注解便属于最先引入的一批，它用于将数据访问层 (DAO 层 ) 的类标识为 Spring Bean。具体只需将该注解标注在 DAO类上即可。同时，为了让 Spring 能够扫描类
  • java 多线程高并发读写控制 误区 qifeifei java thread
    先看一下下面的错误代码，对写加了synchronized控制，保证了写的安全，但是问题在哪里呢？ public class testTh7 { private String data; public String read(){ System.out.println(Thread.currentThread().getName() + "read data "
  • mongodb replica set(副本集)设置步骤 tcrct javamongodb
    网上已经有一大堆的设置步骤的了，根据我遇到的问题，整理一下，如下： 首先先去下载一个mongodb最新版，目前最新版应该是2.6 cd /usr/local/bin wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.0.tgz tar -zxvf mongodb-linux-x86_64-2.6.0.t
  • rust学习笔记 wudixiaotie 学习笔记
    1.rust里绑定变量是let，默认绑定了的变量是不可更改的，所以如果想让变量可变就要加上mut。 let x = 1; let mut y = 2; 2.match 相当于erlang中的case，但是case的每一项后都是分号，但是rust的match却是逗号。 3.match 的每一项最后都要加逗号，但是最后一项不加也不会报错，所有结尾加逗号的用法都是类似。 4.每个语句结尾都要加分
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他