jsp如何读取数据库，取到数据后，展示数据。

最新推荐文章于 2024-04-29 23:47:34 发布

laocooon523857886

最新推荐文章于 2024-04-29 23:47:34 发布

阅读量884

点赞数 8

文章标签：数据库算法

本文链接：https://blog.csdn.net/laocooon/article/details/134747060

版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>      
<%@ page import="java.util.Date,
java.io.IOException,
java.io.PrintWriter,
java.sql.Connection,
java.sql.DriverManager,
java.sql.ResultSet,
java.sql.SQLException,
java.sql.Statement
" %>


<%
//先说实现思路  在浏览器页面显示2023年12个月最高温度，和最低温度。柱状
//1、通过现有插件能在jsp上显示柱状界面
//2、分析柱状界面需要提供哪几方面信息，  月份，最高温度，最低温度。
//3、如何将单柱改为两柱
//4、哪些位置的信息需要手动调整
//5、哪些地方的数据需要从数据库获取
//6、在指定的数据库建立指定的表
//7、在建立好的表中提取数据
//8、提取数据需要 数据库地址 端口 数据库名 帐号和 密码
//9、连接数据库，建立sql执行接口和sql语句，执行语句，获取记录
//10、获取记录过程中将记录转化为需要的格式
//11、得到数据后加到展示图合理 位置上。





// https://m.runoob.com/chartjs/
/*

Chart.js 柱形图  https://m.runoob.com/try/try2.php?filename=trychartjs_bar
Chart.js 气泡图
Chart.js 环形图
Chart.js 饼图
Chart.js 折线图
Chart.js 混合图 https://m.runoob.com/try/try2.php?filename=trychartjs_scatter
Chart.js 极地图
Chart.js 雷达图
Chart.js 散点图
*/
try {
	Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e2) {	
	e2.printStackTrace();
}


Connection con = null;
try {
	con = DriverManager.getConnection("jdbc:mysql://mysql.sqlpub.com:3306/huangjin","laocooon","fc12f7a5215e8e0a");
} catch (SQLException e1) {
	// TODO Auto-generated catch block
	e1.printStackTrace();
}


Statement stat = null;
try {
	stat = con.createStatement();
} catch (SQLException e) {
	// TODO Auto-generated catch block
	e.printStackTrace();
}


String sql = "SELECT * FROM MonthlySorted";
ResultSet rs = null;
try {
	rs = stat.executeQuery(sql);
} catch (SQLException e) {
	e.printStackTrace();
}


String i11="",i22="",i33="";

try {
	while(rs.next()) {
	    i11+="'"+rs.getString(1)+"',";
	    i22+="'"+rs.getString(2)+"',";
	    i33+="'"+rs.getString(3)+"',";
	    
	}
} catch (SQLException e) {	
	e.printStackTrace();
}
i11=i11.substring(0,i11.length()-1);
i22=i22.substring(0,i22.length()-1);
i33=i33.substring(0,i33.length()-1);
session.setAttribute("i1", i11);
session.setAttribute("i2", i22);
session.setAttribute("i3", i33);

try {
	con.close();
} catch (SQLException e) {	
	e.printStackTrace();
}
try {
	stat.close();
} catch (SQLException e) {	
	e.printStackTrace();
}
try {
	con.close();
} catch (SQLException e) {	
	e.printStackTrace();
}
%>


    

   
<!DOCTYPE html>
<html>
<head>
  <title>气温图表</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    #myChart{
        width:300px;
        height: 300px;
    }

  .hidden {
    display: none;
  }

  </style>
</head>
<body>

<%
Date date= new Date();
  String path="./aaa?" + new Date();
%>

    <%
    String i1=(String)session.getAttribute("i1");
    while (i1==null){
    	i1=(String)session.getAttribute("i1");
    }
    String i2=(String)session.getAttribute("i2");
    String i3=(String)session.getAttribute("i3");
    %> 
    
<iframe src=<%=path%> class="hidden"></iframe>   
  <canvas id="myChart"></canvas>
  <script>
   
    var tempData = {
      labels: [<%=i1%>],
      datasets: [
        {
          label: "最高气温",
          backgroundColor: "rgba(255,0,0,0.5)",
          borderColor: "red",
          borderWidth: 1,
          data: [<%=i2%>]
        },
        {
          label: "最低气温",
          backgroundColor: "rgba(0,0,255,0.5)",
          borderColor: "blue",
          borderWidth: 1,
          data: [<%=i3%>]
        }
        ,
        {
          label: "最低气温",
          backgroundColor: "rgba(0,0,255,0.5)",
          borderColor: "blue",
          borderWidth: 1,
          data: [<%=i3%>]
        },
        {
            label: "最低气温",
            backgroundColor: "rgba(0,0,255,0.5)",
            borderColor: "blue",
            borderWidth: 1,
            data: [<%=i3%>]
          }
      ]
    };
 
    var tempOptions = {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    };
 
 
    var ctx = document.getElementById("myChart").getContext("2d");
 
    var myChart = new Chart(ctx, {
      type: "bar",
      data: tempData,
      options: tempOptions
    });
  </script>
  
</body>
</html>