把数据库的驱动放在bin目录下。
通过servlet 读取数据库的内容，生成session,然后跨页面传给展示页。
package src;import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class aaa*/
@WebServlet("/aaa")
public class aaa extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public aaa() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stub//response.getWriter().append("Served at: ").append(request.getContextPath());//1.导入jar包//2.注册驱动//Class.forName("com.mysql.jdbc.Driver");try {Class.forName("com.mysql.cj.jdbc.Driver");} catch (ClassNotFoundException e2) {// TODO Auto-generated catch blocke2.printStackTrace();}//3.获取连接Connection con = null;try {con = DriverManager.getConnection("jdbc:mysql://mysql.sqlpub.com:3306/huangjin","laocooon","fc12f7a5215e8e0a_");} catch (SQLException e1) {// TODO Auto-generated catch blocke1.printStackTrace();}//4.获取执行者对象Statement stat = null;try {stat = con.createStatement();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}//5.执行sql语句，并且接收结果String sql = "SELECT * FROM MonthlySorted";ResultSet rs = null;try {rs = stat.executeQuery(sql);} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}//6.处理结果String i1="",i2="",i3="";try {while(rs.next()) {i1+="'"+rs.getString(1)+"',";i2+="'"+rs.getString(2)+"',";i3+="'"+rs.getString(3)+"',";}} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}i1=i1.substring(0,i1.length()-1);//去掉最后一个逗号i2=i2.substring(0,i2.length()-1);//去掉最后一个逗号i3=i3.substring(0,i3.length()-1);//去掉最后一个逗号request.getSession().setAttribute("i1", i1);request.getSession().setAttribute("i2", i2);request.getSession().setAttribute("i3", i3);//7.释放资源try {con.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}try {stat.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}try {con.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}//PrintWriter out = response.getWriter(); //out.println(request.getSession().getAttribute("i1"));//out.println(request.getSession().getAttribute("i2"));//out.println(request.getSession().getAttribute("i3"));}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}
此页面作了两件事， 一就是通过<iframe src="./aaa" class="hidden"></iframe> 执行 aaa,获取数据，二是显示数据。
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%String i1=(String)session.getAttribute("i1");String i2=(String)session.getAttribute("i2");String i3=(String)session.getAttribute("i3");%> <!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>
<iframe src="./aaa" 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%>]}]};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>
