结对第二次作业——某次疫情统计可视化的实现

格式描述

这个作业属于哪个课程	2020春|S班 (福州大学)
这个作业要求在哪里	作业要求的链接
结对学号	221701236、221701239
这个作业的目标	实现疫情统计可视化、锻炼与同学合作的能力。
作业正文	....
其他参考文献	博客园

github仓库地址:https://github.com/bzzd2333/InfectStatisticWeb

代码规范链接:https://github.com/bzzd2333/InfectStatisticWeb/blob/master/codestyle.md

一.成品展示

• 实现了数据显示功能,如图使用了echarts,可以将查看某个省份的现有确诊和累计确诊信息
  
  
  
• 实现了总体信息页面日期选择的功能,如图,可以选择更新的最后日期以查看不同时间的疫情分布情况
  
  
  
• 点击地图中的某个省份,可以进入该省份的详细疫情情况显示页面
  
  
  
• 在详情页面里,可以选择查看该省份的新增确诊趋势、累计确诊趋势、累计治愈/死亡图
  
  
  
• 同样,在详情页面里,也可以选择具体的日期,如图所示,选择了日期后显示了相对应的图表
  
  
  
  
  
  
  

二.结对过程

• 以下是我们结对过程中的聊天记录:
  
  
  
  
  
  
  
  
  
  

三.设计实现过程与代码说明

• 这是本次肺炎疫情统计开发的思维导图
  
    本次作业的大体思路是，jsp向servlet请求数据，servlet调用后台的方法得到数据后返回jsp。

• 这是servlet要用到的方法，因为代码大多取自寒假第二次作业，所以不做赘述，仅给出函数声明：

  public interface ProvinceDAO
  {
  //初始化
  public HashMap<String,Province> init();
  //处理全国一天的情况
  public List dealOneDay(String date) throws IOException;
  //处理指定省份从疫情开始以来每天的情况
  public HashMap<String, List> dealOneProvince(String date,String province) throws IOException;;
  //处理日志中的一行
  public void dealOneLine(HashMap<String,Province> map, String[] array);
  //统计全国数据
  public void allStatistic(HashMap<String,Province> map);
  //获取全国数据
  public Province getCountry();
  //HashMap转换为List
  public List mapToList(HashMap<String,Province> map);
  }

• 因为要实现打开JSP页面时自动加载数据，所以我用了土办法：写一个test.jsp发送数据，然后主页面index.jsp
  使用include指令读取test.jsp中的代码，这样运行index.jsp就可以直接加载数据：

test.jsp的代码：

<%
            SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");                      
            
            ProvinceDAO provinceDAO = new ProvinceDAOImpl(); 
            Date today = new Date();
            Calendar calendar = Calendar.getInstance();
            calendar.add(Calendar.DATE, -1);
            Date yesterday = calendar.getTime();
            String year = String.format("%tY", today);
            String month = String.format("%tm", today);
            String day = String.format("%td", today);
            
            //获取今日全国数据        
            List<Province> todayProvince = provinceDAO.dealOneDay(df.format(today));
            Province todayCountry = provinceDAO.getCountry(); 
            int[] todayData = todayCountry.getData();
                        
            //获取昨日全国数据
            List<Province> yesterdayProvince = provinceDAO.dealOneDay(df.format(yesterday));
            Province yesterdayCountry = provinceDAO.getCountry();        
            int[] yesterdayData = yesterdayCountry.getData(); 
            
            //存放今日与昨日的对比
            String[] compareData = new String[6];
            for (int i = 0; i < 6; i ++)
            {
                if ((todayData[i] - yesterdayData[i]) >= 0)
                {
                    compareData[i] = "+" + (todayData[i] - yesterdayData[i]);
                }
                else 
                {
                    compareData[i] = "" + (todayData[i] - yesterdayData[i]);
                }
               
            }
            
            //发送今日日期
            request.setAttribute("today", today);
            request.setAttribute("year", year);
            request.setAttribute("month", month);
            request.setAttribute("day", day);
            //发送今日全国数据
            request.setAttribute("todayCountry", todayCountry);               
            //发送昨日全国对比数据
            request.setAttribute("compareData", compareData);
            
            
    %>

