1 Star 0 Fork 15

会飞的小熊猫/springboot-2022-nocv

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

【一直更新,对应讲解视频请到 bilibili: "Coding路人王"】

springboot-2022-nocv

跟着视频来可以把项目做出来【为防止倒卖侵权: 源码不提供了】

介绍

springboot+mybatisplus+mysql+echarts的各种疫情可视化数据展示

一、基于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及其以上 ———————————————— 版权声明:本文为CSDN博主「Coding路人王」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/wyn_365/article/details/125397649 bilibili视频教学地址: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" />

  <!-- 引入刚刚下载的 ECharts 文件 -->

  <script src="echarts.js"></script>

 </head>

</html>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8" />

  <title>ECharts</title>

  <!-- 引入刚刚下载的 ECharts 文件 -->

  <script src="echarts.js"></script>

 </head>

 <body>

  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

  <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');

INSERT INTO `nocv_data` VALUES ('7', '甘肃', '39');

INSERT INTO `nocv_data` VALUES ('8', '陕西', '10');

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

          }

        ]

      });

    }

  });

在这里插入图片描述

软件架构

软件架构说明

安装教程

  1. xxxx
  2. xxxx
  3. xxxx

使用说明

  1. xxxx
  2. xxxx
  3. xxxx

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

特技

  1. 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
  2. Gitee 官方博客 blog.gitee.com
  3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
  4. GVP 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目
  5. Gitee 官方提供的使用手册 https://gitee.com/help
  6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/

空文件

简介

springboot+mybatisplus+mysql+echarts的各种疫情可视化数据展示 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/imu_w/springboot-2022-nocv.git
git@gitee.com:imu_w/springboot-2022-nocv.git
imu_w
springboot-2022-nocv
springboot-2022-nocv
master

搜索帮助