Division modulaire des fonctions de page frontale
Lorsqu'un système a de nombreuses fonctions, il est impossible que toutes les pages de modules fonctionnels soient écrites en une seule page. À l'heure actuelle, les pages de différents modules fonctionnels doivent être divisés, tout comme un modèle. Les pages dont la fonction est nécessaire sera appelée, puis les données correspondantes seront chargées et affichées sur la page correspondante.
Cette application utilise Spring + Struts + MyBatis + JSP pour compléter la division des fonctions de page frontale à l'aide de deux solutions.
Plan 1:
Dans les pages JSP, les données de la page sont remplies en arrière-plan à l'aide des expressions EL ou du code Java. Ensuite, complétez la commutation de la page en JS.
Code jsp:
Détails de l'entreprise Page du module: Riskdetailetem.jsp Le code de page utilise les expressions EL pour effectuer le remplissage des données.
<div> <table style = "Font-Size: 14px;"> <tr> <td> Nom du client </td> <td> $ {prêts à disquesLe code de fichier XML de Struts:
Film éthique http://www.dotdy.com/
<action name = "RiskDetaiLitem" Method = "DetailItem"> <result name = "Success"> / web-inf / jsp / risqueRecheck / RiskDetailetem.jsp </sult> </ action>
Code en action:
PRIVATION DORANTRISKBEAN LORGRISKBEAN; Public String DetailItem () {try {LoanRiskBean = RiskReceCkServiceImpl.Detailitem (RiskID); - Appelez la méthode du service pour interroger les données} Catch (exception e) {e.printStackTrace (); LoggerUtil.info ("Exception s'est produite dans les détails de la vue! ------ DetailItem ()"); Jetez une nouvelle RuntimeException ("Exception s'est produite dans les détails de la vue!"); } Retour succès; } public void SetloanRiskBean (LoanRiskBean LoanRiskBean) {this.loanRiskBean = LoanRiskBean; } Code dans JS:
$ (document) .on ('click', '. liked', function () {var prêt = $ (this) .attr ("prêté"); var urlSwitch = "/hbPost/Riskrecheck/RiskRelatemSwitch.Action"; var url = "/hbpost/RiskRedetemswitch.Action.Actived; // Déclare la méthode de requête des détails var lisetInfo = function () {$ .ajax ({url: url, type: 'get', dataType: 'json', succès: function (data) {}})} // demande de chargement la page d'informations des membres du groupe pertinente et affichez-les dans la boîte de dialog LETELInfo (); // Appelez la méthode de la requête des détails RelatedDialog = $ Dialog ({id: 'RelatedDialog', Width: 1000, Title: "Related Information", CancelValue: 'Close', Content: Data, Onshow: Function () {$ (".. Arui-dialog"). CSS ("Max-Height", "450px"); $ (". ARUI-DIALOG"). La deuxième solution:
Dans la page JSP du module fonctionnel correspondant, ce n'est que du code statique et nécessite un remplissage de données en JS. Cependant, parce que la page du module de fonction JSP correspondant n'a pas encore été chargée (bien que vous puissiez introduire JS correspondant sur la page JS du module fonctionnel, ou utiliser Sea.js pour charger le fichier JS, mais l'essence est que le fichier JS correspondant ne sera chargé que lorsque l'élément HTML ou JS est chargé), vous ne pouvez pas utiliser JQuery dans JS pour obtenir l'élément DOM de la page. Pour le moment, vous devez d'abord charger la page JSP. Par exemple, vous pouvez sauter une page sur Struts sans faire une demande à l'arrière-plan. C'est-à-dire que deux demandes doivent être initiées à l'arrière-plan. La première demande consiste à charger la page du module fonctionnel correspondant, et la deuxième demande consiste à demander des données à l'arrière-plan, puis à la remplir dans la page de la première demande et à l'afficher.
Code jsp: tout code statique
<div style = "Overflow: Auto; Width: 100%; * + width: 1000px;"> <div> <h5> Nom d'entreprise incohérente </h5> <Table> <THEAD> <TR> <TH> Nom du client </th> <TH> IOT AVIS MOMENT
Le fichier XML dans Struts:
<action name = "RiskRelatedItem" méthode = "RelateDItem"> </ Action> <! - Passez à la page de groupe associée -> <action name = "RiskRelatedItemSwitch" Method = "RelatemSwitch"> <résultat name = "Success"> / web-inf / jsp / risquereCheck / RiskRelatedItem.jsp </sult> </ Action>
Ou:
<! - Jump à la page de groupe pertinente -> Pas besoin d'écrire la méthode correspondante dans l'action, Struts est responsable du saut. <Action name = "RiskRelatedItemSwitch"> <Sult> /web-inf/jsp/Riskrecheck/RiskRelatedItem.jsp </cult> </ Action>
Code en action:
/ ** * Interroger les informations des membres du groupe pertinents basés sur le prêtID * / public void Relatem () {list <workRiskBean> tmprelatedList = null; essayez {tmprelatedList = RiskReceCkServiceImpl.RelatedItem (prêté); this.outputStreamModelandView (tmprelatedList); } catch (exception e) {e.printStackTrace (); LoggerUtil.info ("Exception s'est produite lors de la visualisation des informations des membres du groupe connexes! ------ RelatedItem ()"); Jetez une nouvelle RuntimeException ("Exception s'est produite lors de la visualisation des informations des membres du groupe connexes!"); }} / ** * Sautez à la page du groupe de membres pertinente * @return * / public String ReareDItemSwitch () {return Success; }Code dans JS:
/ ** * Post-Loan Special Inspection Information Informations Affichage - Informations de client [lié] Affichage du groupe * / $ (document) .on ('click', '. Lié', function () {var Loan = $ (this) .Attr ("workId"); var urlSwitch = "/hbpost/Riskrecheck/RiskRelatemSwitch.Action"; varl url = "/hbPost/Riskrecheck/RiskRelatedItem.Action?time="+New Date () +" & LoanId = "+ LoanId; = Data.Object, Tipstr; + TMPArray [i] .DueBillNo + "</ td> </tr>"); $ (". SamEaddress"). CSS ("Affichage", "Block"); RelatedInfo (); RelatedDialog = $ Dialog ({id: 'RelatedDialog', Width: 1000, Title: "Related Information", CancelValue: 'Close', Content: Data, Onshow: function () {$ (". arui-dialog"). CSS ("Max-Height", "450px"); $ (". ARUI-DIALOG"). CSS ("Min-Height", "300px"); }})})Ce qui précède est la solution pour implémenter la division modulaire des fonctions de page frontale par JSP, Struts, Spring et Mybatis qui vous ont été présentées. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!