健康系统练习

这篇具有很好参考价值的文章主要介绍了健康系统练习。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

健康系统

项目建构:

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

后端页面

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

其中的健康系统练习,java,javaweb,java,tomcat,spring boot,vue加载了数据库连接池的驱动

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

在浏览器上输入地址后

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

前端页面:

环境准备:

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

安装node.js包管理器

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

安装vue-cli脚手架

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

npm install -g @vue/cli

查看下版本

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

成功启动:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

初始预设项目的创建:

在D盘下创建此项目

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

在最后创建的前一步

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

点击完成安装

添加依赖:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

启动项目:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

对基础页面进行删减:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

创建登录组件:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

开发login组件:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

在导入到全局变量

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

登录页面成功显示:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

设置列表前面的搜索框

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

打开健康系统练习,java,javaweb,java,tomcat,spring boot,vue

这里面有用法

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

样式添加:

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

设置了背景颜色和大小

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

成功让其填充到页面

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

设置了form表单样式:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

设置了log区域的div样式:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

设置了图标:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

结果:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

设置了form表单的样式:

调整后:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

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

添加属性:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

(vue2)

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

(vue 3)

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

在密码框添加了防可见

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

浏览器开发者工具下

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

登录显示后端数据测试

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

点击登录后成功显示

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

添加home首页创建home首页

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

在home页面写上基本框架

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

创建user对象进行封装(get,Set):

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

创建了一个登录控制器:

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

在dao成进行数据库的访问

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

编写了查询语句

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

返回了controller层,进行登录

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

在home.vue中清除session

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

改了之后

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

设置home页面的布局

在elemenet中找到containerd 容器布置器

Container | Element Plus (element-plus.org)

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

在home首页插入代码:

布局设置:
<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中设置了布局样式
/* 布局器的填充 height: 100vh,可以确保布局容器填充整个视口的高度*/
.home-container{
    height: 100vh;
}
/* home主页样式设置 */
/* 头样式 */
.el-header{
    background-color: #373d41;
}
/* 侧边栏样式 */
.el-aside{
    background-color: #333744;
}
/* 主体样式 */
.el-main{
    background-color: #eaedf1;
}

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

添加导航栏

导航 |元素加 (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 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>

添加了注册按钮:

<el-button type="success" @click="register">注册</el-button>
在set中设置了register注册方法

// 注册按钮点击事件

  const register = () => {

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

  };
在return中设置了返回函数
register // 返回register函数
在路由中导入了注册的路径
// 导入SignIn主页
import SignIn from '../components/SigIn.vue'	
设置了重定向的组件和路径
 {

  // 重定向到这个路径

  path: "/SigIn",

  // 导入的组件

  component:SignIn





 }

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

由于前面设置了路由守卫,导致了在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">
<!--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首页

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时,登录不了,我改变了他的状态

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

成功登录当首页

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

健康系统练习,java,javaweb,java,tomcat,spring boot,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>

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

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue


重新设置了home主页的布局

 <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>
设置了分界线在用户量,和用户状态上
<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>
直接显示用户名

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

项目报错问题解决的思路

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

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

在后端的报错发现是

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

这行有问题

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

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

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

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

重新跑了一次程序发现成功运行
我准备在我的用户量界面查询数据库信息然后通过图表显示在界面

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

在数据库查询到的数据,然后通过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();
    }

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

		<!-- 主栏 -->
        <!-- 用户量统计图组件 -->
<el-main>
          <div v-if="activeMenu === '1'">
            <div>
              <canvas ref="chartCanvasRef" width="400" height="200</canvas>
            </div>
          </div>
</el-main>
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);

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

 <el-switch v-model="value" active-text="Open" inactive-text="Close" />

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

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

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

SELECT
    username,
    role,
    state,
    startTime,
    endTime
FROM
    user
ORDER BY
    username;

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

问题:

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

我点击关闭了

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

关闭是0

出问题代码

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

修改后

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

代码更新了,点击关闭

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

我的update也正常了

健康系统练习,java,javaweb,java,tomcat,spring boot,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>
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的,有12 标注
// 菜单2样式
table {
  border-collapse: collapse;
  width: 100%;
}

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

th {
  background-color: #35e51e;
}

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,vue

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

健康系统练习,java,javaweb,java,tomcat,spring boot,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>
// 更新用户时间信息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 = '普通管理员';

