echarts+jquery+ajax+struts2实现数据库数据加载
我这个人是个死脑筋，说实话，因为一项技术，耽误了我很长时间，甚至停止了学习！！！！算了，不说了，还是决定一步一步来！！！
今天要讲的内容是，实现数据库连接后，将数据由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">
//初始化echarts
var 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是因为没有请求数据的这个过程，数据就无法获取。我的理解就是，一个直接跑去喝水，而另一个则是要由人拿来才喝。
