SSM疫情数据系统实战：MySQL+JSP+ECharts全链路教学项目

简介：本资源是一套面向高校JavaWeb课程设计实践的完整疫情数据统计分析系统，适用于计算机相关专业本科生开展SSM框架综合实训，解决疫情数据动态录入、多维度查询与可视化呈现等典型业务需求。压缩包共67个文件，含23个Java后端逻辑类、13个JSP页面、10个JS交互脚本及6个CSS样式文件，辅以SQL建表语句、MyBatis映射XML、项目配置文件与README说明文档，结构清晰，便于分层理解MVC架构实现。资源大小为1.02MB，轻量易部署，适配JDK 1.8、IDEA开发环境与MySQL 5.7数据库。已有393人学习下载，提供可直接运行的源码工程（含epidemic_maven模块）、完整数据库脚本（epidemic.sql）及中英文双语说明文档，覆盖从环境搭建、功能测试到图表渲染的全流程实践要点，是掌握Spring+SpringMVC+MyBatis整合开发的典型教学案例。

1. 这不是又一个“疫情看板”，而是一套能跑通、能改、能交作业的SSM实战闭环：从MySQL录入到JSP图表，全链路可调试、可扩展、可答辩

你手头那份《JavaWeb课程设计》作业，是不是还在卡在“Spring配置报错”“MyBatis查不到数据”“JSP页面404”这三座大山？别急着抄GitHub上那些只有一半代码、缺SQL、没README、连pom.xml都写错scope的“半成品”。这个epidemics-master.zip，是我去年帮三个班同学调试毕业设计时反复拆解、补全、压测过的真·教学级SSM项目——它不追求炫酷大屏，但每一步都经得起老师现场提问：为什么用<sql>标签封装通用条件？为什么Controller里没写事务却能保证数据一致性？为什么ECharts图表数据要走JSON接口而不是直接JSTL输出？它用最朴素的JSP+Servlet+MyBatis三层结构，把“疫情数据录入→查询→统计→可视化”这条业务线，完整钉死在JDK 1.8 + MySQL 5.7 + IDEA 2021.3的教学习惯环境里。适合刚学完Spring IoC和MyBatis动态SQL、正卡在“理论懂但不会串起来”的同学；也适合需要快速交付、但拒绝交“静态HTML+假数据”的指导教师——所有接口有真实SQL支撑，所有图表有后端JSON喂养，所有增删改查操作都能在本地MySQL里看到数据落盘。这不是玩具项目，是能让你在答辩时指着IDEA控制台说“老师您看，这里insert后立刻select，事务已提交”的底气来源。

2. 从解压到运行：五步落地SSM项目，每步都对应一个真实开发环节

2.1 解压与目录结构认知：看清epidemics-master里藏着哪几块“拼图”

拿到epidemics-master.zip后，先别急着导入IDEA。解压后你会看到这些关键文件/目录：

epidemics-master/ ├── epidemic.sql ← 数据库建表+初始数据（含省/市/确诊/治愈/死亡字段） ├── pom.xml ← Maven核心配置：Spring 4.3.28.RELEASE + SpringMVC 4.3.28 + MyBatis 3.4.6 + MySQL驱动 5.1.47 ├── src/ ← 标准Maven源码结构 │ ├── main/ │ │ ├── java/com/epidemic/ ← Controller/Service/Dao/Entity包结构清晰 │ │ ├── resources/ ← mybatis-config.xml + jdbc.properties（含localhost:3306连接） │ │ └── webapp/ ← JSP页面（index.jsp, list.jsp, chart.jsp）+ WEB-INF/web.xml │ └── test/ ← 空测试包（可自行补充JUnit测试） ├── epidemic_maven.iml ← IDEA项目配置文件（非必须，导入时自动生成） ├── README.md ← 中文说明：功能列表+数据库导入命令+启动步骤 └── README.en.md ← 英文版README（内容一致，仅语言差异）

提示：epidemic.sql是整个项目的基石。它不仅建了t_province、t_city、t_data三张表，还预置了2020年1月-3月全国31省原始疫情数据（含时间戳、累计确诊、新增确诊等字段），这意味着你导入后无需手动填数据，list.jsp就能立刻显示真实表格——这是验证后端逻辑是否通的关键锚点。

2.2 数据库准备：用epidemic.sql一键初始化，避开字符集与权限两大雷区

