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

基于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-columnprop="perms"header-align="center"align="center"width="150":show-overflow-tooltip="true"label="授权标识"></el-table-column><el-table-columnfixed="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 = truethis.$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 = truethis.$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.DruidDataSourcedruid:driver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/renren_fast?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghaiusername: rootpassword: 123456initial-size: 10max-active: 100min-idle: 10max-wait: 60000pool-prepared-statements: truemax-pool-prepared-statement-per-connection-size: 20time-between-eviction-runs-millis: 60000min-evictable-idle-time-millis: 300000#Oracle需要打开注释#validation-query: SELECT 1 FROM DUALtest-while-idle: truetest-on-borrow: falsetest-on-return: falsestat-view-servlet:enabled: trueurl-pattern: /druid/*#login-username: admin#login-password: adminfilter:stat:log-slow-sql: trueslow-sql-millis: 1000merge-sql: falsewall: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.hqwc.cn/news/512194.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Vmware Fusion 13 安装CentOS、Ubuntu、Windows11虚拟机

Vmware Fusion 13 安装CentOS、Ubuntu、Windows11虚拟机

Vmware Fusion 13 安装CentOS、Ubuntu、Windows11虚拟机 背景&#xff1a;每次安装都要到处找资源&#xff0c;现在一篇文章足以 文章目录 Vmware Fusion 13 安装CentOS、Ubuntu、Windows11虚拟机一、Mac中安装CentOS虚拟机1️⃣&#xff1a;准备镜像2️⃣&#xff1a;创建虚拟…
阅读更多...
JVM(类加载机制)

JVM(类加载机制)

类加载就是 .class 文件, 从文件(硬盘) 被加载到内存(元数据区)中的过程 类加载的过程 加载: 找 .class 文件的过程, 打开文件, 读文件, 把文件读到内存中 验证: 检查 .class 文件的格式是否正确 .class 是一个二进制文件, 其格式有严格的说明 准备: 给类对象分配内存空间 (先在…
阅读更多...
Vue3：用vite创建Vue3项目

Vue3：用vite创建Vue3项目

一、简介 vite是新一代前端构建工具&#xff0c;官网地址&#xff1a;https://vitejs.cn vite的优势如下&#xff1a; 轻量快速的热重载&#xff08;HMR&#xff09;&#xff0c;能实现极速的服务启动。对 TypeScript、JSX、CSS 等支持开箱即用。真正的按需编译&#xff0c;不…
阅读更多...
自动化测试基础——allure下载安装及配置及pytest + allure-pytest插件生成allure企业级测试报告及企业级定制

自动化测试基础——allure下载安装及配置及pytest + allure-pytest插件生成allure企业级测试报告及企业级定制

文章目录 前言一、allure下载二、allure安装三、allure目录介绍四、allure环境变量配置五、pytest allure-pytest插件生成allure企业级测试报告六、allure企业级报告的log定制七、allure企业级报告功能内容定制1.功能左边层级定制2.功能右边优先级定制3.功能右边测试用例描述定…
阅读更多...
某品零食交易平台设计与实现|基于springboot+ Mysql+Java的某品交易平台设计与实现(源码+数据库+文档+PPT)

某品零食交易平台设计与实现|基于springboot+ Mysql+Java的某品交易平台设计与实现(源码+数据库+文档+PPT)

目录 基于springboot MysqlJava的某品交易平台设计与实现 摘 要 系统详细设计 数据库设计 论文参考 源码获取 文末获取源码联系 基于springboot MysqlJava的某品交易平台设计与实现 摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的…
阅读更多...
PyTorch-RNN

PyTorch-RNN

首先介绍一下什么是rnn&#xff0c;rnn特别擅长处理序列类型的数据&#xff0c;因为他是一个循环的结构 一个序列的数据依次进入网络A&#xff0c;网络A循环的往后传递。 这就是RNN的基本结构类型。而最早的RNN模型&#xff0c;序列依次进入网络中&#xff0c;之前进入序列的数…
阅读更多...
2024全网最全Excel函数与公式应用

2024全网最全Excel函数与公式应用

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 引言 Excel是一款广泛应用于商业、教育和个人…
阅读更多...
内存冷热标记 - 华为OD统一考试(C卷)

内存冷热标记 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 现代计算机系统通常存在多级的存储设备&#xff0c;针对海量的 wordload 的优化的一种思路是将热点内存页优化先放到快速存储层级&#xff0c;这就需要对内存页进…
阅读更多...
【vue/组件封装】封装一个带条件筛选的搜索框组件（多组条件思路、可多选）详细流程

【vue/组件封装】封装一个带条件筛选的搜索框组件（多组条件思路、可多选）详细流程

引入&#xff1a;实现一个带有筛选功能的搜索框&#xff0c;封装成组件&#xff1b; 搜索框长这样子&#xff1a; 点击右侧筛选图标后弹出层&#xff0c;长这样子&#xff1a; 实际应用中有多组筛选条件&#xff0c;这里为了举栗子就展示一组&#xff1b; 预览&#xff1a;…
阅读更多...
ES核心概念（45-48）（56-62）（101-103）

ES核心概念（45-48）（56-62）（101-103）

ES集群 ES集群&#xff08;Cluster&#xff09;包含多个节点&#xff08;服务器&#xff09;&#xff0c;整体提供服务 核心概念 索引Index&#xff1a;类似于mysql中的表 映射Mapping:数据的结构信息 文档&#xff1a;相当于表中的一条记录 分片&#xff1a; 将数据分成多片…
阅读更多...
010-原型链

010-原型链

原型链 1、概念2、原理3、new 操作符原理4、应用 1、概念 原型链&#xff1a;javascript的继承机制&#xff0c;是指获取JavaScript对象的属性会顺着其_proto_的指向寻找&#xff0c;直至找到Object.prototype上。 2、原理 &#x1f4a1; Tips&#xff1a;构造函数 Fn&#…
阅读更多...
Day12-【Java SE进阶】JDK8新特性：Lambda表达式、方法引用、常见算法、正则表达式、异常

Day12-【Java SE进阶】JDK8新特性：Lambda表达式、方法引用、常见算法、正则表达式、异常

一、JDK8新特性 1.Lambda表达式 Lambda表达式是JDK 8开始新增的一种语法形式;作用:用于简化名内部类的代码写法。 注意:Lambda表达式并不是说能简化全部匿名内部类的写法&#xff0c;只能简化函数式接口的匿名内部类。 有且仅有一个抽象方法的接口。注意:将来我们见到的大部…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023