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

news2024/12/24 3:46:44

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

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

文章目录

  • 基于java ssm 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毕设项目精品实战案例《500套》
精彩专栏推荐订阅：在下方专栏

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

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

相关文章

Goland中使用GoPlantUml生成ER关系图

Goland中使用GoPlantUml生成ER关系图

前言 Golang语言在近些年的开发语言中异军突起&#xff0c;在越来越多的公司项目中频繁出镜&#xff0c;也有越来越多的中间件选择使用Golang语言进行实现。正所谓源码之下无秘密&#xff0c;更友好地翻读源码对于理解功能特性以及后续使用非常有帮助&#xff0c;观摩学习源码也…
阅读更多...
RMAN异地恢复-适用于数据库量比较大的场景

RMAN异地恢复-适用于数据库量比较大的场景

之前验证异地备份&#xff0c;只对数据库做个全备就备份恢复了&#xff0c;这种适用于数据库比较小的场景&#xff0c;因为如果数据库量大的话&#xff0c;备份&#xff0c;拷贝备份&#xff0c;恢复数据库的时间就比较长&#xff0c;停业务的时间就会比较长。 如果数据库比较…
阅读更多...
JavaWeb知识汇总

JavaWeb知识汇总

文章目录前导一、数据库1.相关概念2.数据模型3.SQL4.约束5.数据库设计6.多表查询7.事务二、JDBC1.步骤2.JDBC事务管理3.数据库连接池三、Maven1.maven生命周期2.maven坐标详解3.依赖管理四、Mybatis1.快速入门2.Mapper代理开发3.核心配置文件4.参数传递5.注解开发五、HTML1.快速…
阅读更多...
【进阶C语言】字符串函数+内存函数

【进阶C语言】字符串函数+内存函数

文章目录一.字符串函数1.strlen功能&#xff1a;求字符串长度&#xff08;不包括\0&#xff09;函数模拟实现&#xff1a;2.1 strcmp功能函数模拟实现2.2 strncmp3.1 strcat功能函数模拟实现3.2strncat4.1 strcpy功能函数模拟实现4.2 strncpy5.strstr功能函数模拟实现6.strtok功…
阅读更多...
论文《An Effective Consistency Constraint for Sequential Recommendation》

论文《An Effective Consistency Constraint for Sequential Recommendation》

C2Rec: An Effective Consistency Constraint for SequentialRecommendation 这篇文章提出了序列推荐建模中一种有效的一致性约束防范&#xff0c;不用修改模型结构&#xff0c;仅仅添加2个额外的损失函数&#xff0c;就能达到非常好的效果。不像基于对比学习的方法&#xff0…
阅读更多...
C++初阶--string

C++初阶--string

目录 string对象的创建&#xff1a; 遍历修改 const修饰的迭代器(只读)&#xff1a; 反向迭代器&#xff1a; reserve与resize&#xff1a; find&#xff0c;rfind&#xff0c;substr&#xff1a; insert&#xff1a; erase&#xff1a; getchar、getline&#xff1a; string对…
阅读更多...
Java基础学习笔记（十一）—— 包装类与泛型

Java基础学习笔记（十一）—— 包装类与泛型

包装类与泛型1 包装类1.1 基本类型包装类1.2 Integer类1.3 自动装箱 / 拆箱2 泛型2.1 泛型概述2.2 泛型的用法2.3 类型通配符1 包装类 1.1 基本类型包装类 基本类型包装类的作用 将基本数据类型封装成对象 的好处在于可以在对象中定义更多的功能方法操作该数据 public stat…
阅读更多...
✿✿✿JavaScript --- Ajax异步请求与JSONP 跨域请求

✿✿✿JavaScript --- Ajax异步请求与JSONP 跨域请求

目 录 一、原生的Ajax请求 1.异步和同步 2.Ajax介绍 3.实现方式 (1)原生的JS实现方式&#xff08;了解&#xff09; (2)原生AJax发送Post请求&#xff0c;并携带请求参数 二、JQuery封装后的Ajax 1.JQeury实现方式 2. $.get()&#xff1a;发送get请求 3.$.post()&…
阅读更多...
存储随笔2022年度最受欢迎文章榜单TOP15

存储随笔2022年度最受欢迎文章榜单TOP15

回首2022感谢各位粉丝朋友的一路支持与陪伴存储随笔为您献上2022年度最受欢迎文章榜单TOP152023&#xff0c;一起向未来&#xff01;TOP1&#xff1a;固态硬盘SSD入门级白皮书主要从固态硬盘的原理/接口形态/寿命/使用场景/等不同角度&#xff0c;来对比不同的人群需要什么样的…
阅读更多...
[linux]vim编辑器

[linux]vim编辑器

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要讲解vim的使用和一些vim的常用操作&#xff0c;以及如何解决…
阅读更多...
Flow 转 LiveData 后数据丢了，肿么回事？

