基于Springboot的校园疫情管理系统-网络知识

一、基于Springboot+MybatisPlus+Echarts+Mysql实现校园疫情管理系统

【Coding路人王：从0到1】

项目简介：

该项目基于springboot框架实现了疫情背景下的校园管理，主要涵盖了中国疫情确诊分布地图(对接腾讯API接口)、中国实时疫情新闻播报、以及对疫情数据的饼图、折线图和柱状图展示。系统角色可以进行增删改查，为角色分配菜单权限，大致分为学生、教师、院系级系统管理员，集成了shiro框架实现了不同的角色可以赋予不同的菜单栏权限，可以完成菜单栏的动态增删改查，实现了动态的权限设置。

在校园疫情数据管理中，基于mybatiplus框架实现了疫情数据的带有条件查询及分页的增删改查，并实现了拖拽式上传excel数据和导出疫情数据。其中相关功能主要包含疫情数据管理，疫情新闻管理，疫情图表展示管理，学生健康打卡管理，院系管理、班级管理、核酸检测管理，疫苗接种管理，学生请假管理等等。系统管理中主要包含了用户管理、角色管理和菜单管理。

在数据库设计中，主要设计了用户与角色之间的多对多实体关系，角色与菜单之间的多对多关系设计。其中，学生请假功能设计了详细的审批流，学生提交审批流后，教师审批后方为院系审批，为串行审批流程，设计了审批节点的状态与审批流的审批逻辑。

在缓存设计中，主要将访问量较高的中国疫情地图和新闻播报首页进行了redis数据缓存，为了保证redis缓存与mysql数据的一致性，每当定时任务触发去解析腾讯API接口数据时候，每更新一次数据库数据，就要删除一次redis缓存，这样就可以保证客户端每次查询数据查不到就可以进行访问数据库更新最新的缓存数据。

在接口设计中，采用了RestFul风格的架构，使请求路径变得更加简洁，传递、获取参数值更加方便，通过请求路径中直接传递参数值，不会暴露传递给方法的参数变量名，接口也变得更加安全。

开发环境：

**Java：**JDK1.8

**开发工具：**Idea、Navicat、Maven3.6

**前端框架：**layui框架

**后端框架：**Springboot、MybatisPlus、Shiro、Httpclient爬虫

**数据库：**Mysql5.7及其以上

源码:
讲解地址：https://www.bilibili.com/video/BV1aY411c7d1?share_source=copy_web

请添加图片描述
在这里插入图片描述

在这里插入图片描述

1.1 构建springboot项目

	<dependency>
      <groupId>com.baomidou</groupId>
      <artifactId>mybatis-plus-boot-starter</artifactId>
      <version>3.1.1</version>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.47</version>
    </dependency>

spring:
 datasource:
  username: root
  password: 123456
  url: jdbc:mysql://localhost:3306/nocv?serverTimezone=UTC&useSSL=false&characterEncoding=utf-8
  driver-class-name: com.mysql.jdbc.Driver

1.2 引入Echarts地图

1.官网：https://echarts.apache.org/zh/ 下载JS文件引入项目
2.查看图例
3.快速使用

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  
  <script src="echarts.js"></script>
 </head>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  
  <script src="echarts.js"></script>
 </head>
 <body>
  
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(document.getElementById('main'));

   // 指定图表的配置项和数据
   var option = {
    title: {
     text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
     data: ['销量']
    },
    xAxis: {
     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
     {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
     }
    ]
   };
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
  </script>
 </body>
</html>

地图社区图例：http://www.isqqw.com/

1.3 创建数据库

DROP TABLE IF EXISTS `nocv_data`;
CREATE TABLE `nocv_data` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) DEFAULT NULL,
 `value` int(11) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=35 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of nocv_data
-- ----------------------------
INSERT INTO `nocv_data` VALUES ('1', '澳门', '95');
INSERT INTO `nocv_data` VALUES ('2', '香港', '35');
INSERT INTO `nocv_data` VALUES ('3', '台湾', '153');
INSERT INTO `nocv_data` VALUES ('4', '新疆', '56');
INSERT INTO `nocv_data` VALUES ('5', '宁夏', '26');
INSERT INTO `nocv_data` VALUES ('6', '青海', '26');

