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的结构如下：
<!-- 文件头部添加公用css、全局变量等 -->
<%@ include file="/jsp/base/base.jsp"%>
<%@ include file="/jsp/common/head.jsp"%>
<!-- 页面内容 -->
<!-- 文件底部添加公用js模块 -->
<%@ include file="/jsp/base/jsBase.jsp"%>
<!-- 页面内部js文件，放在公用js模块之后 -->
ecm后台react页面说明
react的入口页面为index.html。打包后其目录结构为：/html/management/dist/home/index.html。其中，home为项目名称，home位置会根据不同项目变换。
在源码中，入口的html结构为： /supply/src/router/index.html, supply为项目名。代码结构如下：
1、头部引用公用的样式及插件
2、退出及缓存处理
3、入口页面（项目首页）的结构
4、react框架、ant及业务js的引入
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后，接着就会加载页面的头部菜单，代码如下：
头部菜单是请求接口得到的，得到菜单的后，会将菜单数据存放到本地缓存localstorage中
在点击头部菜单后，会根据菜单对应的系统去加载左侧菜单。并且左侧菜单同样也是请求接口得到的，并且也会放到本地缓存中
根据菜单加载不同框架（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。不同的加载情况，会进行不同的加载处理。代码如下：
每种加载方式的具体操作和差异，则请看图片中指出的几个方法，这里就不再详解了。