Flow 转 LiveData 后数据丢了，肿么回事？

翻译自&#xff1a; https://arkadiuszchmura.com/posts/be-careful-when-converting-flow-to-livedata/ 前言 最近我在负责一段代码库&#xff0c;需要在使用 Flow 的 Data 层和仍然依赖 LiveData 暴露 State 数据的 UI 层之间实现桥接。好在 androidx.lifecycle 框架已经提供…
阅读更多...
C语言-指针进阶-函数指针数组应用-计算器（9.2）

C语言-指针进阶-函数指针数组应用-计算器（9.2）

目录 1. 函数指针 2. 函数指针数组 2.1函数指针数组的定义 2.2函数指针数组应用 3. 指向函数指针数组的指针 思维导图&#xff1a; 1. 函数指针 直接上代码&#xff1a; #include <stdio.h>void test() {printf("hehe\n"); }int main() {printf("%…
阅读更多...
【Java】数组的复制、反转、查找、排序

【Java】数组的复制、反转、查找、排序

数组的复制、反转、查找、排序 复制 其中最关键的一点是搞清楚为什么数组复制和基本数据类型复制不同&#xff0c;是什么导致了这样的不同&#xff1f; 先来看例子 package com.atguigu.java;public class ArrayTest3 {public static void main(String[] args) {//新建arr数…
阅读更多...
【Java数据结构与算法】Day2-高级排序（希尔、归并、快速、计数）

【Java数据结构与算法】Day2-高级排序（希尔、归并、快速、计数）

✅作者简介&#xff1a;热爱Java后端开发的一名学习者&#xff0c;大家可以跟我一起讨论各种问题喔。 &#x1f34e;个人主页&#xff1a;Hhzzy99 &#x1f34a;个人信条&#xff1a;坚持就是胜利&#xff01; &#x1f49e;当前专栏&#xff1a;【Java数据结构与算法】 &#…
阅读更多...
实验七：555定时器及其应用

实验七：555定时器及其应用

答疑解惑用555定时器组成的单稳态电路中&#xff0c;若触发脉冲宽度大于单稳态持续时间&#xff0c;电路能否正常工作&#xff1f;如果不能&#xff0c;则电路应做如何修改&#xff1f;答:若触发脉冲宽度大于单稳态持续时间后&#xff0c;输出脉冲宽度将等于触发脉冲的低电平持…
阅读更多...
【精】EditorConfig 小老鼠 跨编辑器 | IDE 保持一致的编码风格

【精】EditorConfig 小老鼠 跨编辑器 | IDE 保持一致的编码风格

【精】EditorConfig 小老鼠 跨编辑器 | IDE 保持一致的编码风格 &#x1f345;因发布平台差异导致阅读体验不同&#xff0c;将本文原编写地址贴出&#x1f339;&#xff1a;《【精】EditorConfig 小老鼠 跨编辑器 | IDE 保持一致的编码风格》 文章目录【精】EditorConfig 小老鼠…
阅读更多...
实时数仓方案

实时数仓方案

2、实时数仓方案 2.1、为何需要实时数仓架构 随着数据量的增大&#xff0c;传统数据的方案在时效性上和数据维护上变得越来越困难。实时数仓架构应运而生。 具体方案落地上实时数仓有很多方案可以选择&#xff0c;不同的业务和应用场景到底应该选择哪种技术方案&#xff1f;…
阅读更多...
React18新特性

React18新特性

React 团队在 2022 年 3 月 29 日正式发布了 React 的第 18 个版本。 在这篇文章里简单介绍 React 18 的新特性&#xff0c;React Concurrent Mode&#xff08;并发模式&#xff09;的实现&#xff0c;以及简要的升级指南。 New Features Automatic Batching 早在 React 18 之…
阅读更多...
011-Ensp-实验-配置ACL

011-Ensp-实验-配置ACL

实验要求 1.通过ACL 使PC1无法访问PC3 实验结构 实验步骤 基础环境配置: PC间互通 1. PC1 2 3 配置IP网关 2. LSW2 创建三个vlan &#xff0c;g0/0/2 g0/0/3 g/0/04 类型配置为Access 分别加入三个vlan g0/0/1 配置为trunk 并允许所有vlan通过 3. LSW1 g0/0/1 配置trunk …
阅读更多...
vector底层实现及深层次拷贝问题

vector底层实现及深层次拷贝问题

目录 大框架 接口实现 深层次拷贝问题&#xff08;两次深拷贝&#xff09; 大框架 为了与库里实现的更接近一些&#xff0c;先来看一下STL中是如何实现vector的&#xff08;这里不是PJ版&#xff0c;PJ版稍微晦涩一点不容易理解&#xff0c;这里采用Linux下g的版本&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023