Software Engineering Week blog

This week we do is a web interface to visualize data, first import the following components

 

 

 

Because to use Json, so the need to import json

Then write bean layer, encapsulating the data

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;
    }
    
}

View Code

 

 

 

DBUtil layer using the database operations

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");
    }

}

View Code

servlet code

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);
        
       
    }

}

View Code

jsp code

<%@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;*/
                width: 1000px;
                height:auto;
                background-color: ghostwhite;
                margin: auto;
            }
            #main{
            width: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="width: 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.the init (document.getElementById ( 'main'         myChart.showLoading ();the specified configurations and graph data//));
        
        
) .val ();= $ ( "# DATE"
            var DATE
        function Search () {
           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 () + 'confirmed number' 
                            }, 
                            ToolTip: {}, 
                            Legend: { 
                                Data : [ 'diagnosed persons' ] 
                            }, 
                            XAXIS: { 
                                Data: names 
                            }, 
                            YAXIS: {}, 
                            Series: [{ 
                                name: ' The number of diagnosed ' , 
                                type: 'bar' , 
                                Data: the nums 
                            }] 
                        }; 
                  myChart.setOption (Option); 
                  TR = "<TR> <TH> Department </ th> <th> the number of confirmed < / th> <th> suspected number </ th> <th> number cure </ th> <th> The death toll </ th> <th> coding </ 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>

View Code