基于java springboot+VUE疫情防疫系统系统前后端分离设计和实现

news2024/10/6 8:34:34

基于java springboot+VUE疫情防疫系统系统前后端分离设计和实现

博主介绍：5年java开发经验，专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域
作者主页 央顺技术团队
Java毕设项目精品实战案例《1000套》
欢迎点赞 收藏 ⭐留言
文末获取源码联系方式

文章目录

  • 基于java springboot+VUE疫情防疫系统系统前后端分离设计和实现
  • 主要模块：
    • 登录之后进入系统首页：目前系统主要功能如下
    • 用户管理模块：用户添加、修改、删除、查询等基本操作
    • 角色管理模块、通过用户绑定角色、角色控制菜单显示、灵活控制菜单。
    • 前端VUE代码添加菜单
    • 菜单添加修改列表层操作
    • 历史行程数据管理：添加修改删除等操作
    • 用户每日健康打卡列表数据展示以及添加打卡信息
    • 员工出行外出报备管理申请
    • 员工复工申请
    • 管理员审核
    • 通知公告模块:
    • 数据库连接：
    • 前后端代码结构：
  • 主要表设计：
    • 用户表：
    • 外出报备表：
    • 健康登记表：
    • 用户行程表：
  • 一些设计报告和文档描述参考
  • 获取源码：

主要模块：

管理员用户登录：用户登录。
用户信息: 用户信息数据的列表查看、修改和删除、用户绑定角色来显示对应的菜单显示。
角色管理：角色信息数据的列表查看、修改和删除、每个角色可以设置不同菜单显示、超级管理员拥有最高权限。
菜单管理: 菜单信息数据的列表查看、修改和删除、可以通过用户角色来设置
菜单权限：根据用户绑定角色、角色绑定菜单显示、以及基础菜单的添加、修改和删除操作。
实时疫情状态：通过echarts图标来模拟实现数据驱动标识、实时显示疫情分布图和感染人员信息等。
历史行程管理：每日登记管理：外出报备管理：复工申请管理：审核信息管理：
通知公告管理：管理员发布一些通知公告信息以及管理查看等

登录之后进入系统首页：目前系统主要功能如下

在这里插入图片描述

用户管理模块：用户添加、修改、删除、查询等基本操作

在这里插入图片描述

角色管理模块、通过用户绑定角色、角色控制菜单显示、灵活控制菜单。

在这里插入图片描述
在这里插入图片描述

前端VUE代码添加菜单

<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
    </el-form>
 
    <el-table :data="dataList" row-key="menuId" border style="width: 100%; ">
      <el-table-column prop="name" header-align="center" min-width="150" label="名称" ></el-table-column>
      <el-table-column prop="parentName" header-align="center" align="center" width="120" label="上级菜单">
      </el-table-column>
      <el-table-column header-align="center" align="center" label="图标"><template slot-scope="scope">
          <icon-svg :name="scope.row.icon || ''"></icon-svg></template>
      </el-table-column>
      <el-table-column prop="type" header-align="center" align="center" label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
          <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
          <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" header-align="center" align="center" label="排序号">
      </el-table-column>
      <el-table-column prop="url" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="菜单URL">
      </el-table-column>
      <el-table-column
        prop="perms"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="授权标识">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
          <el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
 
<script>
  import AddOrUpdate from './menu-add-or-update'
  import { treeDataTranslate } from '@/utils'
  export default {
    data () {
      return {
        dataForm: {},
        dataList: [],
        dataListLoading: false,
        addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/menu/list'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.dataList = treeDataTranslate(data, 'menuId')
          this.dataListLoading = false
        })
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
            method: 'post',
            data: this.$http.adornData()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {})
      }
    }
  }
</script>

菜单添加修改列表层操作

在这里插入图片描述

历史行程数据管理：添加修改删除等操作

在这里插入图片描述

用户每日健康打卡列表数据展示以及添加打卡信息

在这里插入图片描述
在这里插入图片描述

员工出行外出报备管理申请

在这里插入图片描述

员工复工申请

在这里插入图片描述
在这里插入图片描述

管理员审核

在这里插入图片描述

通知公告模块:

在这里插入图片描述

数据库连接：