健康系统练习,java,javaweb,java,tomcat,spring boot,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>
// 菜单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();
    }
}

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

<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一样,就不展示了

到这简单的前后端分离项目已经完成,只是记录自己的学习,欢迎大佬指正
t(“/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);
});
文章来源地址https://www.toymoban.com/news/detail-701503.html


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

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

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

到这简单的前后端分离项目已经完成,只是记录自己的学习,欢迎大佬指正

到了这里,关于健康系统练习的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • UWB高精度人员定位系统源码,微服务+java+ spring boot+ vue+ mysql技术开发

    工业物联网感知预警体系,大中小企业工业数字化转型需求的工业互联网平台 工厂人员定位系统是指能够对工厂中的人员、车辆、设备等进行定位,实现对人员和车辆的实时监控与调度的系统,是智慧工厂建设中必不可少的一环。由于工厂的工作环境比较复杂,如果管理不当

    2024年02月11日
    浏览(23)
  • 【java毕业设计】基于Spring Boot+Vue+mysql的论坛管理系统设计与实现(程序源码)-论坛管理系统

    大家好,今天给大家介绍 基于Spring Boot+Vue+mysql的论坛管理系统设计与实现 ,本论文只截取部分文章重点,文章末尾附有本毕业设计完整源码及论文的获取方式。更多毕业设计源码可订阅查看上方【毕业设计】专栏获取哦。 目录  基于Spring Boot+Vue+mysql的论坛管理系统设计与实

    2024年02月12日
    浏览(34)
  • 宿舍管理系统的设计与实现:基于Spring Boot、Java、Vue.js和MySQL的完整解决方案

    ✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 | SpringBoot/SSM Python实战项目 | Django 微信小

    2024年01月17日
    浏览(23)
  • 基于Java的OA办公管理系统,Spring Boot框架,vue技术,mysql数据库,前台+后台,完美运行,有一万一千字论文。

    目录 演示视频 基本介绍 功能结构 论文目录 系统截图 基于Java的OA办公管理系统,Spring Boot框架,vue技术,mysql数据库,前台+后台,完美运行,有一万一千字论文。 系统中的功能模块主要是实现管理员和员工的管理; 管理员:个人中心、普通员工管理、办公文件管理、公共信

    2024年02月10日
    浏览(26)
  • 健康系统练习

    2024年02月09日
    浏览(3)
  • Spring Boot 3.x 系列【35】服务监控 | 健康信息

    有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot版本3.0.5 源码地址:https://gitee.com/pearl-organization/study-spring-boot3 Health 是健康的意思,该端点用来检查正在运行的程序状态,可以在生产环境中监控软件,当发生故障时可以进行告警。 在之前我们访问只返回了如下信息

    2024年02月06日
    浏览(15)
  • 基于javaweb+mysql的jsp+servlet学生成绩管理系统(管理员、教师、学生)(java+jsp+servlet+javabean+mysql+tomcat)

    基于javaweb+mysql的jsp+servlet学生成绩管理系统(管理员、教师、学生)(java+jsp+servlet+javabean+mysql+tomcat) 运行环境 Java≥8、MySQL≥5.7、Tomcat≥8 开发工具 eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计,大作业,毕业设计,项目练习,学习演示等 功能说明 管理员:个人信息、课程

    2024年02月02日
    浏览(34)
  • JavaWeb编程面试题——Spring Boot

    面试题==知识点,这里所记录的面试题并不针对于面试者,而是将这些面试题作为技能知识点来看待。不以刷题进大厂为目的,而是以学习为目的。这里的知识点会持续更新,目录也会随时进行调整。 关注公众号:编程火箭车 。在【粉丝福利】中点击【面题大全】,其中的

    2024年02月06日
    浏览(27)
  • 基于Spring Boot+Vue的在线拍卖系统

    随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单管理、留言板管理、系统管

    2024年04月08日
    浏览(19)
  • 基于Spring Boot + Vue的电影购票系统

    基于Spring Boot + Vue的电影购票系统 功能介绍 分为用户端和商家端,商家端只能让拥有商家角色的人登录 商家可以在系统上面注册自己家的影院信息选择影院进去管理,在选择完要进行操作的影院后,可以在系统的电影库选择电影为当前的影院进行电影排期, 电影排期模块有

    2024年03月11日
    浏览(22)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包