MySQL 5.7是硬性要求，低于5.6可能因datetime精度或GROUP BY严格模式报错。执行前请确认：

1. 创建数据库并指定字符集（关键！避免中文乱码）：

CREATE DATABASE epidemic_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2. 导入SQL脚本（注意路径替换为你的实际路径）：

mysql -u root -p epidemic_db < /path/to/epidemic.sql

3. 验证数据是否成功载入：

USE epidemic_db; SELECT COUNT(*) FROM t_data; -- 应返回约900+条记录（31省×30天） SELECT province_name, confirm_count FROM t_data WHERE date_time='2020-01-20' LIMIT 3;

参数说明：epidemic.sql中所有表均使用utf8mb4字符集，t_data.date_time字段类型为DATETIME（非TIMESTAMP），避免时区转换问题；t_province.province_id设为INT UNSIGNED，与MyBatis映射的Integer类型完全匹配，杜绝TypeException。

2.3 IDEA环境配置：三处必须修改的配置点，否则90%概率启动失败

将项目导入IDEA后，不要直接点击Run！必须完成以下三项配置：

1. JDK版本锁定为1.8
   File → Project Structure → Project → Project SDK→ 选择JDK 1.8（如无，请先安装JDK 1.8并配置）

   为什么必须是1.8？Spring 4.3.x官方最低要求JDK 1.6，但本项目pom.xml中maven-compiler-plugin明确指定source=1.8、target=1.8，且MyBatis 3.4.6的@SelectProvider注解在JDK 11+下存在反射兼容性问题。

2. Tomcat Server配置
   Run → Edit Configurations → + → Tomcat Server → Local

   • Deployment → Artifact：选择epidemics-master:war exploded
   • Server → VM options：添加-Dfile.encoding=UTF-8（解决JSP中文乱码）
   • On Update action：选Update classes and resources（热更新必备）

3. Maven依赖刷新与编译
   右键项目 →Maven → Reload project，等待Dependencies树展开；
   手动触发编译：Build → Build Project（确保target/classes下生成com/epidemic/包结构）。

2.4 启动验证：用浏览器访问三个URL，逐层确认SSM各层是否就位

启动Tomcat后，按顺序访问以下地址，观察响应：

URL	预期现象	定位问题层级
http://localhost:8080/epidemics-master/	跳转至index.jsp，显示“疫情数据统计分析系统”首页	Web层（web.xml + welcome-file-list）
http://localhost:8080/epidemics-master/data/list	显示包含“省份”“日期”“确诊数”等列的HTML表格，数据来自t_data	Controller→Service→Dao→DB全链路
http://localhost:8080/epidemics-master/chart/data	返回纯JSON：{"labels":["湖北","广东","浙江"], "data":[67800,1342,1219]}	Controller JSON序列化（Jackson）+ Service聚合逻辑

逻辑说明：/data/list由DataController.list()处理，调用DataService.findAll()，最终执行DataMapper.selectAll()；而/chart/data则走ChartController.getData()，内部调用DataService.getTopProvinceByConfirm(3)，通过MyBatis<select>中的ORDER BY confirm_count DESC LIMIT #{limit}实现TOP-N查询——这正是SSM分层设计的典型体现：Controller不碰SQL，Service协调业务规则，Dao专注数据存取。

3. 功能模块拆解：疫情数据录入、查询、图表展示的SSM实现细节

3.1 疫情数据录入：表单校验、事务控制与MyBatis批量插入的协同

录入功能位于/data/add.jsp，提交到DataController.add()。其核心不在前端JS校验，而在后端事务与SQL优化：

// com.epidemic.controller.DataController.java @RequestMapping(value = "/add", method = RequestMethod.POST) @ResponseBody public Result add(@RequestBody Data data) { try { dataService.insert(data); // 关键：Service层开启事务 return Result.success("录入成功"); } catch (Exception e) { return Result.fail("录入失败：" + e.getMessage()); } }

// com.epidemic.service.impl.DataServiceImpl.java @Transactional // Spring声明式事务：保证insert失败时自动回滚 @Override public void insert(Data data) { dataMapper.insert(data); // 对应mapper/DataMapper.xml中的<insert> }

