Модульное расщепление функций страниц фронта
Когда система имеет много функций, невозможно, чтобы все страницы функциональных модулей были записаны на одной странице. В это время страницы разных функциональных модулей должны быть разделены, как шаблон. Страницы, по которой необходима функция, будут вызваны, а затем соответствующие данные будут загружены и отображаются на соответствующей странице.
Это приложение использует Spring+Struts+Mybatis+JSP, чтобы завершить разделение функций передней части страниц с использованием двух решений.
План 1:
На страницах JSP данные страницы заполняются в фоновом режиме с использованием EL Expressions или Java Code. Затем заполните переключение страницы в JS.
код JSP:
Страница модуля бизнеса: RiskDetailItem.jsp Код страницы использует EL Expressions для завершения заполнения данных.
<div> <table style = "font-size: 14px;"> <tr> <td> Имя клиента </td> <td> $ {Loanriskbean.cusname} </td> <td> Сумма кредита </td> <td> $ {Loanriskbean.duebillamount} yuan </td> </trebillamount} yuan </td> </trd> </trebillamount} yuan </td> </trebillamount} yuan </td> </trebillamount} yuan </td> </tr.Код файла XML на стойки:
Этический фильм http://www.dotdy.com/
<name Action = "RiskDetailItem" method = "detailItem"> <name name = "успех">/web-inf/jsp/rischrecheck/rischdetailitem.jsp </result> </action>
Код в действии:
частное кредитование Loanriskbean; public String detailItem () {try {loineriskbean = RiskRecheckServiceImpl.detailItem (RiskId);-вызовите метод в службу, чтобы запросить данные} catch (Exception e) {e.printStackTrace (); Loggerutil.info ("Исключение произошло в деталях вида! ------ detailItem ()"); Бросьте новое Runtimeexception («Исключение произошло в виде подробностей!»); } вернуть успех; } public void setloanriskbean (Loanriskbean Loanriskbean) {this.loanriskbean = Loanriskbean; } Код в JS:
$ (document) .on ('click', '. insulity', function () {var loan = $ (this) .Attr ("loanD"); var urllingitch = "/hbpost/riskRecheck/riskRelatedItemswitch.action"; var url = "/hbpost/riskRecheck/riskrelateditem.action?time?time?time?time joptiDEID; // Объявите метод запроса сведений var insieldInfo = function () {$ .ajax ({url: url, type: 'get', dataType: 'json', успех: функция (data) {}})} // Запрос на загрузку соответствующей страницы участника группы и отображение ее в диалоге $ .ajax (url: url indentInfo (); // Вызовите метод запроса сведений, связанный с Dialog = $ dialog ({id: 'insulitydialog', ширина: 1000, название: «Связанная информация», CancelValue: «Close», Контент: Данные, Onshow: function () {$ («. Arui-Dialog»). CSS ("max-height", "450px"); $ (". Arui-Dialog"). Второе решение:
На странице JSP соответствующего функционального модуля это только статический код и требует заполнения данных в JS. Однако, поскольку соответствующая страница функционального модуля JSP еще не была загружена (хотя вы можете ввести соответствующий JS на странице функционального модуля JS или использовать SEA.JS для загрузки файла JS, но сущность заключается в том, что соответствующий файл JS будет загружен только при загрузке HTML или JS -страницы), вы не можете использовать JQuery в JS для получения элементов DOM на странице. В настоящее время вам нужно сначала загрузить страницу JSP. Например, вы можете прыгнуть на страницу на стойках, не делая запроса на фоновой речь. То есть два запроса должны быть инициированы на задний план. Первый запрос состоит в том, чтобы загрузить соответствующую страницу функционального модуля, а второй запрос - запросить данные из фона, а затем заполнить их на страницу первого запроса и отобразить его.
код JSP: весь статический код
<div style="overflow:auto;width:100%;*+width:1000px;"> <div> <h5>Inconsistent business name</h5> <table> <thead> <tr> <th>Customer name</th> <th>IOUT NOTICE Amount</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div>
XML -файл в стойках:
<name Action = "RiskRelatedItem" method = "insulityItem"> </action> <!-Method Method = "Method =" insulityTemSwitch "> <name =" успех ">/web-inf/jsp/riskRecheck/riskErelatedItem.jsp </result> </ocempt>
Или:
<!-Прыжок на соответствующую группу-> Не нужно писать соответствующий метод в действии, стойки несут ответственность за прыжок. <name = "RiskRelatedItemsWitch"> <Sluest> /web-inf/jsp/riskRecheck/riskRelatedItem.jsp </result> </action>
Код в действии:
/ *** Запрос соответствующей информации о членах группы на основе кредита*/ public void insulityItem () {list <detriskbean> tmprelatedList = null; try {tmPrelatedList = RiskRecheckServiceImpl.ReLatedItem (LoanID); this.outputStreamModelandView (tmPrelatedList); } catch (Exception e) {e.printstackTrace (); Loggerutil.info ("Исключение произошло при просмотре связанной информации группы группы! бросить новое runtimeexception («Исключение произошло при просмотре связанной информации о членах группы!»); }} / *** Перейти на соответствующую страницу группы участников* @return* / public String insulityItemsWitch () {return Success; }Код в JS:
/*** Пост-LOAN Специальная информация о записи инспекции Информация о дисплее-Информация об информации [связанный] Группа*/$ (Document) .on ('click', '. Связанный "/hbpost/riskrecheck/riskRelatedItem.action?time="+new date ()+" & loanid = "+readiad; tmparray = data.object ,, tipstr; tbody "). Append (" <tr> <td> "+tmparray [i] .cusname+" </td> <td> "+tmparray [i] .duebillno+" </td> </tr> "); $ (". Sameaddress "). CSS (" Displose ",", "); Contination;); Соответствующая страница информации о члене группы и отобразить ее в диалоге $ .ajax ({url: urlswitch, type: «get», успех: function (data) {indiendinfo (); indentDialog = $ dialog ({id: 'indivedialog', ширина: 1000, заголовок: «связанная информация», CancelValue: «Close», Content: Data, Onshow: function () {$ (". Arui-dialog"). CSS ("max-height", "450px"); $ (". Arui-Dialog"). CSS ("Min-Height", "300px"); }})})Выше представлено решение для реализации модульного разделения функций передних страниц от JSP, стойки, пружины и Mybatis, представленных вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!