1.4 编写代码

springboot

contRoller: /query

service:

dao:

entity:

1.5 展示数据

$.ajax({
    url: "/query",
    dataType: "json",
    success: function (data) {
      // 某种意义上来说，数组也是object
      for (let i in data) {
        dataList[i] = data[i];
      }

      myChart.setOption({
        series: [
          {
            name: "确诊病例",
            type: "map",
            geoIndex: 0,
            data: dataList
          }
       ]
      });
    }
  });

七、中国疫情地图增删改查

7.1 分页配置MybatisPlusConfig

@Configuration
@ConditionalOnClass(value = {PaginationInterceptor.class})
public class MybatisPlusConfig {
    @Bean
    public PaginationInterceptor paginationInterceptor(){
        return  new PaginationInterceptor();
    }
}

7.2 layui返回的数据格式 DataView

@Data
@AllArgsConstructor
@NoArgsConstructor
public class DataView {
    private Integer code = 0;
    private String msg = "";
    private Long count = 0L;
    private Object data;

    public DataView(Long count,Object data){
        this.count = count;
        this.data = data;
    }

    public DataView(Object data){
        this.data = data;
    }
}

八、疫情打卡上报管理

8.1 引入静态打卡HTML页面

九、实现拖拽Excel导入疫情数据功能

9.1 引入pom依赖


<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi</artifactId>
    <version>4.0.0</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>4.0.0</version>
</dependency>

9.2 引入layui 的拖拽上传Excel组件

* Excel的拖拽或者点击上传
* 1.前台页面发送一个请求，上传文件MutilpartFile HTTP
* 2.Controller,上传文件MutilpartFile 参数
* 3.POI 解析文件，里面的数据一行一行全部解析出来
* 4.每一条数据插入数据库
* 5.mybatiplus 批量saveBatch(list)

<div class="layui-upload-drag" id="test10">
    <i class="layui-icon"></i>
    <p>点击上传，或将文件拖拽到此处</p>
    <div class="layui-hide" id="uploadDemoView">
        <hr>
        <img src="" alt="上传成功后渲染" style="max-width: 196px">
    </div>
</div>

