# springboot+vue疫情数据统计
**Repository Path**: chenhebin/expriment3
## Basic Information
- **Project Name**: springboot+vue疫情数据统计
- **Description**: No description available
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 1
- **Created**: 2020-05-11
- **Last Updated**: 2021-10-29
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## 东莞理工学院网络空间安全学院
#### 实验报告模板
课程名称：企业级开发框架专题
学期：2020春季
`实验名称`：利用Spring boot的自动装配特性实现动态注册组件 `实验序号`：三
`姓名`：陈和斌 `学号`：201741404201 `班级`：17软卓1班
`实验地址`：居家 `实验日期`：2020-5-11 `指导老师`：黎志雄
`教师评语`：XXX `实验成绩`：XXX `百分制`：XXX
`同组同学`：无
#### 一、实验目标
1、 掌握使用Spring框架自带的RestTemplate工具类爬取网络数据；
2、 掌握使用Spring框架自带的计划任务功能；
3、 掌握使用Apache Commons CSV组件解释CSV文件；
4、 掌握Java 8的Stream API处理集合类型数据；
5、 了解使用模板引擎或前端框架展示数据。
#### 二、实验环境
1、 JDK 1.8或更高版本
2、 Maven 3.6+
3、 IntelliJ IDEA
4、 commons-csv 1.8+
5. Vue cli3.x
#### 三、实验内容与实验步骤
##### 1、通过IntelliJ IDEA的Spring Initializr向导创建Spring Boot项目
#### `步骤`：
File->new Project->选择Spring Initializr->填写项目信息,具体如下图：
##### 2、添加功能模块：spring MVC、lombok、commons-csv等
#### `步骤`：
在pom文件中添加依赖具体如下:
##### 3、使用Spring框架自带的RestTemplate工具类爬取数据。
#### `步骤`：
在fetchVirusData()函数中添加如下代码:
```
String CORONA_VIRUS_DATA_URL = "https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv";
Reader reader = null;
RequestEntity requestEntity = RequestEntity
.get(URI.create(CORONA_VIRUS_DATA_URL))
.headers(httpHeaders -> httpHeaders.add("User-Agent", "Mozilla/5.0"))
.build();
ResponseEntity exchange = new RestTemplate().exchange(requestEntity, Resource.class);
Resource body = exchange.getBody();
```
#### `说明`：
RestTemplate采用同步方式执行 HTTP 请求的类,上述代码添加了User-Agengt头部。
##### 4、 分析csv文件的数据结构，定义model类
#### `步骤`：
创建一个RegionInfection类，并添加构造方法，代码如下：
```
@Data
public class RegionInfection {
private int key;
private String province;
private String country;
private int totalCases;
private int increaseCases;
}
```
#### `说明`：
key为数组索引，province表示省或州，country表示国家或地区，totalCase表示感染总数，increaseCases表示昨日新增人数。
##### 5、用Apache Commons CSV组件解释CSV文件。
#### `步骤`：
1. 将CSV文件的输入流转换成modle类的对象数组，主要代码如下所示：
```
final CSVParser records = new CSVParser(Objects.requireNonNull(reader), CSVFormat.EXCEL.withHeader());
try {
int k=0;
for (final CSVRecord record : records) {
String province = record.get("Province/State");
String country = record.get("Country/Region");
int totalCases = Integer.parseInt(record.get(record.size()-1));
int increaseCases = totalCases - Integer.parseInt(record.get(record.size()-2));
RegionInfection regionInfection = new RegionInfection(
k,province,country,totalCases,increaseCases);
k++;
regionInfectionList.add(regionInfection);
}
}
```
#### `说明`：
根据字段或位置选择性地获取所需的数据，进行一定的处理后设置为model类的属性
##### 6、 使用Spring框架自带的计划任务功能定时更新统计数据。
#### `步骤`：
1. 在获取并解析数据的函数上面填加定时处理注解，具体如下所示：
#### `说明`：
1. @Scheduled是定时处理注解
2. "0 0 1 * * *"表示每天凌晨1点执行，6个字符分别表示Seconds Minutes Hours DayofMonth Month DayodWeek，*表示所有
3. @PostConstruct 确保应用程序启动时，获取一次统计数据。
##### 7. 编写单元测试。
#### `步骤`：
添加一个测试类用于测试Service层是否能正确获取并解析数据，具体代码如下所示：
```
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.NONE, classes = {VirusDataService.class})
class VirusDataServiceTest {
@Autowired
VirusDataService virusDataService;
@Test
void testVirusDataService() throws IOException {
virusDataService.fetchVirusData();
Assertions.assertNotEquals(0,virusDataService.getRegionInfectionList().size());
System.out.println(virusDataService.getRegionInfectionList().get(0));
}
}
```
#### `说明`：
1. 不使用web环境使测试速度更快；
2. 断言成功表示正确获得了数据
3. 输入第一条数据判断是否数据异常
##### 8、 定义Cotroller控制器。
#### `步骤`：
1. 封装返回的json数据样式：
```
@Data
//意思是Tree这个类里面需要用到另外一个类，
// 但是又不能确定要用到的那个类的具体类型，所以暂时用T来代替。
public class ResultVO {
private Integer code;
private String msg;
private T data;
}
```
2. 定义controller返回受冠状病毒感染人数的json数据：
```
@Controller
@ResponseBody
public class InfectionDataController {
@Autowired
VirusDataService virusDataService;
@RequestMapping("/infectionCases/all")
public ResultVO getInfectionData(){
return ResultVOUtil.success(virusDataService.getRegionInfectionList());
}
}
```
说明：
1. @ResponseBody将对象转换成json对象传输
2. ResultVOUtil是自定义自动设置dataz中code和msg值的工具类
3. 查询功能可以由前端完成
##### 9、 定义前端数据展示页面。
#### `步骤`：
1. 用命令行创建vue cli3的项目
2. 添加支持Resource和Ant Design Vue
3. 在生命周期函数created()中根据后端api获取数据
4. 使用Ant Design Vue的table组件展示数据，支持根据国家查找和根据感染人数降序或升序排序
5. 用js计算全世界或某个国家总感染人数和单日新增人数，并展示
部分核心代码如下图所示：
```
created() {
this.$http.get("/infectionCases/all/")
.then(function (resp) {
this.infectionData = resp.data.data;
var totalCases = 0;
var totalIncreaseCases = 0;
this.infectionData.forEach(sumCases);
function sumCases(item) {
totalCases += item.totalCases;
totalIncreaseCases += item.increaseCases;
}
this.totalCases = totalCases;
this.totalIncreaseCases = totalIncreaseCases;
}, function (error) {
console.log(error);
})
}
```
```
onFilter: (value, record) =>
record.country
.toString()
.includes(value),
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => {
// this.searchInput.focus();
});
}
},
```
#### 四、实验结果
##### 1、Service获取并处理csv数据的测试结果:
#### `说明`：
测试结果正确, Service能正确获取并处理csv数据
##### 2、前端效果展示
1. 浏览器地址栏输入“localhost:8080/”,显示初始界面：
#### `说明`：
支持分页显示，初始以降序排列各个国家和地区的感染新冠肺炎的情况，统计总感染人数和昨日新增人数
2. 点击TotalCases右边的小箭头可更改排序方式，以下是升序排列：
#### `说明`：
排序由前端完成
3. 点击Country/Region右边的小号放大镜，弹出搜索栏：
4. 在搜索栏中输入“China”回车或点击Search,结果如下所示：
5. 在搜索栏中输入“US”回车或点击Search,结果如下所示：
#### 五、实验总结
```
1.本次实验让我们逐步了解用java爬取csv数据并解析
2.对前后端交互有了更深的理解
```
