软件工程第三周博客

本周我们做的是web界面将数据进行可视化，首先导入以下组件

因为要用到Json，所以需要导入json

然后写bean层，对数据进行封装

package com.yiqingshuju.bean;

public class Bean {
    private  String Date;
    private  String Province;
    private  String  Confirmed_num;
    private   String Cured_num;
    private  String  Dead_num;
    private  String Code;
    public  String getDate() {
        return Date;
    }
    public void setDate(String date) {
        Date = date;
    }
    public  String getProvince() {
        return Province;
    }
    public  void setProvince(String province) {
        Province = province;
    }
    public  String getConfirmed_num() {
        return Confirmed_num;
    }
    public  void setConfirmed_num(String confirmed_num) {
        Confirmed_num = confirmed_num;
    }
    public  String getCured_num() {
        return Cured_num;
    }
    public  void setCured_num(String cured_num) {
        Cured_num = cured_num;
    }
    public  String getDead_num() {
        return Dead_num;
    }
    public  void setDead_num(String dead_num) {
        Dead_num = dead_num;
    }
    public  String getCode() {
        return Code;
    }
    public  void setCode(String code) {
        Code = code;
    }
    
}

 

 

利用DBUtil层对数据库进行操作

package com.yiqingshuju.Util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class DBUtil {
    //数据库URL和账号密码
        public static final String connectionURL="jdbc:mysql://localhost:3306/payiqing?useUnicode=true&characterEncoding=GB18030&useSSL=false&serverTimezone=GMT&allowPublicKeyRetrieval=true";
        public static final String username="root";
        public static final String password="123456";
        static Connection connection;
        static ResultSet rSet;
        static PreparedStatement sql;
        //数据库连接
        public static Connection getConnection()
        {
            try {
                Class.forName("com.mysql.cj.jdbc.Driver");
                return DriverManager.getConnection(connectionURL, username, password);
            } catch (Exception e) {
                // TODO: handle exception
                System.out.println("数据库连接失败");
                e.printStackTrace();
            }
            return null;
        }                                                   
        public static String search(String  date)//查
        {
            try {
        
                connection=getConnection();
                sql=connection.prepareStatement("select * from info where Date like '"+date+"%' and  City=''");
                System.out.println(sql);
                rSet=sql.executeQuery();
                //ArrayList<Things> list =new ArrayList<>();
                
                JSONArray jsonArray=new JSONArray();
                while(rSet.next())
                {
                    System.out.println(rSet.getString(3));
                    JSONObject json=new JSONObject();
                    json.put("name",rSet.getString(3) );
                    json.put("num", rSet.getString(5));
                    json.put("yisi",rSet.getString(6));
                    json.put("cure", rSet.getString(7));
                    json.put("dead", rSet.getString(8));
                    json.put("code", rSet.getString(9));
                    jsonArray.add(json);
                }
                return jsonArray.toString();
            } catch (Exception e) {
                // TODO: handle exception
                return null;
            }
            
        }
    public static void main(String[] args) {
        search("2020-02-11");
    }

}

servlet代码

package com.yiqing.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.yiqingshuju.Util.DBUtil;


public class Servlet extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         request.setCharacterEncoding("utf-8");
         response.setContentType("text/html;charset=UTF-8");
         // String date=request.getParameter("date");
         System.out.println(request.getParameter("date"));
         response.getWriter().write(DBUtil.search(request.getParameter("date")));
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
        
       
    }

}

jsp代码

<%@page import="com.alibaba.fastjson.JSON"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script src="echarts.min.js"></script>
 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
            #one{
                /*border: 1px solid black;*/
                 1000px;
                height:auto;
                background-color: ghostwhite;
                margin: auto;
            }
            #main{
            1000px;
            height:outo;
            background-color: ghostwhite;
            margin: auto;
            }
            .table
            {
            margin: auto;
            }
</style>
</head>
<body>
        <div id="one">
            请输入时间：<input type="text" name="date" id="date" />      
             <input type="submit" value="查询" onclick="search()">
        </div>
        <br/>
<div id="main" style=" 100%;height:400px;overflow: auto;"></div>
<table class="table">
        <thead class="head">
            </thead>
        <tbody class="main"></tbody>
    </table>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        myChart.showLoading();
        function search() {
            var date=$("#date").val();
           alert("查找成功");
            $.post(
                'Servlet',
                {date:date},
                function(msg){
                    var json=JSON.parse(msg);
                    var size=json.length;
                    var names=[];
                    var nums=[];
                    for(i=0;i<size;i++){
                        names.push(json[i].name);
                        nums.push(json[i].num);
                        i++;
                    }
                    myChart.hideLoading();
                    var option = {
                            title: {
                                text: $("input[name=date]").val()+'确诊人数'
                            },
                            tooltip: {},
                            legend: {
                                data:['确诊人数']
                            },
                            xAxis: {
                                data: names
                            },
                            yAxis: {},
                            series: [{
                                name: '确诊人数',
                                type: 'bar',
                                data: nums
                            }]
                        };
                  myChart.setOption(option);
                  tr="<tr><th>省份</th><th>确诊人数</th><th>疑似人数</th><th>治愈人数</th><th>死亡人数</th><th>编码</th></tr>";
                  $('.head').append(tr);
                  for(i=0;i<size;i++)
                      $('.main').append("<tr></tr>");
                  $('.main tr').each(function(i){
                      $(this).append("<td>"+json[i].name+"</td>");
                      $(this).append("<td>"+json[i].num+"</td>");
                      $(this).append("<td>"+json[i].yisi+"</td>");
                      $(this).append("<td>"+json[i].cure+"</td>");
                      $(this).append("<td>"+json[i].dead+"</td>");
                      $(this).append("<td>"+json[i].code+"</td>");
                  })
           
                }
               //"json"
                );
            
        }
     
   </script>              
</body>
</html>