• 选择日期功能的实现:前端使用表单读取指定的日期，然后跳转到dateRes.jsp页面取指定的日期从后台
  取到数据后跳转到date.jsp页面显示指定日期的数据。dateRes.jsp的代码与test.jsp大体相同，只是dateRes.jsp接收的参数为指定的日期；
  date.jsp代码与index.jsp代码也大体相同，只是date.jsp没有include指令。

• 主页echarts获取数据的实现：JSP使用ajax向servlet读取数据。

前台ajax代码：

$.ajax
({
    url:'IndexServlet',
    type:'post',
    async:'true',
    data:{},
    dataType:'json',
    success:function(data){         
        
        for(var i = 0 ; i < data.length ; i++){
            dataList1.push({ name: data[i].name, value: data[i].allInfection});
            //document.write(dataList[i+1].name + "。");
        }
        myChart.hideLoading();
        myChart.setOption({                  
            series : [
                {
                    name: '累计确诊',
                    type: 'map',
                    geoIndex: 0,
                    data:dataList1
                }
            ]
        });
    },
    error:function(){
        alert("图表数据加载失败");
        myChart.hideLoading();
    }            
});

IndexServlet代码:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
{
    //response.getWriter().append("Served at: ").append(request.getContextPath());	 
    response.setCharacterEncoding("utf-8");
    SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");                      
	String flag = request.getParameter("flag");		
	String date = request.getParameter("Date"); 
	System.out.println(date);
	
	//选择日期选项
	if (flag != null && flag.equals("date"))
	{		    
	    ProvinceDAO provinceDAO = new ProvinceDAOImpl(); 		                    
        //获取今日全国数据        
        List<Province> todayProvince = provinceDAO.dealOneDay(date);
                                                   
        //发送各省现有、累计确诊数据 
        Gson json = new Gson();
        String result = json.toJson(todayProvince);
        System.out.print(result);
        response.getWriter().write(result);    
	}		
	//默认页面
	else 
	{
	    ProvinceDAO provinceDAO = new ProvinceDAOImpl(); 
	    Date today = new Date();
     	        
        //获取今日全国数据        
        List<Province> todayProvince = provinceDAO.dealOneDay(df.format(today));
        	       	        	                   
        //发送各省现有、累计确诊数据 
        Gson json = new Gson();
        String result = json.toJson(todayProvince);
        //System.out.print(result);
        response.getWriter().write(result);	            
        
    }
}	

• 点击省份实现跳转的实现：给echarts添加click事件，点击即传递省份名称并跳转到DetailServlet，

