前端页面功能模块化拆分
当一个系统的功能很多时，不可能所有功能模块的页面都写在一个页面里面，这时就需要将不同功能模块的页面拆分出去，就像模板一样，需要哪块的功能就调用哪块的页面，然后加载相应数据并展示到相应的页面。
本应用的使用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();
}
})
})
以上所述是小编给大家介绍的jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
SpringBoot引用阿里easyexcel，Excel导出返回浏览器下载
HashMap、Hashtable、ConcurrentHashMap三者间的异同
解决RecycleView 中Item包含Edittext时，滑动view复用导致数据错乱的问题
多线程、同步工作原理、死锁案例、Lock接口、线程的生命周期的讲解及实现
网友评论