# experiment3

**Repository Path**: lirisheng/experiment3

## Basic Information

- **Project Name**: experiment3
- **Description**: 全球新型冠状病毒实时数据统计应用程序的设计与实现
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-12
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 实验三 全球新型冠状病毒实时数据统计应用程序的设计与实现


## 一、 实验目的  
 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+ ,vue ,axios ,echarts  

##  三、实验任务  
1. 编写爬取全球新型冠状病毒数据  
    1.导入解析csv文件的包  
    <div align=center>
         <img width = '70%' height ='50%' src= picture/1.1.png "屏幕截图.png">
     </div>
    2.爬取数据  
      <div align=center>
         <img width = '70%' height ='50%' src= picture/1.2.png "屏幕截图.png">
       </div>
2. 编写用common-csv包来解析获取到的资源  
    <div align=center>
         <img width = '70%' height ='50%' src= picture/2.1.png "屏幕截图.png">
    </div>    
    
3. 定时爬取全球新型冠状病毒数据  
    <div align=center>
        <img width = '70%' height ='50%' src= picture/3.1.png "屏幕截图.png">
     </div>    

4. 启动时,自动爬取一次数据,用于初始化  
    <div align=center>
        <img width = '70%' height ='50%' src= picture/4.1.png "屏幕截图.png">
     </div>    

5. 编写controller类  
    ```java
       @RequestMapping("/data")
          @ResponseBody
          public  HashMap<String, Object> DataCos(@RequestParam("country") String coty, HttpServletResponse response) {
              System.out.println("entry data");
              System.out.println("cpty:"+coty);
              HashMap<String, Object>maps = new HashMap<String, Object>();
              Iterable<CSVRecord> records =MyController.records;
              int newWorldCount = 0;
              int newCotyCount = 0;
              int oldWorldCount = 0;
              int oldCotyCount = 0;
              HashMap<String, Object> citys = new HashMap<String, Object>();
              for (CSVRecord record : records) {
                  newWorldCount = newWorldCount + Integer.parseInt(record.get(record.size() - 1));
                  oldWorldCount=oldWorldCount+Integer.parseInt(record.get(record.size() - 2));
                  if(record.get("Country/Region").equalsIgnoreCase(coty)){
                      newCotyCount=newCotyCount+ Integer.parseInt(record.get(record.size() - 1));
                      oldCotyCount=oldCotyCount+Integer.parseInt(record.get(record.size() - 2));
                        if(record.get("Province/State")!=null){
                            citys.put(record.get("Province/State"),Integer.parseInt(record.get(record.size() - 1)));
                        }
                  }
              }
              if(citys.isEmpty()){
                  citys.put("coty",newWorldCount);
              }
              maps.put("newWorldCount",newWorldCount);
              maps.put("newCotyCount",newCotyCount);
              maps.put("addWorldCount",newWorldCount-oldWorldCount);
              maps.put("addCotyCount",newCotyCount-oldCotyCount);
              maps.put("citys",citys);
      
              //在使用axios请求的时候,返回的响应中一定要有下面的请求头
             response.setHeader("Access-Control-Allow-Origin", "*");
             response.setHeader("Cache-Control","no-cache");
              return maps;
          }
    ```
6. 编写测试单元  
    <div align=center>
        <img width = '70%' height ='50%' src= picture/6.1.png "屏幕截图.png">
     </div>    
    
7. 编写前端页面  
    <div align=center>
        <img width = '70%' height ='50%' src= picture/7.1.png "屏幕截图.png">
    </div>   
    <div align=center>
       <img width = '70%' height ='50%' src= picture/7.2.png "屏幕截图.png">
    </div>   
    <div align=center>
        <img width = '70%' height ='50%' src= picture/7.3.png "屏幕截图.png">
     </div>    
 
 
    
## 四、实验结果截图  
1. 由于使用前后端分离技术,所以直接访问vue.html(默认显示china数据)
      <div align=center>
            <img width = '70%' height ='50%' src= picture/8.1.png "屏幕截图.png">
      </div>   
2. 查询canada关于新型冠状病毒的数据
      <div align=center>
            <img width = '70%' height ='50%' src= picture/8.2.png "屏幕截图.png">
      </div>   

    
## 五、实验总结  
1. 知道如何利用`common-csv`包去解析csv文件成集合类型,如果该vsc文件中的开头就是字段名,就不用去自己编写  
   字段去映射,而是该包就会自动去根据开头字段去映射数据,可以通过字段名或者索引去访问数据
   ```java
   //解析reader中读取的csv文件
     Iterable<CSVRecord> records = CSVFormat.RFC4180.withFirstRecordAsHeader().parse(reader);

   //访问该数据
    for(CSVRecord record : records){
         System.out.println(record.get(record.size()-1));
         System.out.println(record.get("Province/Stat"));
         System.out.println(record.get("Country/Region"));
    }
   ```  
2. 知道定时执行任务
3. 学会了使用vue和axios(发送异步请求,接收json字符串)分离前后端,展示前端页面
4.知道使用echarts.js技术根据接收后端的json数据来画出该国的所有城市的确证案例的柱状图