DetailServlet代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
	{
	    //必须设置，否则跳转页面中文乱码	    
	    response.setCharacterEncoding("utf-8");
	    request.setCharacterEncoding("utf-8");
	    ProvinceDAO provinceDAO = new ProvinceDAOImpl();        
        SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");                      
        String flag = request.getParameter("flag");
        String province = request.getParameter("province");
        String date = request.getParameter("year") + "-" + request.getParameter("month") + "-" + request.getParameter("day");           
        Date today = new Date();
        
        //指定日期
        if (flag != null && !date.equals(df.format(today)))
        {
            //指定日期代码仅与默认页面有接收参数的区别，故省略。
        }       
        //默认页面
        else 
        {
            
            Calendar calendar = Calendar.getInstance();
            calendar.add(Calendar.DATE, -1);
            Date yesterday = calendar.getTime();
            String year = String.format("%tY", today);
            String month = String.format("%tm", today);
            String day = String.format("%td", today);
            
            //获取今天该省份数据
            HashMap<String, List<Province>> todayData = provinceDAO.dealOneProvince(df.format(today), province);
            List<Province> todayOneList = todayData.get("1");
            List<Province> todayAllList = todayData.get("2");
            Province todayData1 = todayAllList.get(todayAllList.size() - 1);
            Province yesterdayData1 = todayAllList.get(todayAllList.size() - 2);
            int[] todayArray = todayData1.getData();
            int[] yesterdayArray = yesterdayData1.getData();
            
            //存放今日与昨日的对比
            String[] compareData = new String[6];
            for (int i = 0; i < 6; i ++)
            {
                if ((todayArray[i] - yesterdayArray[i]) >= 0)
                {
                    compareData[i] = "+" + (todayArray[i] - yesterdayArray[i]);
                }
                else 
                {
                    compareData[i] = "" + (todayArray[i] - yesterdayArray[i]);
                }
            }
            
            //发送省份名称
            request.setAttribute("provinceName", todayData1.getName());
            //发送日期
            request.setAttribute("year", year);
            request.setAttribute("month", month);
            request.setAttribute("day", day);
            
            //发送今日省份数据
            request.setAttribute("todayData", todayData1);
            
            //发送昨日省份对比数据
            request.setAttribute("compare1", compareData);            
                       
            request.getRequestDispatcher("detail.jsp").forward(request, response);
        }
	}

• 详情页面的ehcharts的数据由JsonServlet发送

JsonServlet关键代码：

//获取今天该省份数据
HashMap<String, List<Province>> todayData = provinceDAO.dealOneProvince(df.format(today), province);
List<Province> todayOneList = todayData.get("1");
List<Province> todayAllList = todayData.get("2");       
todayOneList.addAll(todayAllList);     

Gson json = new Gson();
String result = json.toJson(todayOneList);
response.getWriter().write(result);  

四.心路历程与收获

• 221701239:

  本次肺炎疫情项目主要是用javaee开发,我们将这次代码分为前端和服务器端部分,一个人编写前端, 一个人编写后端,在编写过程中发现,在进度上一定要及时交流,以保证前端的界面代码可以匹配后端的 编写思路,如果一口气写完才进行交流,可能会带来前后端匹配上的难度.第二个就是问题解决的及时性 ,在因一个问题而导致整个项目无法向前开发时,前后端的编写者应该同时想解决方法来提高项目的进度. 还有就是时间分配的问题,我发现这种分为前后端的工作,应该是前端现做一个简陋但是可以满足交互功 能的界面来供后端审核,然后后端觉得没问题时再进行最后的布局以及样式设计,这样的话效率会提高很多.   经过此次团队编程,我感受到了以后在工作时的工作状态,我学会了如何对一个软件工程项目进行分 工合作,更明确了各个位置需要做出的工作,并对今后的项目开发有了更大的积极性与信心.

• 221701236:

  本次作业我的心态变化较大，一开始我看了题目有了大体的思路后觉得这次作业比较简单很 好实现，后台的代码进展也比较快，但是当我开始把后台的代码传到前台时却遇到了各种问题，这 让我心态大崩，这也导致该程序的逻辑比较乱。最后在我静下心来之后，我一一实现了程序的功能。   我本次的收获是，许多东西的难度只有在上手之后才能体会到，因此我应该尽早对整个项目 的技术难点有一定的了解。同时因为我javaee的知识还比较薄弱，所以有些功能的实现方式不是 很优雅，我还应该继续深入地对javaee进行学习。

五.对伙伴的评价

• 221701239:

    这次的队友交流很及时,我一有问题问他,他基本能在一分钟之内回应,所以这一方面大大促进的
  项目的开展.这次的编程设计是他设计的,而且这次我是前端编程,在难度方面较后端来说会小很多,工作量较大也比较辛苦.而且他在一些代码的错误方面也及时给我提示,很快解决了问题.总的一句话,他是真滴牛!

• 221701236:

    我的队友221701239十分靠谱，这次项目的任务主要是我在分配，他总是能按时并
  保质保量地完成。所以我想说他是真滴行!