我这个人是个死脑筋,说实话,因为一项技术,耽误了我很长时间,甚至停止了学习!!!!算了,不说了,还是决定一步一步来!!!
今天要讲的内容是,实现数据库连接后,将数据由struts2到jsp页面实现echarts和后台交换的过程。
第一步:建立数据库连接这些,咱就略了直接开始,数据库映射类和dao类实现。
1.Score类:
package bean;
public class Score {
private String student; private String chinses; private String math; private String art; /** * @return the student */ public String getStudent() { return student; } /** * @param student the student to set */ public void setStudent(String student) { this.student = student; } /** * @return the chinses */ public String getChinses() { return chinses; } /** * @param chinses the chinses to set */ public void setChinses(String chinses) { this.chinses = chinses; } /** * @return the math */ public String getMath() { return math; } /** * @param math the math to set */ public void setMath(String math) { this.math = math; } /** * @return the art */ public String getArt() { return art; } /** * @param art the art to set */ public void setArt(String art) { this.art = art; }}
2.ScoreDao类:
//计算各科平均成绩,然后放到list中
public class ScoreDao {
Connection connection = ConnectDB.getConnectDB();
List<Score> list = new ArrayList<Score>();public List<Score> getAverageScoreList(){
//将所有的成绩列出来的查询,查询数学计算平均分、语文、艺术的平均成绩 String sql = "select avg(math) math,avg(chinese) chinese,avg(art) art from score;"; try { PreparedStatement statement = connection.prepareStatement(sql); ResultSet set = statement.executeQuery(); while (set.next()) { Score score = new Score(); String chinese = set.getString("chinese"); String math = set.getString("math"); String art = set.getString("art"); score.setMath(math); score.setArt(art); score.setChinses(chinese); list.add(score); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return list; }}
第二步:写struts2类EChartsAction和配置文件:
1.EChartsAction类:
package action;
import java.util.List;
import bean.Score;
import com.opensymphony.xwork2.ActionSupport;
import dao.ScoreDao;
public class EChartsAction extends ActionSupport{
/** * */ private static final long serialVersionUID = 1L; private String chinese; private String art; private String math; //dao类进行数据库操作,将数据存储于Score类,在这里则调用 //1.获取平均分数,实现 ScoreDao dao = new ScoreDao(); /** * @return the math */ public String getMath() { return math; }/**
* @param math the math to set */ public void setMath(String math) { this.math = math; }/**
* @return the art */ public String getArt() { return art; }/**
* @param art the art to set */ public void setArt(String art) { this.art = art; }/**
* @return the chinese */ public String getChinese() { return chinese; }/**
* @param chinese the chinese to set */ public void setChinese(String chinese) { this.chinese = chinese; }//查询平均分
@SuppressWarnings("unused") public String select(){ List<Score> scores = dao.getAverageScoreList(); for (int i = 0; i < scores.size(); i++) { //方法1 Score score = scores.get(i); setChinese( score.getChinses()); setArt(score.getArt()); setMath(score.getMath()); } if (scores!=null) { return "avg"; }else { return "err"; } } @Override public String execute() throws Exception { // TODO Auto-generated method stub return select(); }}
2.配置文件struts.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="webface" extends="struts-default"> <!-- 查询数据库study,计算平均分,然后传到jsp --> <action name="ajax" class="action.EChartsAction"> <result name="avg">/echarts/tiaoxing.jsp</result> <result name="err">/echarts/err.jsp</result> </action> </package> </struts>
第三步:在jsp页面实现echarts以及实现交互:
1.建立页面tiaoxing.jsp:
<%@ 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>echarts前后台数据</title><script src="./echarts.js"></script><script src="../jquery.min.js"></script></head><body>通过数组对数据进行加载。。。。。(后续的应该使用ajax与java实现后台数据加载)
<div id="main" style="width: 800px;height: 500px;">您的浏览器不支持,请更换</div>
<script type="text/javascript">//初始化echartsvar myecharts = echarts.init(document.getElementById('main'));//画柱状图var xdata=new Array();var ydata=new Array(<%=request.getAttribute("chinese")%>,<%=request.getAttribute("math")%>,<%=request.getAttribute("art")%>);xdata[0]="语文";xdata[1]="数学";xdata[2]="艺术";var option ={ title:{ text:'echarts入门', link:'http://www.baidu.com',//主标题超链接 target:'blank',//主标题超链接打开方式 textStyle:{ //设置主标题风格 Color:'green',//设置主标题字体颜色 fontStyle:'',//主标题文字风格 }, subtext:'副标题', sublink:'http://www.baidu.com',//副标题超链接 subtarget:'blank',//副标题超链接打开方式 padding:[5,10,5,5],//设置标题内边距,上,右,下,左 itemGap:10,//主副标题之间的间距/*left:'left',//组件的位置,center,left,right
top:'top',//组件离上边的距离middle,top,bottom*/ //此二者的优先级高于x吗?答案:是 x:'center', backgroundColor:'white',//标题背景色 borderColor:'gray',//标题边框颜色 borderWidth:5,//标签线框 borderRadius:5,//边框切圆角 shadowBlur:10,//图形阴影模糊大小,该属性配合 shadowColor,shadowOffsetX(阴影水平方向上的偏移距离), shadowOffsetY(阴影垂直方向上的偏移距离。) 一起设置图形的阴影效果。 shadowColor:'rgba(0,0,0,0.5)'//阴影颜色 }, tooltip:{}, legend:{//图例组件 type:'',//默认情况下,'plain':普通图例。缺省就是普通图例。'scroll':可滚动翻页的图例。当图例数量较多时可以使用。 data:'班级平均成绩'// }, xAxis:{ data:xdata }, yAxis:{}, series:[{ name:'班级平均成绩', type:'bar', data:ydata }]};myecharts.setOption(option);</script>
<form action="ajax">
<input type="submit" value="获取数据"></form>${math}</body></html>2.建立页面err.jsp
写入一个提示就行。
总结:原理就是利用javabean接收来自数据库的数据(映射类),然后dao类将数据查询出来放到映射类,最后action(将映射类的值存入struts2类的set方法)存,而jsp在使用的时候,实际上是取struts2的action类get方法返回的值。由于js代码是直接写在jsp中,所以可以使用<%%>来取值放入js中。
额,感觉我自己都描述晕了。意思就是:
mysql->dao->javabean->dao->struts2->jsp->js
关键:
其实关键就是struts2将值传到jsp,然后jsp到js过程。
set和get方法,使得jsp页面可以通过request.getAttribute("math")方法获得对应的值。
然后在jsp页面中,js就可以直接使用。
效果:
1.访问页面tiaoxing.jsp效果:
2.点击获取数据或者直接访问ajax:
关于图2,为啥直接访问ajax也能获取到数据,是因为当访问ajax时,获取了数据,然后就显示了。而访问tiaoxing.jsp是因为没有请求数据的这个过程,数据就无法获取。我的理解就是,一个直接跑去喝水,而另一个则是要由人拿来才喝。