ecm后台react与jsp详解

ecm后台react与jsp详解

由于ecm后台是混合了jsp和react的页面，且jsp的页面是在java项目中的，而react的页面则是前后端完全分离的。所以要实现在react和jsp页面相互切换时对用户是透明的，就有很多模块需要相互打通融合。下面就来介绍一下jsp和react是如何打通融合的。

ecm后台jsp页面说明

jsp页面存放在java项目的目录中的，js/css/images 则存放在名为html的项目中

1、jsp目录结构为：项目名/项目名/src/main/webapp/jsp/模块名/页面.jsp

2、js文件存放html目录：html/behind/js/项目名/模块名/页面.js

3、后台页面css样式：html/behind/css/define.css

例如“注册会员管理页面”：

member/member/src/main/webapp/jsp/portal/regMember.jsp

html/behind/js/member/portal/regMember.js

jsp的结构如下：

<%@ include file="/jsp/base/base.jsp"%>
<%@ include file="/jsp/common/head.jsp"%>




<%@ include file="/jsp/base/jsBase.jsp"%>

ecm后台react页面说明

react的入口页面为index.html。打包后其目录结构为：/html/management/dist/home/index.html。其中，home为项目名称，home位置会根据不同项目变换。

在源码中，入口的html结构为： /supply/src/router/index.html, supply为项目名。代码结构如下：

1、头部引用公用的样式及插件

jsp_react_1.jpg

2、退出及缓存处理

jsp_react_2.jpg

3、入口页面（项目首页）的结构

jsp_react_3.jpg

4、react框架、ant及业务js的引入

jsp_react_4.jpg

jsp与react页面相互切换

登录及Home页加载菜单

ecm后台的登录页面为jsp页面，存放在ecp项目中，位置为：\ecm-security\usm\src\main\webapp\jsp\ucenter_login.jsp

登录后跳转的home页面为html页面，存放在html项目中，位置为：\html\management\dist\home\index.html,home的页面结构跟入口文件/supply/src/router/index.html 完全一致。其引入的topLeftmenu.js,会执行一些加载菜单的逻辑。

加载了topLeftmenu.js后，接着就会加载页面的头部菜单，代码如下：

jsp_react_5.jpg

头部菜单是请求接口得到的，得到菜单的后，会将菜单数据存放到本地缓存localstorage中

jsp_react_6.jpg

在点击头部菜单后，会根据菜单对应的系统去加载左侧菜单。并且左侧菜单同样也是请求接口得到的，并且也会放到本地缓存中

jsp_react_7.jpg

根据菜单加载不同框架（jsp/react）的页面

当点击左侧菜单时，会根据菜单的url来判断将要加载的页面是jsp页面还是react页面。jsp页面都挂在home/index.html下，而react页面则挂在自己的项目上，如supply/index.html,recom/index.html。根据这一特征，即可判断下一步要加载的是jsp页面还是react页面。

加载页面又分几种情况：react加载react，jsp加载jsp，jsp加载react，react加载jsp。不同的加载情况，会进行不同的加载处理。代码如下：

jsp_react_8.jpg

每种加载方式的具体操作和差异，则请看图片中指出的几个方法，这里就不再详解了。