Dans les deux premiers articles, nous avons intégré SSH et extrait les interfaces des pièces de service et d'action. On peut dire que l'environnement de développement de base a été construit. Dans cette section, nous créerons la page backend. Discutons de deux façons de construire: basé sur Frameset et basé sur Easyui. Enfin, nous utiliserons Easyui pour développer.
1. Extraire des pages JSP publiques
Regardons d'abord la page JSP actuelle:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "UTF-8"%> <% @ taglib uri = "http://java.sun.com/jsp/jstl/core" Prefix = "C"%> <! DocType html Public "- // w3c // dtd html 4.01 Public" - // w3c // dtd html 4.01 Public "- // w3c // dtd html 4.01 Transitional //n <Html> <A-head> </ head> <body> <! - Omit ... -> </c: foreach> </body> </html> </span>
Ne lisons pas le contenu de la partie du corps en premier, car ceux-ci sont tous utilisés pour les tests précédents. Extraire la page JSP signifie extraire certaines pièces communes dans une nouvelle page JSP, puis les inclure dans la page JSP actuelle. Parce que les projets ultérieurs présenteront certainement JS, CSS et d'autres fichiers, s'ils sont écrits sur chaque page JSP, il sera très redondant, nous devons donc extraire un JSP commun pour introduire ces fichiers et d'autres choses. Nous créons un nouveau dossier public dans le répertoire WebRoot et créons un nouveau Head.jspf (JSPF représente un fragment JSP pour les autres pages JSP à inclure).
<% @ Page Language = "Java" Pageencoding = "UTF-8"%> <% @ Taglib Uri = "http://java.sun.com/jsp/jstl/core" Prefix = "C"%> <C: Set Value = "$ {pageContext.request.contextpath}" var = "shop" /> <title> Easy Shopping Mall <!! type = "text / javascript" src = ""> </ script> <style type = "text / css"> </ style> -> </span> La partie de commentaire comprend principalement JS et CSS, car elle n'a pas encore été utilisée, il suffit de créer un cadre et de le supprimer lorsqu'il est utilisé. La balise <c: set> utilise $ {pagecontext.request.contextPath} pour remplacer $ {shop} pour une écriture facile. De cette façon, le nouveau JSP doit uniquement inclure cette tête.jspf à l'avenir. Jetons un coup d'œil à l'index modifié.jsp:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "UTF-8"%> <! DocType Html public "- // w3c // dtd html 4.01 transitional // en"> <html> <fread> <% @ incluse File = "/ public / head.jspf"%> </ head> <! </ body> </html> </span>
Y a-t-il une idée orientée objet?
2. Créez une page d'arrière-plan basée sur Frameset
2.1 Découvrir les problèmes
Le modèle a été extrait, et maintenant nous avons commencé à créer le cadre de la page d'arrière-plan. Tout d'abord, nous utilisons Frameset pour le faire. Créez un nouveau dossier, principal dans le répertoire Web-Inf, et créez quatre nouveaux fichiers JSP dans Main: Aindex.jsp, top.jsp, Left.jsp et droite.jsp. Notre Frameset est écrit dans Aindex.jsp. Les trois autres sont juste écrits dans une simple phrase pour les tests. Jetons un coup d'œil à Aindex.jsp:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "UTF-8"%> <! DocType Html public "- // w3c // dtd html 4.01 transitional // en"> <html> <adread> <% @ incluse File = "Public / Head.Jspf"%> </ thead pages -> <frameset rows = "150, *"> <frame src = "top.jsp" /> <frameset cols = "150, *"> <frame src = "Left.jsp" /> <frame src = "droite.
La structure est très évidente, la page est divisée en 3 pièces et la page est à gauche et à droite. Chaque module contient la page JSP correspondante, puis nous écrivons <a href = "/ wen-inf / main / aindex.jsp"> Tester sur l'arrière-plan </a> Dans le corps de l'index.jsp, démarrez Tomcat et constatez que le clic sur le lien ne peut pas accéder à l'arrière-plan. La raison en est que JSP dans le répertoire Web-Inf ne peut pas être directement redirigé et doit être redirigé par servlet ou action. Il n'y a aucun moyen, je ne peux que rédiger une nouvelle action de saut.
2.2 Action de saut de page d'écriture
Nous écrivons d'abord une action pour compléter la redirection de la page. Cette action implémente simplement la redirection de la page et ne gère aucune logique métier.
/ ** * @Description: TODO (Cette action est utilisée pour remplir les fonctions de transfert de la demande JSP et JSP dans Web-Inf, et cette action ne gère aucune logique) * @author eson_15 * * / public class SendAction étend ActionSupport {public String execute () {return "send"; }} Nous pouvons voir que SendAction n'hérite pas de la réaction de base que nous avons extraite auparavant, mais hérite simplement de la support d'action. Ensuite, nous le configurons dans le fichier strut.xml:
<? xml version = "1.0" Encoding = "UTF-8"?> <! Doctype Struts public "- // Apache Software Foundation // Dtd Struts Configuration 2.3 // en" "http://struts.apache.org/dtds/struts-2.3.dtd"> <stretts> <package nom = "shop Résultat, valide pour toutes les actions de ce package -> </span> <global-résults> <résultat name = "aindex"> / web-inff / main / aindex.jsp </scaS> </ global-résults> <! - omettez la configuration d'autres actions ... </span> -> <! - Utilisé pour compléter le transfert d'action des demandes système, toutes les demandes sont remises en fonction de l'exécution -> <Action Name = "* * * * * * * <résultat name = "Send"> / web-inf / {1} / {2} .jsp </sult> </ action> </ package> </ struts> N'oubliez pas de le configurer dans bean.xml: <bean id = "sendAction" />.
La raison pour laquelle deux * numéros sont attribués dans cette action est de faciliter l'accès à Web-Inf / * / *. JSP, qui nécessite l'accord sur la méthode d'écriture de l'adresse dans JSP. Jetons un coup d'œil à la méthode d'écriture dans Aindex.jsp:
<span style = "Font-Family: Microsoft Yahei;"> <% @ page Language = "Java" import = "java.util. *" Pageencoding = "utf-8"%> <! Doctype html public "- // w3c // dtd html 4.01 transitional // en"> <html> file = "/ public / head.jspf"%> </ head> <! - Le corps de trame contient 3 + 1 pages -> <FrameSet Rows = "150, *"> <frame src = "send_main_top.action" /> <frameset Cols = "150, *"> <came </ FrameSet> </ FrameSet> </html> </span>
À partir de l'Aindex.jsp modifié, nous pouvons voir que nous n'accédons pas directement au JSP sous Web-Inf / (nous ne pouvons pas non plus y accéder). Nous passons à travers l'action, afin que nous écrivions <a href = "send_main_aindex.action"> au corps de l'index.jsp pour le tester sur l'arrière-plan </a>, puis commencez Tomcat, puis cliquez sur le lien pour accéder normalement à la page d'accueil du backend.
À en juger par le processus ci-dessus d'utilisation de Frameset pour construire des pages backend, il est assez gênant. Il est inclus dans chaque page et Frameset n'est pas utilisé dans le développement. EasyUi n'a qu'une seule page, et toutes les demandes sont des demandes AJAX. Ensuite, jetons un coup d'œil à utiliser EasyUi pour construire des pages backend.
3. Créez une page d'arrière-plan basée sur EasyUi
JQuery Easyui est une collection de plug-ins d'interface utilisateur basée sur jQuery, et l'objectif de jQuery Easyui est d'aider les développeurs Web à créer une interface d'interface utilisateur riche en fonctionnalités et magnifiquement. Les développeurs n'ont pas besoin d'écrire du JavaScript complexe, et ils n'ont pas besoin d'avoir une compréhension approfondie des styles CSS. Tous les développeurs doivent savoir que c'est de simples balises HTML.
3.1 Importer des composants liés à Easyui
Nous importons d'abord les composants requis pour EasyUi dans le répertoire WebRoot dans le projet, et il y a des téléchargements sur Internet. J'utilise jQuery-Easyui-1.3.5 pour supprimer des choses inutiles. Le résultat final est le suivant:
3.2 Construire un environnement EasyUi
Nous ouvrons le fichier head.jspf que nous venons d'extraire, important le CSS et JS dont dépend EasyUi ici, et introduisons le fichier JSPF sur d'autres pages introduire indirectement le CSS et JS dont dépend EasyUi:
<% @ Page Language = "Java" Pageencoding = "UTF-8"%> <% @ Taglib Uri = "http://java.sun.com/jsp/jstl/core" Prefix = "C"%> <C: Set Value = "$ {pageContext.request.contextpath}" var = "Shop" /> <title> Easy Shopping Mall <!! L'environnement Easyi -> <link rel = "Stylesheet" href = "$ {shop} /jquery-easyui-1.3.5/themes/icon.css" type = "text / css"> </ link> <link rel = "Stylesheet" href = "$ {shop} /jquery-easyui-1.3.5/thmes/defaul type = "text / css"> </ link> <script type = "text / javascript" src = "$ {shop} /jQuery-easyui-1.3.5/jquery.min.js"> </ script> <script type = "text / javascript" src = "$ {shop } /jquery-easyui-1.3.5/jquery.easyui.min.js "> </ script> <script type =" text / javascript "src =" $ {shop} /jquery-easyui-1.3.5/locale/easyui-lang-zh_cn.js "> </cript> 3.3 Construisez un cadre pour l'arrière-plan
Supprimez le top.jsp, left.jsp et droit.jsp dans le Web-inf / Main / Directory car il n'est plus disponible maintenant. Modifiez ensuite la page Aindex.jsp. Vous pouvez maintenant utiliser EasyUi pour le faire:
<% @ Page Language = "Java" import = "java.util. *" Pageencoding = "utf-8"%> <! Doctype html public "- // w3c // dtd html 4.01 transitional // en"> <html> <ead> <% @ incluse file = "/ public / head.jspf"%> </ head> Data-Options = "Region: 'North', Title: 'North Title', Split: True" Style = "Height: 100px;"> </div> <div Data-Options = "Region: 'West', Title: 'West', Split: True"> <! Style = "Overflow: Auto; Padding: 10px;"> <H3 Style = "Color: # 0099FF;"> L'accordéon pour jQuery </h3> <p> L'accordéon fait partie de Framework Easyi pour jQuery. Il vous permet de définir plus facilement votre composant accordéon sur la page Web. </p> </div> <div data-options = "iConcls: 'icon-reload', sélectionné: true" style = "padding: 10px;"> contenu2 </v> <div> contenu3 </ div> </v> </v> </v> <div data-options = "Region: 'Centre'," style = "padding: 5px; arrière-plan: #eee;"> </div> </ body> </html>
Tant de <div> ici sont tous référencés au document de description EasyUi ci-dessus, et je les ai publiés ci-dessous. Effectuez d'abord toute la disposition de la disposition et supprimez ce dont nous n'avons pas besoin. Nous n'avons besoin que de trois parties: nord, ouest et centre:
Ajoutez ensuite la disposition de la classification Accordon dans la div dans la partie ouest et ajoutez le code à la tête.jspf:
De cette façon, nous avons simplement construit le cadre de la page backend, et dans la dernière étape, nous avons juste besoin de remplir quelque chose. Tissons-le dans index.jsp: <a href = "send_main_aindex.action"> directement sur l'arrière-plan EasyUi version </a>, afin que JSP trouve le SendAction que nous venons d'écrire, puis de sauter correctement EWB-Inf / Main / Aindex.jsp, et le cadre d'arrière-plan peut être affiché correctement, comme suit:
À ce stade, nous avons réussi à construire le cadre de la page d'arrière-plan à l'aide d'EasyUi.
(Remarque: En fin de compte, je fournirai le téléchargement du code source de l'intégralité du projet! Tout le monde est le bienvenu pour collecter ou partager)
L'adresse de téléchargement du code source de l'intégralité du projet: //www.vevb.com/article/86099.htm
Adresse originale: http://blog.csdn.net/eson_15/article/details/51312490
Ce qui précède est l'intégralité du contenu de cet article. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.