layui.use(['upload','jquery'],function(){
        var layer = layui.layer //弹层
            ,$ = layui.jquery
            ,upload = layui.upload
            
//拖拽上传
        upload.render({
            elem: '#test10'
            ,url: '/excelImport'
            ,accept: 'file' //普通文件
            ,done: function(res){
                layer.msg('上传成功');
                console.log(res);
            }
        });

9.2 编写Controller

// Excel数据导入
@RequestMapping(value = "/excelImport", method = RequestMethod.POST)
@ResponseBody
public DataView uploadExcel(@RequestParam("file") MultipartFile file) {
   
    DataView dataView = new DataView();
    if (file.isEmpty()) {
        dataView.setMsg("文件为空");
        return dataView;
    }
    try {

        //根据路径获取这个操作excel的实例
        HSSFWorkbook wb = new HSSFWorkbook(file.getInputStream());
        HSSFSheet sheet = wb.getSheetAt(0);

        //实体类集合
        List<NocvData> listData = new ArrayList<>();
        HSSFRow row = null;

        //循环sesheet页中数据从第二行开始，第一行是标题
        for (int i = 0; i < sheet.getPhysicalNumberOfRows(); i++) {

            //获取每一行数据
            row = sheet.getRow(i);
            NocvData data = new NocvData();
            data.setName(row.getCell(0).getStringCellValue());
            data.setValue(Integer.valueOf((int) row.getCell(1).getNumericCellValue()));
            listData.add(data);

        }

        //循环展示导入的数据，实际应用中应该校验并存入数据库
        indexService.saveBatch(listData);
        dataView.setCode(200);
        dataView.setMsg("导入成功");
        return dataView;
    } catch (Exception e) {
        e.printStackTrace();
    }
    dataView.setCode(100);
    dataView.setMsg("导入失败");
    return dataView;
}

9.4 数据导出Excel功能【中国疫情数据】

1.前端发送请求 /

2.后端查询数据库，封装数据Excel实体

3.返回数据建立输出，写出浏览器文件

// 导出疫情数据
form.on("submit(doExport)",function () {
    window.location.href="/excelOutportChina";//这里是接口的地址
})

<button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doExport"><i class="layui-icon layui-icon-search layui-icon-normal"></i>导出中国疫情数据Excel
</button>
                
                
                
@RequestMapping("/excelOutportChina")
    @ResponseBody
    public void excelOutportChina(HttpServletResponse response){
        response.setCharacterEncoding("UTF-8");
        List<NocvData> list = indexService.list();
        HSSFWorkbook wb = new HSSFWorkbook();
        //2-创建sheet页,设置sheet页的名字
        HSSFSheet sheet = wb.createSheet("中国数据表");
        //3-创建标题行
        HSSFRow titleRow = sheet.createRow(0);
        titleRow.createCell(0).setCellValue("城市名称");
        titleRow.createCell(1).setCellValue("确诊数量");
        //4-遍历将数据集合将数据放到对应的列中
        for (NocvData data : list){
            HSSFRow dataRow = sheet.createRow(sheet.getLastRowNum()+1);
            dataRow.createCell(0).setCellValue(data.getName());
            dataRow.createCell(1).setCellValue(data.getValue());
        }
        // 5.建立输出
        OutputStream os = null;

        try{
            //6-设置Excel的名称
            response.setContentType("application/octet-stream;charset=utf-8");
            response.setHeader("Content-Disposition", "attachment;filename="
                    + new String("中国疫情数据表".getBytes(),"iso-8859-1") + ".xls");
            os = response.getOutputStream();
            wb.write(os);
            os.flush();
        }catch(Exception e){
            e.printStackTrace();
            
        } finally {
            try {
                if(os != null){
                    os.close();
                }
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    }

十、对接腾讯API接口实现疫情数据实时更新

十、打开腾讯数据网址腾讯实时疫情

**主页网址：**https://news.qq.com/zt2020/page/feiyan.htm#/global

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-66dqclsu-1655813236195)(C:Users15067AppDataLocalTemp1654132815620.png)]

**腾讯数据接口：**https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5

**网易数据接口：**https://c.m.163.com/ug/api/wuhan/app/data/list-total

10.1 网络爬虫对接【腾讯】API接口


<dependency>
    <groupId>org.apache.httpcomponents</groupId>
    <artifactId>httpclient</artifactId>
    <version>4.5.2</version>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.56</version>
</dependency>

@Component
public class HttpUtils {

    @Bean
    public String getData() throws IOException {

一、基于Springboot+MybatisPlus+Echarts+Mysql实现校园疫情管理系统

1.1 构建springboot项目

1.2 引入Echarts地图

1.3 创建数据库

1.4 编写代码

1.5 展示数据

七、中国疫情地图增删改查

7.1 分页配置MybatisPlusConfig

7.2 layui返回的数据格式 DataView

八、疫情打卡上报管理

8.1 引入静态打卡HTML页面

九、实现拖拽Excel导入疫情数据功能

9.1 引入pom依赖

9.2 引入layui 的拖拽上传Excel组件

9.2 编写Controller

9.4 数据导出Excel功能【中国疫情数据】

十、对接腾讯API接口实现疫情数据实时更新

十、打开腾讯数据网址腾讯实时疫情

10.1 网络爬虫对接 【腾讯】API接口

相关文章

央媒谈“文盲演员”引发饭圈甩锅大战

野生大熊猫深夜遛达 镜头前呆萌打卡

张萌谈演员到底需不需要有文化

情人节多地迎领证高峰

婚房烂尾10年业主住进毛坯房

多地首套房贷利率降至4%以下 为什么急于提前还贷

10.1 网络爬虫对接【腾讯】API接口

野生大熊猫深夜遛达镜头前呆萌打卡

多地首套房贷利率降至4%以下为什么急于提前还贷