新一代基於大資料的管理資訊系統（MIS）報表需求開發

阿新 • • 發佈：2019-02-11

需求：

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,部署專案，測試。

效果圖：

新一代基於大資料的管理資訊系統（MIS）報表需求開發

新一代基於大資料的管理資訊系統（MIS）報表需求開發

[大資料專案]-0011-基於大資料技術推薦系統演算法案例實戰視訊教

大資料入門學習筆記（叄）- 布式檔案系統HDFS

大資料DMP畫像系統（轉載簡介-龍果學院）

基於OpenLayers實戰地理資訊系統（離線地圖，通過基站轉經緯度，Quartz深入，軌跡實戰）

管理信息系統（MIS）權威期刊列表

大資料基礎之Quartz（1）簡介、原始碼解析

大資料基礎之Kafka（1）簡介、安裝及使用

大資料基礎之Spark（1）Spark Submit即Spark任務提交過程

大資料Hadoop學習筆記（三）

大資料Hadoop學習筆記（二）

大資料Hadoop學習筆記（一）

大資料Hadoop學習筆記（五）

大資料Hadoop學習筆記（四）

大資料Hadoop學習筆記（六）

大資料入門學習筆記（貳）- 初識Hadoop

大資料入門學習筆記（壹） - 大資料概述

Java和大資料的結合學習（1）

大資料晉級之路（7）Storm安裝及使用

大資料晉級之路（5）Hadoop，Spark，Storm綜合比較

新一代基於大資料的管理資訊系統（MIS）報表需求開發

相關推薦