<!-- src/main/resources/mapper/DataMapper.xml --> <insert id="insert" parameterType="Data"> INSERT INTO t_data ( province_id, city_id, date_time, confirm_count, suspect_count, cure_count, dead_count ) VALUES ( #{provinceId}, #{cityId}, #{dateTime}, #{confirmCount}, #{suspectCount}, #{cureCount}, #{deadCount} ) </insert>

参数说明：@RequestBody接收JSON，Spring MVC自动绑定到Data实体类；@Transactional注解让Spring AOP代理生成事务切面；MyBatis<insert>中#{}语法防止SQL注入，且自动处理null值（如cityId为空时插入NULL而非字符串"null"）。

3.2 疫情数据查询：动态条件拼接与分页的MyBatis最佳实践

查询入口/data/list支持按省份、日期范围筛选。关键在DataMapper.xml的动态SQL：

<select id="selectByCondition" resultType="Data"> SELECT d.*, p.province_name, c.city_name FROM t_data d LEFT JOIN t_province p ON d.province_id = p.province_id LEFT JOIN t_city c ON d.city_id = c.city_id WHERE 1=1 <if test="provinceId != null and provinceId != 0"> AND d.province_id = #{provinceId} </if> <if test="startTime != null and startTime != ''"> AND d.date_time >= #{startTime} </if> <if test="endTime != null and endTime != ''"> AND d.date_time <= #{endTime} </if> ORDER BY d.date_time DESC </select>

避坑点：<if>标签内test表达式必须用!= null and != 0双重判断，因为provinceId是Integer类型，null和0语义不同（0代表“全部省份”，null代表未传参）；ORDER BY必须显式声明，否则MySQL 5.7严格模式下会报错。

3.3 图表展示：ECharts与SpringMVC JSON接口的轻量级集成

chart.jsp通过AJAX调用/chart/data获取JSON，驱动ECharts：

// chart.jsp 中的JS片段 $.get("/epidemics-master/chart/data", function(data) { var chart = echarts.init(document.getElementById('main')); chart.setOption({ title: { text: '各省累计确诊TOP3' }, tooltip: {}, xAxis: { data: data.labels }, // ["湖北","广东","浙江"] yAxis: {}, series: [{ name: '确诊数', type: 'bar', data: data.data // [67800,1342,1219] }] }); });

后端ChartController.getData()返回标准JSON结构：

// com.epidemic.controller.ChartController.java @RequestMapping("/data") @ResponseBody public Map<String, Object> getData() { Map<String, Object> result = new HashMap<>(); List<Map<String, Object>> topList = dataService.getTopProvinceByConfirm(3); List<String> labels = topList.stream().map(m -> (String)m.get("provinceName")).collect(Collectors.toList()); List<Integer> values = topList.stream().map(m -> ((BigDecimal)m.get("totalConfirm")).intValue()).collect(Collectors.toList()); result.put("labels", labels); result.put("data", values); return result; }

逻辑说明：@ResponseBody触发Spring MVC的MappingJackson2HttpMessageConverter，将Map序列化为JSON；getTopProvinceByConfirm(3)在Service层执行GROUP BY province_id聚合查询，避免前端JavaScript做复杂计算——这是前后端职责分离的典型范例。

4. 避坑指南：SSM项目本地运行的五个高频翻车点与血泪解决方案

4.1 现象：启动Tomcat后访问/data/list报404，但index.jsp能打开

原因：web.xml中<servlet-mapping>的url-pattern与Controller的@RequestMapping不匹配，或DispatcherServlet未正确拦截.do请求。
解决：检查web.xml中<servlet-mapping>的<url-pattern>是否为/（推荐）或*.do；若为后者，需确保所有Controller方法@RequestMapping以.do结尾（如@RequestMapping("/data/list.do")）。本项目默认使用/，故无需加后缀。

4.2 现象：/data/list页面表格为空，控制台无SQL日志，但数据库确认有数据

原因：jdbc.properties中数据库URL未指定useSSL=false&serverTimezone=GMT%2B8，导致MySQL 5.7+连接时区错误，date_time字段查询条件失效。
解决：修改src/main/resources/jdbc.properties：

jdbc.url=jdbc:mysql://localhost:3306/epidemic_db?useSSL=false&serverTimezone=GMT%2B8&characterEncoding=utf8mb4

4.3 现象：录入新数据后，/data/list查不到，但数据库SELECT能看到

原因：DataMapper.xml中<insert>标签缺少useGeneratedKeys="true"和keyProperty="id"，导致主键未回填，后续关联查询丢失ID。
解决：在<insert>标签中添加：

<insert id="insert" parameterType="Data" useGeneratedKeys="true" keyProperty="id">

并确保Data实体类有private Integer id;及getter/setter。

4.4 现象：chart.jsp图表区域空白，浏览器Console报Uncaught ReferenceError: echarts is not defined

原因：echarts.min.js未正确引入，或CDN链接被防火墙拦截（国内建议用BootCDN）。
解决：将chart.jsp中<script src="...">替换为：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>

4.5 现象：修改JSP后刷新页面无变化，仍显示旧内容

原因：IDEA的On update action未设置为Update classes and resources，或Tomcat的Deploy path指向war exploded但未勾选Update resources。
解决：Run → Edit Configurations → Tomcat Server → Deployment →右侧Application context下方，勾选Update resources；同时确认On update action为Update classes and resources。

5. 进阶技巧：三步改造项目，让它从“课程设计”升级为“可演示的分析系统”

5.1 增加时间趋势折线图：复用现有Controller，只需改前端JS与SQL

原/chart/data接口只返回TOP-N省份，要展示某省每日趋势，需扩展ChartController：

// 新增方法 @RequestMapping("/trend/{provinceId}") @ResponseBody public List<Map<String, Object>> getTrendByProvince(@PathVariable Integer provinceId) { return dataService.getTrendByProvince(provinceId); }

对应SQL（在DataMapper.xml中添加）：

<select id="getTrendByProvince" resultType="map"> SELECT DATE_FORMAT(date_time, '%m-%d') as dateStr, confirm_count as value FROM t_data WHERE province_id = #{provinceId} ORDER BY date_time ASC </select>

前端chart.jsp中新增按钮与图表容器：

<button onclick="loadTrend(1)">湖北趋势</button> <!-- province_id=1 --> <div id="trendChart" style="width: 600px;height:400px;"></div> <script> function loadTrend(pid) { $.get("/epidemics-master/chart/trend/" + pid, function(data) { var chart = echarts.init(document.getElementById('trendChart')); chart.setOption({ title: { text: '湖北省每日确诊趋势' }, xAxis: { type: 'category', data: data.map(d => d.dateStr) }, yAxis: { type: 'value' }, series: [{ data: data.map(d => d.value), type: 'line' }] }); }); } </script>

价值点：无需新增Controller或Service，仅通过MyBatis动态SQL+前端JS组合，即可实现维度下钻分析——这是课程设计答辩时展示“数据洞察能力”的高光时刻。

5.2 实现数据库同步：用MySQL主从复制模拟多节点数据一致性（非必需但加分）

虽然课程设计不强制要求，但若想体现架构思维，可在本地搭建简易主从：

1. 主库（原epidemic_db）开启binlog：
   在my.cnf中添加：

   [mysqld] log-bin=mysql-bin server-id=1 binlog-do-db=epidemic_db

2. 从库创建相同数据库，执行：

   CHANGE MASTER TO MASTER_HOST='127.0.0.1', MASTER_USER='repl', MASTER_PASSWORD='repl123', MASTER_LOG_FILE='mysql-bin.000001', MASTER_LOG_POS=154; START SLAVE;

3. 在项目jdbc.properties中，将读操作路由到从库IP（需修改DataService的@DataSource注解或使用ShardingSphere）——此步可简化为“演示PPT中画出主从架构图”，不必真部署。

5.3 生成可交付文档：用Swagger自动生成API文档，替代手写README

为DataController和ChartController添加Swagger注解：

@RestController @RequestMapping("/data") @Api(tags = "疫情数据管理API") public class DataController { ... } @ApiOperation("获取TOP-N省份确诊数据") @RequestMapping("/top/{limit}") @ResponseBody public Map<String, Object> getTop(@PathVariable Integer limit) { ... }

在pom.xml中加入Swagger依赖：

<dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.9.2</version> </dependency>

启动项目后访问http://localhost:8080/epidemics-master/swagger-ui.html，即可交互式测试所有API——这比手写README.md更专业，且能直接验证接口可用性。

从那以后我每次带学生做SSM项目，都会强制他们在README.md里写清三点：①pom.xml中Spring/MyBatis版本号；②jdbc.properties必须修改的三项（URL、username、password）；③epidemic.sql导入后验证SELECT COUNT(*) FROM t_data的结果。这三行字，能省掉80%的“老师我跑不起来”提问。希望帮到你。

本文还有配套的精品资源，点击获取