jsp、struts、spring、mybatis实现前端页面功能模块化拆分

                                        前端页面功能模块化拆分

当一个系统的功能很多时，不可能所有功能模块的页面都写在一个页面里面，这时就需要将不同功能模块的页面拆分出去，就像模板一样，需要哪块的功能就调用哪块的页面，然后加载相应数据并展示到相应的页面。

本应用的使用spring+struts+mybatis+jsp的方式，用两种方案来完成前端页面功能的拆分。

方案一：

在JSP页面中，利用EL表达式或者java代码的方式，在后台完成页面数据的填充。然后在js中来完成页面的切换。

jsp代码：

业务详情模块页面：riskDetailItem.jsp页面代码使用EL表达式完成数据填充。

 

<div class="col-12 b-b">
	<table class="table table-form" style="font-size: 14px;">
	   <tr>
	    	<td class="m_c" width="180px">客户名称 </td><td width="200px">${loanRiskBean.cusName}</td>
	    	<td class="m_l" width="180px">贷款金额 </td><td>${loanRiskBean.dueBillAmount} 元</td>
	    </tr>
	 </table>
</div>

 struts的xml文件代码：

 

 

<action name="riskDetailItem" class="riskRecheckAction" method="detailItem"> 
    <result name="success">/WEB-INF/jsp/riskrecheck/riskDetailItem.jsp</result>
</action>

 Action中的代码：

 

 

private LoanRiskBean loanRiskBean;
public String detailItem(){
		try{
			loanRiskBean = riskRecheckServiceImpl.detailItem(riskId);--调用service中的方法查询数据
		}catch(Exception e){
			e.printStackTrace();
			LoggerUtil.info("查看详情出现异常！------detailItem()");
			throw new RuntimeException("查看详情出现异常！");
		}
		return SUCCESS;
	}

public void setLoanRiskBean(LoanRiskBean loanRiskBean) {
		this.loanRiskBean = loanRiskBean;
	}

 js中的代码：

 

 

$(document).on('click','.related',function(){
        	var loanid = $(this).attr("loanid");
        	var urlSwitch = "/hbpost/riskRecheck/riskRelatedItemSwitch.action";
        	var url = "/hbpost/riskRecheck/riskRelatedItem.action?time="+new Date()+"&loanid=" + loanid;
        	//声明详情查询方法
        	var relatedInfo = function(){
        		$.ajax({
        		url:url,
        		type:'get',
        		dataType:'json',
        		success:function(data){
		
            	}
        	})
        }
        	//请求加载相关组成员信息页面，并展示在dialog中
        	$.ajax({
        		url:urlSwitch,        
        		type:"get",
        		success:function(data){
        			relatedInfo();//调用详情查询方法
        			relatedDialog=$dialog({
        				id:'relatedDialog',
            			width:1000,
            			title:"相关信息",
            			cancelValue:'关闭',
            			content:data,
            			onshow:function(){
            				$(".artui-dialog").css("max-height","450px");
            				$(".artui-dialog").css("min-height","300px");
            				$(".artui-popup").css("left","330px");
            				$(".artui-popup").css("top","130px");
            			}
            		}).showModal();
        		}
        	})
      })

 第二种方案：

 

在相应功能模块的JSP页面中，只是静态代码，需要在js中进行数据的填充，但是因为相应的jsp功能模块页面还没有加载(尽管可以在功能模块jsp页面引入相应的js，或者利用sea.js来加载js文件，但是本质是html或者jsp页面加载时才会加载相应的js文件)，所以不能在js中领用jquery来获取页面的dom元素。这时，就需要先加载jsp页面，例如可以在struts处进行一个页面的跳转，而不需要向后台发起请求。也就是说需要向后台发起两次请求，第一次请求是加载相应的功能模块页面，第二次请求是向后台请求数据，然后填充到第一次请求的页面中，并展示出来。

jsp代码：都是静态代码

 

<div class="relatedInfo mainBusiness" style="overflow:auto;width:100%;*+width:1000px;">
	<div style="width:1300px;padding-left:20px;padding-right:20px;">
		<h5>经营名称不一致</h5>
                <table class="grid table table-striped addtable">
                 	<thead>
                   		<tr>
	                   		<th style="width:35px;">客户名称</th>	                       	
	                       	        <th style="width:40px;">借据金额</th>	                       
                   		</tr>
                  	</thead>
                  	<tbody>
			</tbody>
              </table>
      </div>
</div> 

struts中的xml文件：

<action name="riskRelatedItem" class="riskRecheckAction" method="relatedItem">
   </action>
<!-- 跳转到相关组页面 -->
<action name="riskRelatedItemSwitch" class="riskRecheckAction" method="relatedItemSwitch">
     <result name="success">/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result>
</action>
或者是：
<!-- 跳转到相关组页面 -->不用再Action处写相应的方法，struts就负责了跳转。
<action name="riskRelatedItemSwitch" class="riskRecheckAction">
     <result>/WEB-INF/jsp/riskrecheck/riskRelatedItem.jsp</result>
</action>

  Action中的代码：

	/**
	 * 根据loanid查询相关组成员信息
	 */
	public void relatedItem(){
		List<LoanRiskBean> tmpRelatedList = null;
		try {
			tmpRelatedList = riskRecheckServiceImpl.relatedItem(loanid);
			this.outputStreamModelAndView(tmpRelatedList);
		} catch (Exception e) {
			e.printStackTrace();
			LoggerUtil.info("查看相关组成员信息出现异常！-----relatedItem()");
			throw new RuntimeException("查看相关组成员信息出现异常！");
		}
	}
	/**
	 * 跳转到相关成员组页面
	 * @return
	 */
	public String relatedItemSwitch(){
		return SUCCESS;
	}

 js中的代码：

/**
	 * 贷后专项检查录入信息展示--客户信息【相关】组展示
	 */
        $(document).on('click','.related',function(){
        	var loanid = $(this).attr("loanid");
        	var urlSwitch = "/hbpost/riskRecheck/riskRelatedItemSwitch.action";
        	var url = "/hbpost/riskRecheck/riskRelatedItem.action?time="+new Date()+"&loanid=" + loanid;
        	//查询相关成员组信息，并循环判断append到页面
        	var relatedInfo = function(){
        		$.ajax({
        		url:url,
        		type:'get',
        		dataType:'json',
        		success:function(data){
        			var tmpArray = data.object,,tipStr;
            		for(var i = tmpArray.length-1; i >= 0; i--){
            			tipStr = tmpArray[i].tipstr;            			       			
            			if(tipStr == "住址相同"){
            				$(".sameAddress tbody").append("<tr><td>"+tmpArray[i].cusName+"</td><td>"
            						+tmpArray[i].duebillNo+"</td></tr>");
            				$(".sameAddress").css("display","block");
            				continue;
            			}
            		}
        		}
        	})
        }
        	//请求加载相关组成员信息页面，并展示在dialog中
        	$.ajax({
        		url:urlSwitch,        
        		type:"get",
        		success:function(data){
        			relatedInfo();
        			relatedDialog=$dialog({
        				id:'relatedDialog',
            			width:1000,
            			title:"相关信息",
            			cancelValue:'关闭',
            			content:data,
            			onshow:function(){
            				$(".artui-dialog").css("max-height","450px");
            				$(".artui-dialog").css("min-height","300px");
            				$(".artui-popup").css("left","330px");
            				$(".artui-popup").css("top","130px");
            			}
            		}).showModal();
        		}
        	})
      })

 

评论

1 楼 小芳哥子 2017-01-03