# heath_reporting_system **Repository Path**: logicsi/heath_reporting_system ## Basic Information - **Project Name**: heath_reporting_system - **Description**: 健康上报系统 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-06-19 - **Last Updated**: 2021-07-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 高校健康上报系统设计与实现 > 学校：东莞理工学院 > > 学院：网络空间安全学院 > > 课程名称：企业级开发框架 > > 小组名称： > > 班级：18软件工程卓越1班 > > 组长：林俊杰（201841404119）组员：刘向维（2018414226） #### 项目简介 ​ 在全国人名共同抗击新型冠状病毒的严峻形势下，为了让高校师生健康信息上报，方便地了解高校师生身体健康情况，做好高校内部的疫情防控工作与管理，很多高校都自建了健康上报系统。 ​ 本实现项目作为课程的期末大作业，设计与实现一个健康上报系统 #### 项目介绍 ​ 高校健康上报系统（打卡系统） ​ 技术栈：Spring Boot+Spring Security+MongoDB+jQuery+bootstrap #### 人员分工 ​ 后端：林俊杰 ​ 前端：刘向维 #### 核心技术 ##### 登录认证与授权 >该系统有两个角色，目前有管理员和普通用户（学生）两种 ​ spring security的核心配置代码 ![image-20210701014803710](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701014803710.png) ![image-20210701124301445](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701124301445.png) ##### 第三方登录（中央认证登录） ![image-20210701171927355](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701171927355.png) ![image-20210701171821852](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701171821852.png) ![image-20210701131512774](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701131512774.png) ![image-20210701131544393](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701131544393.png) ##### 管理系统导出功能 - 后台管理系统的页面列表导出功能 本项目使用EasyExcel模块，对查询数据进行导出为excel文件 ![image-20210701172005970](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701172005970.png) ![image-20210701125606676](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701125606676.png) 导出结果如下： ![image-20210701125812070](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701125812070.png) #### 页面 ##### 前端 - 登录界面 - 健康记录打卡提交页面 ##### 后端 - 未打卡学生查询 - 打卡记录查询（查询身体状况是否良好，体温是否异常等） - 用户管理 #### 项目实例 ##### 前端 ###### 登录页 ![image-20210701131010857](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701131010857.png) ###### 健康记录打卡提交页面 （若已经提交，则直接显示今日已打卡，不给重复提交打卡记录） ![image-20210701131209813](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701131209813.png) ![image-20210701131235430](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701131235430.png) ##### 后端 - 登录页 ![image-20210701131852299](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701131852299.png) ###### 后台管理页面 ![image-20210701132038536](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701132038536.png) ###### 未打卡学生查询 ![image-20210701132142368](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701132142368.png) ###### 打卡记录查询 ![image-20210701133546724](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701133546724.png) ###### 用户管理 ![image-20210701133606211](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701133606211.png) #### 项目部署 本项目采用的是基于阿里云的单机单服务部署的docker部署方案。 在项目的根目录上存放了关于构建Web服务的Dockerfile文件，相应的数据库目录mongo和编排启动整个项目的docker-compose.yml文件。具体细节可跳转到快速启动小节。 #### 快速启动 本项目的后端应用程序已打包为docker镜像并上传至gitee，并使用docker-compose编排容器部署 ##### 1. 配置最小开发环境 - 阿里云服务器 - JDK11.0.11 （docker镜像） - mongoDB（docker镜像） ##### 2. 数据库导入文件及所在目录 位置：mongo文件夹 mongoDB导入文件所在位置：src/main/resources/datadata mongoDB导入文件：users.json，questionnaires.json，answers.json ##### 3. 启动Web服务 3.1远程连接阿里云，安装git、docker、docker-compose 3.2在服务器输入以下命令： ```shell yun install git git clone https://gitee.com/logicsi/heath_reporting_system.git ``` 3.3在project下可看到Web服务的Dockerfile ``` # syntax=docker/dockerfile:1 FROM openjdk:11.0.11-slim-buster WORKDIR /app COPY .mvn/ .mvn COPY mvnw pom.xml ./ RUN ./mvnw dependency:go-offline COPY src ./src CMD ["./mvnw", "spring-boot:run"] ``` 3.4同时看到编排的docker-compose.yml ``` version: "3.9" services: web: build: . ports: - "7654:8080" restart: always db: image: mongo ports: - "12345:27017" volumes: - ./mongo:/data/db restart: always ``` 3.5后台守护进程启动docker-compose ```Shell docker-compose up -d ``` 3.6运行成功 ![](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701150859567.png) #### 数据库 ​ 使用MongoDB作为数据库，集合（Collections）如下： - users: - > role: 该用户在该系统的角色 > > enabled：是否被禁用，允许管理员对该学生用户进行账号锁住禁用accountNonExpired：账号是否过期 > > accountNonLocked：账号是否被锁住 > > credentialsNonExpired：密码或凭证是否过期 ```java @Data @AllArgsConstructor @NoArgsConstructor @ToString @Document(collection = "users") @Builder public class User { @Id @ExcelProperty(value = "学号",index = 0) private String username; @ExcelIgnore private String password; @ExcelProperty(value = "姓名",index = 1) private String name; @ExcelIgnore private String idNumber; @ExcelProperty(value = "手机号码",index = 2) private String phone; @ExcelIgnore private Date dateCreate; @ExcelIgnore private String school; @ExcelProperty(value = "学院",index = 3) private String department; @ExcelProperty(value = "年级",index = 4) private String grade; @ExcelProperty(value = "专业",index = 5) private String major; @ExcelProperty(value = "班级",index = 6) private Integer clazz; @ExcelIgnore private String role; @ExcelIgnore private Integer enabled; @ExcelIgnore private Integer accountNonExpired; @ExcelIgnore private Integer accountNonLocked; @ExcelIgnore private Integer credentialsNonExpired; @ExcelProperty(value = "最近提交时间",index = 7) private Date lastCommitTime; } ``` ![image-20210701012824957](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701012824957.png) - Questionnaire - > 健康问卷内容（只保留问卷问题信息） > > 问题与答案结构放入Map中去，详细可看下面实例 ```java @Data @AllArgsConstructor @NoArgsConstructor @ToString @Document(collection = "questionnaires") public class Questionnaire { @Id private ObjectId questionnaireId; private Map questions; private Integer enable; } ``` ![image-20210701013147267](https://gitee.com/logicsi/pic-bed/raw/master/img/image-20210701013147267.png) - answers - > 健康问卷的打卡记录 ```java @Data @AllArgsConstructor @NoArgsConstructor @ToString @Document(collection = "answers") public class Answer { @Id private ObjectId answerId; private Map answers; private ObjectId version; private String username; private Date date; } ``` #### 总结 前端：项目开始之初，打算前后端分离，于是开始学习了React。但是随着项目的不断推进，个人发现无法熟练运用React，同时发现前后端分离需要学习反向代理，基于时间成本和个人原因，随即放弃原先计划，转向较为原生的技术栈JQuery和Bootstrap。由于个人是边学边写前端，所以在这次的项目中学习到了非常多的知识。 Bootstrap中的响应式布局，基于CSS中的媒体查询（Media Query），而尽管Bootstrap提供了许多现成的组件和模板，但是要修改成自己想要的效果和出Bug时能尽快修补，依然需要对CSS原理的不断学习。其中Bootstrap组件中炫酷的效果，不仅仅依靠CSS的强大，也依赖于JavaScript的脚本功能。 JQuery，经典的JS库，大大减少了前端开发对大量DOM操作的代码，一定程度上的“解放”双手。但一个硬币往往具有两面性，JQuery虽然方便快捷，但是偶尔会因为不熟悉操作函数的性质而出现bug，比如标签中的data-属性，可以利用data(key,[value])函数可以进行快捷使用data-中的属性名称读取和“写入”，但是data函数的"写入"却不会在DOM中改变，于是便会出现数据显示不改变的bug，使用attr函数即可解决问题。 前端的技术很多，但是一个个技术也要一步一步地踏实学好，才能做好前端的开发。 后端：本次是项目具有挑战性是使用MongoDB进行持久化，MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。他支持的数据结构非常松散，是类似json的bson格式。对于本次的问题问卷适合使用Mongo这种非结构化数据，但在涉及到关联不同集合查询是稍微复杂，需要约定好结构映射。在本次项目中，后端技术栈应用到较少，接下来的目标需要努力地将每个技术点学好并应用实际开发中去。