前端页面功能模块化拆分
当一个系统的功能很多时，不可能所有功能模块的页面都写在一个页面里面，这时就需要将不同功能模块的页面拆分出去，就像模板一样，需要哪块的功能就调用哪块的页面，然后加载相应数据并展示到相应的页面。
本应用的使用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实现前端页面功能模块化拆分的方案 #### 概述 本文档详细介绍了如何使用jsp、struts、spring、mybatis等技术实现前端页面的功能模块化拆分。当一个系统拥有大量的功能模块时，将...
在构建大型Web应用程序时，前端页面功能模块化拆分是必不可少的设计原则，它有助于提高代码的可维护性、可复用性和开发效率。本方案主要探讨如何利用jsp、struts、spring、mybatis这四款经典的技术框架实现前端页面...
SSM框架，全称为Spring、Struts和MyBatis的集成框架，是Java Web开发中常用的三大组件。这个"Spring SSM最全框架 下载即用 超多注释"的压缩包提供了完整的SSM集成环境，适用于快速构建基于Web的应用程序。以下是关于...
3. 模块化：Spring框架可按需选择，如Spring MVC、Spring Data、Spring Security等。 4. 数据访问：提供统一的数据访问接口，支持JDBC、ORM框架（如Hibernate、MyBatis）等。 5. 集成友好：Spring与其他Java框架如...
综上所述，Struts 2.2.3是一个强大的Web开发框架，它提供了一系列工具和机制，帮助开发者构建高效、模块化和易于维护的Java Web应用程序。不过，由于版本较旧，可能存在一些已知的安全漏洞，因此在实际项目中，推荐...
6. **框架**：JavaWeb开发中有许多流行框架，如Spring Framework（包含Spring MVC、Spring Boot、Spring Data等）、Struts、Hibernate和MyBatis等。这些框架提供了便利的功能，如依赖注入、事务管理、数据访问抽象，...
根据这个文件名，我们可以推测它可能是一个包含在“java-web实例应用”项目中的一个具体的实现，例如，它可能是一个具体的月份（12月）中的第25个功能模块或者是一个具体的数据文件。在实际的项目中，文件命名通常会...
- **面向切面编程**：利用AOP实现日志记录、事务管理等功能。 - **声明式事务管理**：简化事务管理的配置和使用。 #### SpringMVC框架 - **请求处理**：使用@Controller注解定义控制器类，@RequestMapping注解映射...
- **模块化设计**：将复杂系统拆分为多个独立的服务，如挂号、处方、病历等，降低耦合度，提高可扩展性。 - **服务发现**：如Netflix Eureka，帮助服务之间互相找到彼此，实现服务间的通信。 7. **监控与日志** ...