技术分享|网络安全|echarts+jquery+ajax+struts2实现数据库数据加载|虚拟机备份专家云祺科技

关于我们

技术分享

技术分享 echarts+jquery+ajax+struts2实现数据库数据加载

echarts+jquery+ajax+struts2实现数据库数据加载

2021-06-08

我这个人是个死脑筋，说实话，因为一项技术，耽误了我很长时间，甚至停止了学习！！！！算了，不说了，还是决定一步一步来！！！

今天要讲的内容是，实现数据库连接后，将数据由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">

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

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效果:

echarts+jquery+ajax+struts2实现数据库数据加载