En los dos primeros artículos, integramos SSH y extraemos las interfaces de las piezas de servicio y acción. Se puede decir que se ha construido el entorno de desarrollo básico. En esta sección, construiremos la página de backend. Discutamos dos formas de construcción: basada en Frameset y Easyui. Finalmente, usaremos EasyUI para desarrollar.
1. Extraer páginas públicas JSP
Primero veamos la página JSP actual:
<%@ page lenguaje = "java" import = "java.util.*" PageEncoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> < <html> <head> </head> <body> <!-omit ...-> </c: foreach> </body> </html> </span>
No leamos primero el contenido de la parte del cuerpo, porque todos se usan para pruebas anteriores. Extraer la página JSP significa extraer algunas partes comunes en una nueva página JSP y luego incluirlas en la página JSP actual. Debido a que los proyectos posteriores definitivamente introducirán JS, CSS y otros archivos, si se escriben en cada página de JSP, será muy redundante, por lo que tenemos que extraer un JSP común para introducir estos archivos y otras cosas. Creamos una nueva carpeta pública en el directorio de Webroot y creamos un nuevo head.jspf (JSPF representa un fragmento JSP para otras páginas JSP a incluir).
<%@ page lenguaje = "java" pageEncoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <c: set valor = "$ {pageContext.Request.contextpath" var = "tall"/title <tatle <title <title <title <title <tatle> Title <title> Title <script type = "text/javaScript" src = ""> </script> <style type = "text/css"> </style> -> </span> La parte del comentario incluye principalmente JS y CSS, porque aún no se ha utilizado, simplemente construya un marco y elimínelo cuando se use. La etiqueta <c: set> usa $ {pageContext.request.contextPath} para reemplazar $ {shop} para una fácil escritura. De esta manera, el nuevo JSP solo necesita incluir este cabezal.jspf en el futuro. Echemos un vistazo al índice modificado.jsp:
<%@ page lenguaje = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! DocType html público "-// w3c // dtd html 4.01 transitional // en"> <html> <fead> <%@ include file = "/public/head.jspf"%> </head> <head> <browy> <! </body> </html> </span>
¿Hay una idea orientada a objetos?
2. Cree una página de fondo basada en Frameset
2.1 Descubriendo problemas
La plantilla se ha extraído, y ahora hemos comenzado a construir el marco de la página de fondo. Primero, usamos Frameset para hacerlo. Cree una nueva carpeta, Main en el directorio web-INF, y cree cuatro nuevos archivos JSP en Main: aindex.jsp, top.jsp, left.jsp y right.jsp. Nuestro Frameset está escrito en aindex.jsp. Los otros tres están escritos en una oración simple para las pruebas. Echemos un vistazo a aindex.jsp:
<%@ page lenguaje = "java" import = "java.util.*" pageEncoding = "utf-8"%> <! DocType html público "-// w3c // dtd html 4.01 transitional // en"> <html> <fead> <%@ include file = "/hove/head.jspf"%> </head> < Páginas-> <Frameset Rows = "150,*"> <Frame src = "top.jsp"/> <frameset cols = "150,*"> <frame src = "left.jsp"/> <frame src = "right.jsp"/> </frameset> </frameset> </html> </span>
La estructura es muy obvia, la página se divide en 3 piezas y la página está a la izquierda y a la derecha. Cada módulo contiene la página JSP correspondiente, y luego escribimos <a href = "/wen-inf/main/aindex.jsp"> prueba en segundo plano </a> En el cuerpo de index.jsp, inicia Tomcat, y encuentre que hacer clic en el enlace no puede acceder al fondo. La razón es que JSP en el directorio web-INF no puede redirigirse directamente, y debe redirigirse a través de servlet o acción. No hay forma, solo puedo escribir una nueva acción de salto.
2.2 Acción de salto de la página de escritura
Primero escribimos una acción para completar la redirección de la página. Esta acción simplemente implementa la redirección de la página y no maneja ninguna lógica comercial.
/ ** * @Description: TODO (esta acción se usa para completar las funciones de reenvío de solicitudes JSP y JSP en Web-INF, y esta acción no maneja ninguna lógica) * @author eson_15 * */ public class sendAction extiende ActionSupport {public String Execute () {return "Send"; }} Podemos ver que SendAction no hereda la reacción de la base que extraí antes, sino que simplemente hereda las acciones. Luego lo configuramos en el archivo Struts.xml:
<? xml versión = "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.dtdd"> <truts> <paquete name = "shop" Extends = "Struts-DeFault" Resultado, válido para todas las acciones en este paquete-> </span> <Global-results> <resultado name = "aindex">/web-inf/main/aindex.jsp </ resultado> </global-resultos> <!-omitir la configuración de otras acciones ... </span>-> <! Se usa para completar el reenvío de la acción de las solicitudes del sistema, todas las solicitudes se entregan a la ejecución de otras acciones-> <n. name = "Send">/Web-Inf/{1}/{2} .jsp </resultado> </action> </paquete> </truts> No olvide configurarlo en frijoles.xml: <bean id = "sendaction" />.
La razón por la cual se asignan dos*números en esta acción es facilitar el acceso a Web-INF/*/*. JSP, que requiere el acuerdo sobre el método de escritura de la dirección en JSP. Echemos un vistazo al método de escritura en aindex.jsp:
<span style = "Font-Family: Microsoft Yahei;"> <%@ Page Language = "Java" import = "java.util.*" PageEncoding = "Utf-8"%> <! Doctype html público "-// w3c // dtd html 4.01 transición // en"> <html> <head "@@ incluye@ incluye@ incluye file = " /public /head.jspf" %> < /head> <!-El cuerpo del marco contiene 3+1 páginas-> <frameset rows = "150,*"> <frame src = "send_main_top.action" /> <frameset cols = "150,*"> <<mc = "send_Main_left.action" /> <<rc = "send marrham. </frameset> </ frameset> </html> </span>
Desde el Aindex.jsp modificado, podemos ver que no accedemos directamente al JSP en Web-INF/ (tampoco podemos acceder a él). Saltamos a través de la acción, de modo que escribimos <a href = "send_main_aindex.action"> al cuerpo de index.jsp para probarlo en segundo plano </a>, y luego iniciar Tomcat, y luego hacer clic en el enlace para acceder a la página de inicio de backend normalmente.
A juzgar por el proceso anterior de usar Frameset para construir páginas de backend, es bastante problemático. Se incluye en cada página, y Frameset no se usa en el desarrollo. Easyui solo tiene una página, y todas las solicitudes son solicitudes AJAX. A continuación, echemos un vistazo a cómo usar EasyUi para construir páginas de backend.
3. Cree una página de fondo basada en EasyUi
JQuery Easyui es una colección de complementos de UI basados en jQuery, y el objetivo de JQuery Easyui es ayudar a los desarrolladores web a crear una interfaz de UI que sea rica en características y maravillosamente. Los desarrolladores no necesitan escribir JavaScript complejo, ni necesitan tener una comprensión profunda de los estilos CSS. Todos los desarrolladores deben saber que son algunas etiquetas HTML simples.
3.1 Importar componentes relacionados con EasyUI
Primero importamos los componentes requeridos para EasyUI en el directorio de techo web en el proyecto, y hay descargas en Internet. Utilizo jQuery-Easyui-1.3.5 para eliminar algunas cosas innecesarias. El resultado final es el siguiente:
3.2 Construyendo un entorno easyui
Abrimos el archivo head.jspf que acabamos de extraer, importar el CSS y JS que EasyUi depende aquí de aquí, e introduce el archivo JSPF en otras páginas, presente indirectamente el CSS y JS que Easyui depende:
<%@ page lenguaje = "java" pageEncoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <c: set valor = "$ {pageContext.request.contextpath" var = "tall"/> title <title> title <title> title-title es el entorno Easyi-> <link rel = "stylesheet" href = "$ {shop} /jquery-easyui-1.3.5/themes/icon.css" type = "text/css"> </ink> <link rel = "stylesheet" href = "$ {shop } /jQuery-Easyui-1.3.5/themes/default/Easyui.css "type =" Text/css "> </ink> <script type =" text/javaScript "src =" $ {shop} /jQuery-deasyui-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"> </script> 3.3 Construir un marco para el fondo
Elimine top.jsp, left.jsp y right.jsp en el directorio web-INF/ main/ porque ya no está disponible ahora. Luego modifique la página aindex.jsp. Ahora puedes usar EasyUi para hacerlo:
<%@ page lenguaje = "java" import = "java.util.*" pageEncoding = "utf-8"%> <! DocType html público "-// w3c // dtd html 4.01 transitional // en"> <html> <foad> <%@ include file = "/public data-options = "región: 'norte', título: 'title norte', división: true" style = "altura: 100px;"> </div> <div data-options = "región: 'oeste', título: 'oeste', división: true"> <!-El menú del sistema se muestra aquí-> <Div id = "AA"> <Div Data-Options = "Iconcls: 'Icon-Save'" "" "" "" " style = "Overflow: Auto; Padding: 10px;"> <h3 style = "color:#0099ff;"> Acordeón para jQuery </h3> <p> Accordion es parte del marco Easyi para jQuery. Le permite definir su componente de acordeón en la página web más fácilmente. </p> </div> <div data-options = "icOncls: 'icon-Reload', seleccionado: true" style = "Padding: 10px;"> Content2 </div> <div> Content3 </div> </div> </div> </div> <Div data-options = "Region: 'Center', Title ', Title', 'Title" </div> </div> </div> <Div data-options = "Region:' Center ', Title', Title ',' Title '". style = "Padding: 5px; Background: #eee;"> </div> </body> </html>
Muchos <div> s aquí están referenciados al documento de descripción EasyUI anterior, y los publiqué a continuación. Primero realice todo el diseño del diseño y elimine lo que no necesitamos. Solo necesitamos tres partes: Norte, Oeste y Centro:
Luego agregue el diseño de la clasificación de Accordon en el DIV en la parte oeste y agregue el código al cabezal.jspf:
De esta manera, simplemente hemos construido el marco de la página de backend, y en la etapa posterior, solo necesitamos completar algo. Probáramos en index.jsp: <a href = "send_main_aindex.action"> directamente a la versión EasyUi de fondo </a>, para que JSP encuentre la SendAction que acabamos de escribir y luego salte a EWB-Inf/Main/Aindex.jsp, y el marco de fondo se puede mostrar correctamente, lo siguiente:
En este punto, hemos creado con éxito el marco de la página de fondo utilizando EasyUI.
(Nota: ¡Al final, proporcionaré la descarga del código fuente de todo el proyecto! Todos son bienvenidos a recopilar o compartir)
La dirección de descarga del código fuente de todo el proyecto: //www.vevb.com/article/86099.htm
Dirección original: http://blog.csdn.net/eson_15/article/details/51312490
Lo anterior es todo el contenido de este artículo. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.