In den ersten beiden Artikeln haben wir SSH integriert und die Schnittstellen der Dienst- und Aktionsteile extrahiert. Es kann gesagt werden, dass die grundlegende Entwicklungsumgebung gebaut wurde. In diesem Abschnitt werden wir die Backend -Seite erstellen. Lassen Sie uns zwei Möglichkeiten des Aufbaus diskutieren: Basis von Frameset und Easyui basiert. Schließlich werden wir Easyui verwenden, um sich zu entwickeln.
1. Extrahieren Sie öffentliche JSP -Seiten
Schauen wir uns zunächst die aktuelle JSP -Seite an:
<%@ page Language = "java" import = "java.util. <html> <kopf> </head> <body> <!-ausgießen ...-> </c: foreach> </body> </html> </span>
Lassen Sie uns den Inhalt des Körperteils nicht zuerst lesen, da diese alle für frühere Tests verwendet werden. Das Extrahieren der JSP -Seite bedeutet, einige gemeinsame Teile in eine neue JSP -Seite zu extrahieren und sie dann in die aktuelle JSP -Seite aufzunehmen. Da spätere Projekte JS, CSS und andere Dateien definitiv einführen, wenn sie auf jeder JSP -Seite geschrieben wurden, wird es sehr überflüssig sein. Daher müssen wir ein gemeinsames JSP extrahieren, um diese Dateien und andere Dinge einzuführen. Wir erstellen einen neuen öffentlichen Ordner im Webroot -Verzeichnis und erstellen einen neuen Head.jspf (JSPF repräsentiert ein JSP -Fragment für andere JSP -Seiten).
<%@ page Language = "java" pageCoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" Präfix = "C"%> <c: set value = "$ {pageContext.request.contextex-var = title> elling.contextpath}" var type = "text/javaScript" src = ""> </script> <style type = "text/css"> </style> -> </span> Der Kommentarteil enthält hauptsächlich JS und CSS, da er noch nicht verwendet wurde. Erstellen Sie einfach ein Framework und entfernen Sie es, wenn es verwendet wird. Das <C: set> Tag verwendet $ {pageContext.request.contextPath}, um $ {shop} für das einfache Schreiben zu ersetzen. Auf diese Weise muss der neue JSP in Zukunft diesen Head.jspf nur einbeziehen. Schauen wir uns den modifizierten Index.jsp an:
<%@ page Language = "java" import = "java.util. </body> </html> </span>
Gibt es eine objektorientierte Idee?
2. Erstellen Sie eine Hintergrundseite basierend auf Frameset
2.1 Probleme entdecken
Die Vorlage wurde extrahiert, und jetzt haben wir begonnen, das Hintergrundseiten -Framework zu erstellen. Erstens verwenden wir Frameset, um es zu tun. Erstellen Sie einen neuen Ordner, der im Web-Inf-Verzeichnis wichtig ist, und erstellen Sie vier neue JSP-Dateien in Main: aindex.jsp, top.jsp, links.jsp und rechts.jsp. Unser Frameset ist in aindex.jsp. Die anderen drei sind nur in einem einfachen Satz zum Testen geschrieben. Werfen wir einen Blick auf aIndex.jsp:
<%@ page Language = "java" import = "java.util. pages--> <frameset rows="150,*"> <frame src="top.jsp" /> <frameset cols="150,*"> <frame src="left.jsp" /> <frame src="right.jsp" /> </frameset> </frameset> </html></span>
Die Struktur ist sehr offensichtlich, die Seite ist in 3 Stücke unterteilt und die Seite links und rechts. Jedes Modul enthält die entsprechende JSP-Seite, und dann schreiben wir <a href = "/wen-inf/main/aindex.jsp"> testen Sie auf dem Hintergrund </a> im Körper von index.jsp, starten Sie Tomcat und finden Sie, dass Klicken auf den Link nicht auf den Hintergrund zugreifen kann. Der Grund dafür ist, dass JSP im Web-INF-Verzeichnis nicht direkt umgeleitet werden kann und durch Servlet oder Aktion umgeleitet werden muss. Es gibt keinen Weg, ich kann nur eine neue Sprungaktion schreiben.
2.2 Seitensprungaktion schreiben
Wir schreiben zuerst eine Aktion, um die Seitenumleitung zu vervollständigen. Diese Aktion implementiert einfach die Umleitung von Seiten und behandelt keine Geschäftslogik.
/ ** * @Description: Todo (Mit dieser Aktion wird die Weiterleitung von JSP und JSP-Anforderungsfunktionen in Web-INF ausgeführt, und diese Aktion verwaltet keine Logik. }}
Wir können sehen, dass SendAction nicht die zuvor extrahierte Basiswirkung erbt, sondern lediglich die AsctionVorts erbt. Dann konfigurieren wir es in der Datei struts.xml:
<? Ergebnis, gültig für alle Aktionen in diesem Paket-> </span> <global-results> <result name = "aindex">/web-inf/main/aindex.jsp </result> </global-results> <! name = "send">/webinf/{1}/{2} .jsp </result> </action> </package> </struts> Vergessen Sie nicht, es in beans.xml zu konfigurieren: <bean id = "sendAction" />.
Der Grund, warum in dieser Aktion zwei*Nummern zugewiesen sind, besteht darin, den Zugriff auf Web-INF/*/*. JSP zu erleichtern, wodurch die Vereinbarung über die Schreibmethode der Adresse in JSP erforderlich ist. Schauen wir uns die Schreibmethode in AIndex.jsp an:
<span style = "Schriftfamilie: Microsoft Yahei;"> <%@ page Language = "java" import = "java.util. file = " /public /head.jspf" %> < /head> <!-Der Frame-Körper enthält 3+1 Seiten-> <Frameset Rows = "150,*"> <src = "send_main_top.action" /> <rahmenset cols = "150,*"> <Frame-src = "send_main_left.act. </Frameset> </srameset> </html> </span>
Aus dem modifizierten aIndex.jsp können wir feststellen, dass wir nicht direkt auf den JSP unter Web-INF/ zugreifen (wir können auch nicht darauf zugreifen). Wir springen durch die Aktion, damit wir <a href = "send_main_aindex.action"> in den Körper von index.jsp schreiben, um es auf den Hintergrund zu testen </a>, und dann Tomcat starten und dann auf den Link klicken, um auf die Backend -Startseite zuzugreifen.
Nach dem oben genannten Prozess der Verwendung von Frameset zum Erstellen von Backend -Seiten ist dies ziemlich problematisch. Es ist in jeder Seite enthalten und Frameset wird in der Entwicklung nicht verwendet. EasyUi hat nur eine Seite und alle Anfragen sind Ajax -Anfragen. Schauen wir uns als nächstes an, wie Sie Easyui verwenden, um Backend -Seiten zu erstellen.
3. Erstellen Sie eine Hintergrundseite basierend auf EasyUi
JQuery Easyui ist eine Sammlung von UI-Plug-Ins, die auf JQuery basieren, und das Ziel von JQuery Easyui ist es, Webentwicklern dabei zu helfen, eine UI-Oberfläche zu erstellen, die reich an Funktionen und wunderschön ist. Entwickler müssen weder komplexes JavaScript schreiben, noch müssen sie ein detailliertes Verständnis der CSS-Stile haben. Alle Entwickler müssen wissen, dass einige einfache HTML -Tags sind.
3.1 Importieren Sie Easyui -verwandte Komponenten
Wir importieren zunächst die für Easyui erforderlichen Komponenten im Webroot -Verzeichnis im Projekt, und es gibt Downloads im Internet. Ich benutze JQuery-Easyui-1.3.5, um einige unnötige Dinge zu entfernen. Das Endergebnis ist wie folgt:
3.2 Aufbau einer Easyui -Umgebung
Wir öffnen die gerade extrahierte Head.jspf -Datei, importieren die CSS und JS, von denen Easyui hier abhängt, und stellen die JSPF -Datei auf anderen Seiten vor, die indirekt die CSS und JS vorstellen, von denen Easyui abhängt:
<%@ page Language = "java" pageCoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" Präfix = "C"%> <c: set value = "$ {pageContext.request.contextex-context}-var = var = title> assoquest.context}-var Die Easyi-Umgebung-> <link rel = "stylesheet" href = "$ {shop} /jquery-easyui-1.3.5/themes/icon.css" type = "text/css"> </link> <link rel = "styleSheet" href type = "text/css"> </link> <script type = "text/javaScript" src = "$ {shop} /jquery-easyui-1.3.5/jquery.min.js"> </script> <script type = "text/javaScript" } /jquery-easyui-1.3.5/jquery.easyui.min.js "> </script> <script type =" text/javascript "src =" $ {shop} /jquery-easyui-1.3.5/locale/easyui-zh_cn.js "> </script> 3.3 Erstellen Sie einen Rahmen für den Hintergrund
Löschen Sie die Top.jsp, links.jsp und rechts.jsp im Web-INF/ Main/ Main/ Main/ Verzeichnis, da es jetzt nicht mehr verfügbar ist. Ändern Sie dann die Seite aIndex.jsp. Sie können jetzt Easyui verwenden, um dies zu tun:
<%@ page Language = "java" import = "java.util. Data-Options = "Region: 'North', Titel: 'North Title', Split: True" Style = "Höhe: 100px;"> </div> <div Data-Options = "Region: 'West', Titel: 'West', Split: True"> <!-Das Systemmenü wird hier angezeigt-> <div id = "aa"> <div Data-Options = "iconcls:" iconcls: "iconcls:" style = "Überlauf: auto; padding: 10px;"> <h3 style = "color:#0099ff;"> Akkordeon für JQuery </h3> <p> Akkordeon ist Teil des Easyi -Frameworks für JQuery. Sie können Ihre Akkordeonkomponente auf der Webseite leichter definieren. style = "padding: 5px; Hintergrund: #eee;"> </div> </body> </html>
So viele <Div> hier werden alle auf das Easyui -Beschreibung oben verwiesen, und ich habe es unten gepostet. Führen Sie zuerst das gesamte Layout -Layout durch und entfernen Sie, was wir nicht brauchen. Wir brauchen nur drei Teile: Nord, West und Zentrum:
Fügen Sie dann das Layout der Accordon -Klassifizierung im DIV im westlichen Teil hinzu und fügen Sie den Code zum Head.jspf hinzu:
Auf diese Weise haben wir einfach das Backend Page -Framework erstellt, und in der späteren Phase müssen wir nur etwas ausfüllen. Testen wir es in Index.jsp: <a href = "send_main_aindex.action"> direkt in die Hintergrund-Easyui-Version </a>, damit JSP die SendAction findet, die wir gerade geschrieben haben, und dann zu EWB-Inf/Main/aindex.jsp wechselt und der Hintergrund-Framework wie folgt korrekt angezeigt werden: wie folgt angezeigt werden:
Zu diesem Zeitpunkt haben wir den Framework der Hintergrundseite mit EasyUi erfolgreich erstellt.
(HINWEIS: Am Ende werde ich den Quellcode -Download des gesamten Projekts angeben! Jeder kann gerne sammeln oder teilen.)
Die Quellcode -Download -Adresse des gesamten Projekts: //www.vevb.com/article/86099.htm
Originaladresse: http://blog.csdn.net/eson_15/article/details/51312490
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.