需求：
1.从后台数据库，通过spark连接hadoop（大量数据）
2.然后通过将数据在后台（主要使用java）封装成前台需要的格式（一般是json格式），这一步中包含了service，DAO，spring配置以及使用，struts2的配置以及使用，如sql部分过于复杂还需要使用到Mybatis的配置和使用。当然还有业务逻辑方法的代码编写。
3.通过Ajax异步请求，将数据请求到前台。这一步，需要了解Javascript,html，Jsp
4.将数据在前台异步加载。
一、配置spring以及struts2文件（web.xml配置是前提）
web.xml中主要是配置spring以及struts2的路径
<context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:config/applicationContext-*.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> <init-param> <param-name>config</param-name> <param-value>struts-default.xml,struts-plugin.xml,/config/struts.xml</param-value> </init-param> </filter>
在spring配置文件中：
<bean id="leasingCompanyService" class="com.paic.elis.service.impl.LeasingCompanyServiceImpl" scope="prototype"> </bean> <bean id="ILeasingCompanyService" parent="baseTransactionProxy"> <property name="target" ref="leasingCompanyService" /> </bean> <bean id="leasingCompanyAction" class="com.paic.elis.action.LeasingCompanyAction" scope="prototype"> <property name="leasingCompanyService" ref="ILeasingCompanyService" /> </bean>将service和action进行关联起来。
在strut2配置文件中：
<action name ="leasingCompany" class= "com.paic.elis.action.LeasingCompanyAction">
<result name ="toTest">/lifeInsurance_fytc/jsp/index.jsp</result>
<result name ="toMainTarget">/lifeInsurance_fytc/jsp/bankSeries/mainTarget.jsp</result>
<result name ="toIncomCostProfitForecast">/lifeInsurance_fytc/jsp/bankSeries/incomCostProfitForecast.jsp</result>
</action>
对应的LeasingCompanyAction中：
// 主要指标展示页面
public String toMainTarget() throws Exception {
return "toMainTarget";
}
// 收入成本利润预测 页面
public String toIncomCostProfitForecast() throws Exception {
return "toIncomCostProfitForecast";
}
二、从后台获取数据过程。
这里使用service业务层的实现来进行业务处理，并没有使用mabatis，因为这里的查询语句比较少，只有一条，使用mabatis的话应该在mabaits配置文件，以及mapper配置文件中编写对应的配置信息。
<span style="font-size:18px;">public List<BankSeriesVO> getProfitCostInfo_Profit(String periodName)throws Exception {//这个periodName是从前台ajax请求过来的参数
String sql = "SELECT PERIOD_NAME as periodName,MEASURE_DESC as measureDesc,MEASURE_RATE as measureRate FROM JT_MAS_SAFE.EPA_ZL_VISUAL_DUBANG_ANALYSE WHERE PERIOD_NAME > cast(? - '10000' as bigint) AND PERIOD_NAME <= ? AND MEASURE_DESC = '生息资产收益率'";
String timeString=periodName+"01";
String params[]={timeString,timeString};
List<BankSeriesVO> ProfitCostList_Profit =new ArrayList<BankSeriesVO>();
try {
Connection conn = JdbcUtils_DBCP.getConnection();
ProfitCostList_Profit = JdbcUtils_DBCP.queryForObject(conn,sql, new BeanListHandler<BankSeriesVO>(BankSeriesVO.class),params);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return ProfitCostList_Profit;
}</span>
上面的代码仅仅是示例，因为在底层封装了数据库的连接。JdbcUtils_DBCP类是自己写的。
public class JdbcUtils_DBCP {
/**
* 在java中，编写数据库连接池需实现java.sql.DataSource接口，每一种数据库连接池都是DataSource接口的实现
* DBCP连接池就是java.sql.DataSource接口的一个具体实现
*/
private static DataSource ds = null;
//在静态代码块中创建数据库连接池
static{
try{
//加载dbcpconfig.properties配置文件
InputStream in = JdbcUtils_DBCP.class.getClassLoader().getResourceAsStream("dbcpconfig.properties");
Properties prop = new Properties();
prop.load(in);
//创建数据源
ds = BasicDataSourceFactory.createDataSource(prop);
}catch (Exception e) {
System.out.println("----spark连接-----"+e);
throw new ExceptionInInitializerError(e);
}
}
/**
* @Method: getConnection
* @Description: 从数据源中获取数据库连接
* @return Connection
* @throws SQLException
*/
public static Connection getConnection() throws Exception{
//从数据源中获取数据库连接
return ds.getConnection();
}
从service实现类中返回的ProfitCostList_Profit 这个list，在下面的Action中进行接收并把获得数据进行封装。
public String getProfitCostInfo() throws Exception {
List<BankSeriesVO> ProfitCostList_Profit = leasingCompanyService
.getProfitCostInfo_Profit(periodName);//这个语句就是将从前台ajax获取的参数periodName传递到service实现类中
StringBuffer resultBuffer = new StringBuffer();
// 收益成本
if (!ListUtil.isEmpty(ProfitCostList_Profit)) {
StringBuffer profitBuffer = new StringBuffer();
BankSeriesVO vo;
profitBuffer.append("[");
for (int i = 0; i < ProfitCostList_Profit.size(); i++) {
vo = ProfitCostList_Profit.get(i);
profitBuffer.append(vo.getMeasureRate() + ",");
}
profitBuffer.append("]");
profitBuffer = profitBuffer.deleteCharAt(profitBuffer
.lastIndexOf(","));
resultBuffer.append("[" + profitBuffer.toString() + ",");
}
result = resultBuffer.toString().replaceAll("%", "");
return "result";
}
三、前台接收数据（ajax）
这个代码的编写主要在js中完成。包含请求的主要代码如下所示：
function getinfo(){
$.ajax({
type : "post",
url : "/bieb/leasingCompany!getProfitCostInfo.do?periodName="+paramTime,//前台向后台struts2的Action方法请求数据，传递的参数为periodName
dataType : "json",
success : function(result) {
//var list = $.parseJSON(result).list;
var array=eval(result);
//debugger;
//console.log(result);
if(result){
fillcanvas(array); //第1个图
tableData(array);
}
}
});
} ;
参数periodName这里是从日历控件上的点击事件获取的时间，用作后台进行从数据库中查询符合这个日期的相关数据，并返回到前台中来。
当然这个参数有3个点要注意：
1.在js文件中要声明，而且是全局变量。
2.在后台的Action中要声明，全局变量（方便其他action方法也可以使用），而且要有set和get方法。
3.前台穿的参数名字和后台声明要传的变量名要保持一致。
url : "/bieb/leasingCompany!getProfitCostInfo.do?periodName="+paramTime即就是，这里的periodName 与后台的一直。 变量名paramTime随便命名，这个只是存在于js的全局变量中。
四、jsp的渲染
这一部分，主要就是html和css的结合使用，并配好jstl库，上下文路径，并引入相关css，javacript脚本。示例如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<input type="hidden" id="contextPath" value="<%=path%>" />
<%@include file="../../../jstl.jsp" %>
<!-- 获取当前根路径 -->
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>银行系列-收益率及成本率</title>
<link href="${ctx}/lifeInsurance_fytc/css/style.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/lifeInsurance_fytc/css/width-1920.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1800px)">
<style type="text/css">
body{overflow:hidden;}
/*临时贴图*/
</style>
<script>
</script>
</head>
<!--银行系列-收益率及成本-->
<body class="bank-syljcb">
<div id="main">
<div class="contWarp">
<h1>收益率及成本率</h1>
<!-- <div class="calendar calendar-YY">
<div class="calendar-head">
<input type="text" class="calendar-input" readonly value=""/>
</div>
<div class="calendar-box" style="display:none;">
<ul class="calendar-yy-ul clearfix"></ul>
</div>
</div>calendar end -->
<div class="calendar calendar-YM">
<div class="calendar-head">
<input type="text" class="calendar-input" readonly value=""/>
</div>
<div class="calendar-box" style="display:none;">
<div class="calendar-box-h">
<input type="text" class="calendar-box-input" id="calendar-yy" readonly value="2015年" />
<span class="calendar-prev"><i></i></span>
<span class="calendar-next"><i></i></span>
<div class="calendar-yys" style="display:none;">
<a class="calendar-yys-up"></a>
<ul class="calendar-yys-ul clearfix">
</ul>
<a class="calendar-yys-down"></a>
</div>
</div>
<div class="calendar-mm">
<ul class="clearfix">
<li class="calendar-mm-li">1月</li>
<li class="calendar-mm-li">2月</li>
<li class="calendar-mm-li">3月</li>
<li class="calendar-mm-li">4月</li>
<li class="calendar-mm-li">5月</li>
<li class="calendar-mm-li">6月</li>
<li class="calendar-mm-li">7月</li>
<li class="calendar-mm-li">8月</li>
<li class="calendar-mm-li">9月</li>
<li class="calendar-mm-li">10月</li>
<li class="calendar-mm-li">11月</li>
<li class="calendar-mm-li">12月</li>
</ul>
</div>
</div>
</div><!--calendar end-->
<div class="cavas" id="canvas" style="">
</div><!--.cavas end-->
<div class="table">
<!--表格及分析说明-->
<table class="table-sep">
<tr>
<th></th><th>15年1月</th><th>15年2月</th><th>15年3 月</th><th>15年4 月</th><th>15年5 月</th><th>15年6 月</th><th>15年7 月</th><th>15年8 月</th><th>15年9 月</th><th>15年10 月</th><th>15年11 月</th><th>15年12 月</th>
</tr>
<tr><td class="txt_l">生息资产收益率%</td><td>1.03%</td><td>0.38%</td><td>0.52%</td><td>90%</td><td>90%</td><td>90%</td><td>90%</td><td>90%</td><td>90%</td><td>90%</td><td>90%</td><td>90%</td></tr>
<tr><td class="txt_l">计息负债成本率%</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td></tr>
<tr><td class="txt_l">息差%</td><td>2%</td><td>2%</td><td>2%</td><td>2%</td><td>2%</td><td>2%</td><td>2%</td><td>2%</td><td>2%</td><td>2%</td><td>2%</td><td>2%</td></tr>
</table>
</div><!--.table end-->
</div><!--#main end-->
<script src="${ctx}/lifeInsurance_fytc/plug/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="${ctx}/lifeInsurance_fytc/plug/echarts-all.js" type="text/javascript"></script>
<script src="${ctx}/lifeInsurance_fytc/js/common.js" type="text/javascript"></script>
<script src="${ctx}/lifeInsurance_fytc/js/public.js" type="text/javascript"></script>
<script src="${ctx}/lifeInsurance_fytc/js/bankSeries/profitCost.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</body>
</html>
五、打开Tomcat,部署项目，测试。
效果图：
