ecm后臺(tái)react與jsp詳解

由于ecm后臺(tái)是混合了jsp和react的頁(yè)面，且jsp的頁(yè)面是在java項(xiàng)目中的，而react的頁(yè)面則是前后端完全分離的。所以要實(shí)現(xiàn)在react和jsp頁(yè)面相互切換時(shí)對(duì)用戶是透明的，就有很多模塊需要相互打通融合。下面就來(lái)介紹一下jsp和react是如何打通融合的。

ecm后臺(tái)jsp頁(yè)面說(shuō)明

jsp頁(yè)面存放在java項(xiàng)目的目錄中的，js/css/images 則存放在名為html的項(xiàng)目中

1、jsp目錄結(jié)構(gòu)為：項(xiàng)目名/項(xiàng)目名/src/main/webapp/jsp/模塊名/頁(yè)面.jsp

2、js文件存放html目錄：html/behind/js/項(xiàng)目名/模塊名/頁(yè)面.js

3、后臺(tái)頁(yè)面css樣式：html/behind/css/define.css

例如“注冊(cè)會(huì)員管理頁(yè)面”：

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

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

jsp的結(jié)構(gòu)如下：

<!-- 文件頭部添加公用css、全局變量等 -->
<%@ include file="/jsp/base/base.jsp"%>
<%@ include file="/jsp/common/head.jsp"%>

<!-- 頁(yè)面內(nèi)容 -->

<!-- 文件底部添加公用js模塊 -->
<%@ include file="/jsp/base/jsBase.jsp"%>

<!-- 頁(yè)面內(nèi)部js文件，放在公用js模塊之后 -->

ecm后臺(tái)react頁(yè)面說(shuō)明

react的入口頁(yè)面為index.html。打包后其目錄結(jié)構(gòu)為：/html/management/dist/home/index.html。其中，home為項(xiàng)目名稱，home位置會(huì)根據(jù)不同項(xiàng)目變換。

在源碼中，入口的html結(jié)構(gòu)為： /supply/src/router/index.html, supply為項(xiàng)目名。代碼結(jié)構(gòu)如下：

1、頭部引用公用的樣式及插件

jsp_react_1.jpg

2、退出及緩存處理

jsp_react_2.jpg

3、入口頁(yè)面（項(xiàng)目首頁(yè)）的結(jié)構(gòu)

jsp_react_3.jpg

4、react框架、ant及業(yè)務(wù)js的引入

jsp_react_4.jpg

jsp與react頁(yè)面相互切換

登錄及Home頁(yè)加載菜單

ecm后臺(tái)的登錄頁(yè)面為jsp頁(yè)面，存放在ecp項(xiàng)目中，位置為：\ecm-security\usm\src\main\webapp\jsp\ucenter_login.jsp

登錄后跳轉(zhuǎn)的home頁(yè)面為html頁(yè)面，存放在html項(xiàng)目中，位置為：\html\management\dist\home\index.html,home的頁(yè)面結(jié)構(gòu)跟入口文件/supply/src/router/index.html 完全一致。其引入的topLeftmenu.js,會(huì)執(zhí)行一些加載菜單的邏輯。

加載了topLeftmenu.js后，接著就會(huì)加載頁(yè)面的頭部菜單，代碼如下：

jsp_react_5.jpg

頭部菜單是請(qǐng)求接口得到的，得到菜單的后，會(huì)將菜單數(shù)據(jù)存放到本地緩存localstorage中

jsp_react_6.jpg

在點(diǎn)擊頭部菜單后，會(huì)根據(jù)菜單對(duì)應(yīng)的系統(tǒng)去加載左側(cè)菜單。并且左側(cè)菜單同樣也是請(qǐng)求接口得到的，并且也會(huì)放到本地緩存中

jsp_react_7.jpg

根據(jù)菜單加載不同框架（jsp/react）的頁(yè)面

當(dāng)點(diǎn)擊左側(cè)菜單時(shí)，會(huì)根據(jù)菜單的url來(lái)判斷將要加載的頁(yè)面是jsp頁(yè)面還是react頁(yè)面。jsp頁(yè)面都掛在home/index.html下，而react頁(yè)面則掛在自己的項(xiàng)目上，如supply/index.html,recom/index.html。根據(jù)這一特征，即可判斷下一步要加載的是jsp頁(yè)面還是react頁(yè)面。

加載頁(yè)面又分幾種情況：react加載react，jsp加載jsp，jsp加載react，react加載jsp。不同的加載情況，會(huì)進(jìn)行不同的加載處理。代碼如下：

jsp_react_8.jpg

每種加載方式的具體操作和差異，則請(qǐng)看圖片中指出的幾個(gè)方法，這里就不再詳解了。