spring:
    datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        druid:
            driver-class-name: com.mysql.jdbc.Driver
            url: jdbc:mysql://localhost:3306/renren_fast?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
            username: root
            password: 123456
            initial-size: 10
            max-active: 100
            min-idle: 10
            max-wait: 60000
            pool-prepared-statements: true
            max-pool-prepared-statement-per-connection-size: 20
            time-between-eviction-runs-millis: 60000
            min-evictable-idle-time-millis: 300000
            #Oracle需要打开注释
            #validation-query: SELECT 1 FROM DUAL
            test-while-idle: true
            test-on-borrow: false
            test-on-return: false
            stat-view-servlet:
                enabled: true
                url-pattern: /druid/*
                #login-username: admin
                #login-password: admin
            filter:
                stat:
                    log-slow-sql: true
                    slow-sql-millis: 1000
                    merge-sql: false
                wall:
                    config:
                        multi-statement-allow: true
 
 
##多数据源的配置
#dynamic:
#  datasource:
#    slave1:
#      driver-class-name: com.microsoft.sqlserver.jdbc.SQLServerDriver
#      url: jdbc:sqlserver://localhost:1433;DatabaseName=renren_security
#      username: sa
#      password: 123456
#    slave2:
#      driver-class-name: org.postgresql.Driver
#      url: jdbc:postgresql://localhost:5432/renren_security
#      username: renren
#      password: 123456

前后端代码结构：

在这里插入图片描述

主要表设计：

用户表：

CREATE TABLE `NewTable` (
`user_id`  bigint(20) NOT NULL AUTO_INCREMENT ,
`username`  varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '用户名' ,
`password`  varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '密码' ,
`salt`  varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '盐' ,
`email`  varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '邮箱' ,
`mobile`  varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '手机号' ,
`status`  tinyint(4) NULL DEFAULT NULL COMMENT '状态  0：禁用   1：正常' ,
`create_user_id`  bigint(20) NULL DEFAULT NULL COMMENT '创建者ID' ,
`create_time`  datetime NULL DEFAULT NULL COMMENT '创建时间' ,
PRIMARY KEY (`user_id`),
UNIQUE INDEX `username` (`username`) USING BTREE 
)
ENGINE=InnoDB
DEFAULT CHARACTER SET=utf8mb4 COLLATE=utf8mb4_general_ci
COMMENT='系统用户'

外出报备表：

CREATE TABLE `NewTable` (
`id`  int(11) NOT NULL AUTO_INCREMENT ,
`wc_time`  datetime NULL DEFAULT NULL COMMENT '外出时间' ,
`wc_yy`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '外出原因' ,
`wc_dd`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '外出地点' ,
`username`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户姓名' ,
`phone`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '联系手机号码' ,
`bz`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '备注说明' ,
`stu`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
PRIMARY KEY (`id`)
)
ENGINE=InnoDB
DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci
AUTO_INCREMENT=17
ROW_FORMAT=COMPACT
;

健康登记表：

CREATE TABLE `NewTable` (
`id`  int(11) NOT NULL AUTO_INCREMENT ,
`name`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '姓名' ,
`phone`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '手机号' ,
`szd`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '所在地' ,
`stzk`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '身体状况' ,
`grjc`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '是否和感染人员接触' ,
`bz`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`create_time`  datetime NULL DEFAULT NULL COMMENT '日期' ,
`tw`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
PRIMARY KEY (`id`)
)
ENGINE=InnoDB
DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci
AUTO_INCREMENT=10
ROW_FORMAT=COMPACT
;

用户行程表：

CREATE TABLE `NewTable` (
`id`  int(11) NOT NULL AUTO_INCREMENT ,
`username`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`cx_time`  datetime NULL DEFAULT NULL ,
`place`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`bz`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
`mobile`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
PRIMARY KEY (`id`)
)
ENGINE=InnoDB
DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci
AUTO_INCREMENT=8
ROW_FORMAT=COMPACT
;

一些设计报告和文档描述参考

在这里插入图片描述

获取源码：

大家点赞、收藏、关注、评论啦
🍅查看下方微信号获取联系方式 📝
🚀🚀🚀精彩系列推荐
Java毕设项目精品实战案例《1000套》
精彩专栏推荐订阅：在下方专栏

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1494884.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

K8s Pod 进阶

K8s Pod 进阶

目录 资源限制 Pod 和容器的资源请求和限制 CPU 资源单位 内存资源单位 示例1 示例2 重启策略&#xff08;restartPolicy&#xff09; 示例 健康检查 探针的三种规则 Probe支持三种检查方法 示例1&#xff1a;exec方式 示例2&#xff1a;httpGet方式 示例3&…
阅读更多...
C++--调整数组顺序使奇数位于偶数前面

C++--调整数组顺序使奇数位于偶数前面

题目&#xff1a; 输入一个整数数组&#xff0c;实现一个函数来调整该数组中数字的顺序&#xff0c;使得所有的奇数位于数组的前半部分&#xff0c;所有的偶数位于数组的后半部分&#xff0c;并保证奇数和奇数&#xff0c;偶数和偶数之间的相对位置不变。 方法一&#xff1a; …
阅读更多...
第三届国际亲子游泳学术峰会，麒小佑为亲游行业提供健康解决方案

第三届国际亲子游泳学术峰会，麒小佑为亲游行业提供健康解决方案

第三届国际亲子游泳学术峰会大合影 2024年2月26—28日&#xff0c;第三届国际亲子游泳学术峰会在中国青岛成功召开。 第三届国际亲子游泳学术峰会是中国婴幼游泳行业最高标准的学术性会议&#xff0c;由亲游圈主办&#xff0c;旨在为本行业搭建一个高端圈层&#xff0c;帮助机…
阅读更多...
保留数据的重装系统教程！（win10系统）

保留数据的重装系统教程！（win10系统）

上车警告&#xff01;&#xff01;&#xff01; 本教程无需思考&#xff0c;跟着操作一步一步来就能完成系统的重装。原理是将C盘系统重装&#xff0c;其他盘符数据保存。适用于系统盘重装数据或更改系统版本。 重要提示&#xff01;&#xff01;&#xff01; C盘有重要学习资…
阅读更多...
18个惊艳的可视化大屏（第18辑）：数字资产场景

18个惊艳的可视化大屏（第18辑）：数字资产场景

hello&#xff0c;我是贝格前端工场&#xff0c;本次分享可视化大屏在数字资产领域的应用&#xff0c;喜欢文章的别忘点赞关注&#xff0c;文章底部也有其他行业的案例&#xff0c;有需求您说话&#xff08;可私信&#xff09;。 数字资产可视化大屏可以应用于各种场景&#x…
阅读更多...
从零学习Linux操作系统 第三十一部分 ansible常用模块介绍

从零学习Linux操作系统 第三十一部分 ansible常用模块介绍

一、ansible运行模块的两种方式 Ad-Hoc方式 ##利用ansible命令直接完成管理&#xff0c;主要用于临时命令使用场景 playbook方式 ##ansible脚本&#xff0c;主要用于大型项目场景&#xff0c;需要前期的规划&#xff0c;相当于shell当中的脚本 二、如何查看模块帮助 ansible…
阅读更多...
重磅：2024广州国际酒店工程照明展览会

重磅：2024广州国际酒店工程照明展览会

2024广州国际酒店工程照明展览会 Guangzhou international hotel engineering lighting exhibition 2024 时间&#xff1a;2024年12月19-21日 地点&#xff1a;广州.中国进出口商品交易会展馆 承办单位&#xff1a;广州佛兴英耀展览服务有限公司 上海昶文展览服务有限公司…
阅读更多...
基于springboot的蜗牛兼职网的设计与实现论文

基于springboot的蜗牛兼职网的设计与实现论文

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;蜗牛兼职网当然也不能排除在外。蜗牛兼职网是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c…
阅读更多...
FISCO BCOS区块链平台上的智能合约压力测试指南

FISCO BCOS区块链平台上的智能合约压力测试指南

引言 在当今的分布式系统中&#xff0c;区块链技术因其去中心化、安全性和透明性而备受关注。随着区块链应用的不断扩展&#xff0c;对其性能和稳定性的要求也越来越高。因此&#xff0c;对区块链网络进行压力测试显得尤为重要。 目录 引言 1. 配置FISCO BCOS节点 2. 安装和…
阅读更多...
strongswan编译报错：NID_sm2p256v1未定义

strongswan编译报错：NID_sm2p256v1未定义

strongswan编译报错&#xff1a;NID_sm2p256v1未定义 现象&#xff1a; 原因&#xff1a; 我用的是openssl.-1.1.1d&#xff0c;发现NID_sm2p256v1曲线改为了NID_sm2&#xff08;gmssl用的是NID_sm2p256v1&#xff09;。对比了一下参数&#xff0c;是相同的。个人猜测是国际只…
阅读更多...
C语言初学10：共同体

C语言初学10：共同体

一、共同体作用 提供一种在相同内存位置存储不同数据类型的有效方式 二、共同体定义 union [union tag] //tag是可选参数 {member definition;member definition;...member definition; } [one or more union variables]; // 共同体变量是可选的 三、共同体占用空间大小 #…
阅读更多...
Docker安装MySQL镜像实战分享

Docker安装MySQL镜像实战分享

今天我们对Docker安装MySQL镜像进行实战分享&#xff0c;以更深入的了解容器的使用场景。我们在云付服务器Ubuntu环境上已经安装好了Docker&#xff0c;接下来我们开始安装mysql5.7版本&#xff0c;安装mysql有两种思路&#xff0c;直接拉取mysql镜像和自己做mysql镜像&#xf…
阅读更多...
【leetcode C++】电话号码的字母组合

【leetcode C++】电话号码的字母组合

17. 电话号码的字母组合 题目 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 题目链接 . - 力扣&#xff08;LeetCode&…
阅读更多...
Linux学习-函数指针和指针函数

Linux学习-函数指针和指针函数

目录 字符串是char *型&#xff0c;代表的是字符串的第一个元素的地址 指针函数&#xff1a; 函数指针&#xff1a; 字符串是char *型&#xff0c;代表的是字符串的第一个元素的地址 指针函数&#xff1a; int *Fun(int a, int b); 是函数&#xff0c;函数的返回值类型是…
阅读更多...
PaddleSeg分割框架解读[01] readme解读

PaddleSeg分割框架解读[01] readme解读

简介 PaddleSeg是基于飞桨PaddlePaddle的端到端图像分割套件，内置45+模型算法及140+预训练模型，支持配置化驱动和API调用开发方式，打通数据标注、模型开发、训练、压缩、部署的全流程，提供语义分割、交互式分割、Matting、全景分割四大分割能力，助力算法在医疗、工业、遥…
阅读更多...
docker容器内修改容器时间

docker容器内修改容器时间

因为开发需要&#xff0c;需要临时修改容器内时间测试&#xff0c;且不影响宿主机的原始时间。调研了下相关方法&#xff0c;现做记录如下. LIBFAKETIME ​ libfaketime 可以安装在linux和macOS系统。它使用操作系统的预加载library机制&#xff0c;因此对于静态链接或setuid程…
阅读更多...
前端面试拼图-原理源码

前端面试拼图-原理源码

摘要&#xff1a;最近&#xff0c;看了下慕课2周刷完n道面试题&#xff0c;记录下... 1. JS内存泄漏如何检测&#xff1f;场景有哪些? 1.1 垃圾回收 GC 垃圾回收是一种自动管理内存的机制&#xff0c;它负责在运行时跟踪内存的分配和使用情况&#xff0c;并在不再需要的对象…
阅读更多...
本机虚拟机centos7设置固定ip

本机虚拟机centos7设置固定ip

一、配置虚拟机网络 1、点击编辑 2、点击更改设置 记住子网地址&#xff1a;192.168.121.0 点击确定 二、配置虚拟机网络配置文件 首先进去root中&#xff0c;然后进入vim编辑器中 (1)su - root (2) vim /etc/sysconfig/network-scripts/ifcfg-ens33 在VIM编辑器中修改并添加…
阅读更多...
云计算的部署方式(公有云、私有云、混合云、社区云)

云计算的部署方式(公有云、私有云、混合云、社区云)

云计算的部署方式(公有云、私有云、混合云、社区云) 目录 零、00时光宝盒 一、云计算的部署方式 1.1、公有云&#xff08;Public Cloud&#xff09; 1.2、私有云&#xff08;Private Cloud&#xff09;　 1.3、混合云&#xff08;Hybrid Cloud&#xff09; 1.4、社区云&am…
阅读更多...
解决DBeaver执行脚本报错No active connection

解决DBeaver执行脚本报错No active connection

解决DBeaver执行脚本报错No active connection 1、报错问腿 2、问题解决 2.1、右键点击该数据库&#xff0c;选择SQL编辑器&#xff0c;选择新建SQL编辑器&#xff0c;然后将sql语句复制过去。 或者左击选中数据库后直接使用快捷键 Ctrl] 2.2、在Project-General中找到Scr…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023