Nos dois primeiros artigos, integramos o SSH e extraímos as interfaces das peças de serviço e ação. Pode -se dizer que o ambiente de desenvolvimento básico foi construído. Nesta seção, criaremos a página de back -end. Vamos discutir duas maneiras de construir: baseado em quadros e baseado em Easyui. Finalmente, usaremos o easyui para desenvolver.
1. Extrair páginas JSP públicas
Vamos primeiro olhar para a página JSP atual:
<%@ página linguagem = "java" import = "java.util. <html> <head> </head> <body> <!-omit ...-> </c: foreach> </body> </html> </span>
Não vamos ler o conteúdo da parte do corpo primeiro, porque todos são usados para testes anteriores. Extrair a página JSP significa extrair algumas peças comuns para uma nova página JSP e, em seguida, incluí -las na página JSP atual. Como os projetos posteriores definitivamente apresentarão definitivamente JS, CSS e outros arquivos, se escritos em cada página do JSP, será muito redundante; portanto, precisamos extrair um JSP comum para introduzir esses arquivos e outras coisas. Criamos uma nova pasta pública no diretório Webroot e criamos um novo head.jspf (o JSPF representa um fragmento JSP para outras páginas JSP para incluir).
<%@ Page Language = "Java" PageEncoding = "Utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <c: set valor = "$ {PagContext.ReQuest.CONTPATHTPATHPTHPATHTPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATTHPATTIONCIXE <C: type = "text/javascript" src = ""> </script> <style type = "text/css"> </style> -> </span> A parte do comentário inclui principalmente JS e CSS, porque ainda não foi usada, basta criar uma estrutura e removê -la quando for usada. A tag <c: set> usa $ {PageContext.request.ContextPath} para substituir $ {shop} para facilitar a redação. Dessa forma, o novo JSP só precisa incluir este Head.jspf no futuro. Vamos dar uma olhada no modificado index.jsp:
<%@ página linguagem = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! </body> </html> </span>
Existe uma ideia orientada a objetos?
2. Construa uma página de fundo com base no FrameSet
2.1 Descobrir problemas
O modelo foi extraído e agora começamos a criar a estrutura da página em segundo plano. Primeiro, usamos o FrameSet para fazê -lo. Crie uma nova pasta, principal no diretório Web-Inf e crie quatro novos arquivos JSP em Main: Aindex.jsp, top.jsp, leart.jsp e right.jsp. Nosso quadro está escrito em Aindex.jsp. Os outros três estão apenas escritos em uma frase simples para testes. Vamos dar uma olhada no Aindex.jsp:
<%@ Page Language = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! Páginas-> <FrameSet linhas = "150,*"> <ardem src = "top.jsp"/> <FrameSet cols = "150,*"> <ardem src = "left.jsp"/> <estrutura src = "right.jsp"/> </fameset> </fameset> </html>
A estrutura é muito óbvia, a página é dividida em 3 peças e a página fica à esquerda e à direita. Cada módulo contém a página JSP correspondente e, em seguida, escrevemos <a href = "/wen-inf/main/aindex.jsp"> teste no plano de fundo </a> No corpo do index.jsp, inicie o tomcat e encontre que clicar no link não pode acessar o plano de fundo. O motivo é que o JSP no diretório Web-Inf não pode ser redirecionado diretamente e precisa ser redirecionado através do servlet ou ação. Não há como escrever apenas uma nova ação de salto.
2.2 Ação do salto da página de gravação
Primeiro, escrevemos uma ação para concluir o redirecionamento da página. Essa ação simplesmente implementa o redirecionamento da página e não lida com nenhuma lógica de negócios.
/ ** * @Description: TODO (esta ação é usada para concluir as funções de encaminhamento de solicitação JSP e JSP no Web-Inf, e essa ação não lida com nenhuma lógica) * @author eSon_15 * */ public class SendAction estende o ACOCTUPPPORT {public String Execute () {Return "Send"; }} Podemos ver que a SendAction não herda a Baseation que extraímos antes, mas simplesmente herda o suporte da ação. Em seguida, configuramos -o no arquivo struts.xml:
<? xml versão = "1.0" coding = "utf-8"?> <! Doctype suporta public "-// Apache Software Foundation // DTD Struts Configuration 2.3 // pt" "http://struts.apache.org/dts/Struts-2.3.dtp"> <Struts> <package! Resultado, válido para todas as ações neste pacote-> </span> <Global-Results> <resultado name = "Aindex">/web-inf/main/aindex.jsp </resultado> </global-results> <!-omit as solicitações de outras ações ... <resultado name = "send">/web-inf/{1}/{2} .jsp </resultado> </action> </package> </stuts> Não se esqueça de configurá -lo em beans.xml: <bean id = "sendAction" />.
A razão pela qual dois números*são atribuídos nesta ação é facilitar o acesso ao Web-Inf/*/*. JSP, que requer o contrato sobre o método de escrita do endereço no JSP. Vamos dar uma olhada no método de escrita em Aindex.jsp:
<span style = "font-family: Microsoft yahei;"> <%@ página de página = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! file = " /public /head.jspf" %> < /head> <!-O corpo da estrutura contém 3+1 páginas-> <FRAMEST ROWS = "150,*"> <estrutura src = "send_main_top.action" /> <FrameSt cols = "150,*"> <estrutura src = "send_main_ft.ft." </raameSet> </raameSet> </html> </span>
A partir do AIndex.jsp modificado, podemos ver que não acessarmos diretamente o JSP em Web-Inf/ (também não podemos acessá-lo). Saltamos pela ação, para que escrevamos <a href = "send_main_aindex.action"> para o corpo do index.jsp para testá -lo no plano de fundo </a> e, em seguida, inicie o Tomcat e, em seguida, clique no link para acessar a página inicial do back -end normalmente.
A julgar pelo processo acima de usar o FrameSet para criar páginas de back -end, é bastante problemático. Está incluído em cada página e o FrameSet não é usado no desenvolvimento. O easyui tem apenas uma página e todas as solicitações são solicitações de Ajax. Em seguida, vamos dar uma olhada em como usar o easyui para criar páginas de back -end.
3. Construa uma página de segundo plano baseada em easyui
O JQuery Easyui é uma coleção de plug-ins de interface do usuário baseados no jQuery, e o objetivo do JQuery Easyui é ajudar os desenvolvedores da Web a criar uma interface da interface do usuário rica em recursos e lindamente. Os desenvolvedores não precisam escrever JavaScript complexos, nem precisam ter um entendimento profundo dos estilos CSS. Todos os desenvolvedores precisam saber são algumas tags HTML simples.
3.1 Importar componentes relacionados à Easyui
Primeiro, importamos os componentes necessários para a easyui no diretório Webroot no projeto, e há downloads na internet. Eu uso o jQuery-easyui-1.3.5 para remover algumas coisas desnecessárias. O resultado final é o seguinte:
3.2 Construindo um ambiente Easyui
Abrimos o arquivo head.jspf que acabamos de extrair, importamos o CSS e o JS dos quais o easyui depende aqui e introduzimos o arquivo JSPF em outras páginas, introduzindo indiretamente o CSS e o JS do qual o easyui depende:
<%@ Page Language = "Java" PageEncoding = "Utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <c: set valor = "$ {PagContext.request.CONTETPATHPATHTPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATHPATTHPIXT. easyi environment--> <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/themes/default/easyui.css" 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 ">.5/locale/easyui-lang-zh_cn.js" >.5/locale/easyui-lang-zh_cn.js "> 3.3 Construa uma estrutura para o fundo
Exclua o top.jsp, leart.jsp e right.jsp no diretório web-inf/ main/ porque não está mais disponível agora. Em seguida, modifique a página Aindex.jsp. Agora você pode usar o easyui para fazer isso:
<%@ Page Language = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! Data-Options = "Região: 'Norte', Título: 'Título do Norte', divisão: True" Style = "Hight: 100px;"> </div> <div data-options = "Region: 'West', Título: 'West', Split: True"> <!-O menu do sistema é exibido aqui-> <divid = "aa"> <d Data-options = "ICON" icCon "iccls" iccls "iccls" iccls "iccls: iccls: iccls é exibido aqui-> <div Id =" aa "> <d Data-options =" icCon "icCon" iccls "iccls" iccls "iccls: iccls: iccls é exibido aqui-> <div id =" aa "> <d Data-options" " style = "Overflow: Auto; preenchimento: 10px;"> <h3 style = "cor:#0099ff;"> acordeão para jQuery </h3> <p> acordeão faz parte da estrutura easyi para jQuery. Permite definir seu componente de acordeão na página da web com mais facilidade. </p> </div> <div data-options = "iconCls: 'icon-reload', selecionado: true" style = "padding: 10px;"> content2 </div> <div> content3 </div> </div '</div> </div> <Div-s- Data-s- style = "preenchimento: 5px; fundo: #eee;"> </div> </body> </html>
Muitos <div> aqui são todos referenciados ao documento Easyui Descrição acima, e eu os publiquei abaixo. Primeiro, realize todo o layout do layout e remova o que não precisamos. Precisamos apenas de três partes: norte, oeste e centro:
Em seguida, adicione o layout da classificação Accordon na Div na parte oeste e adicione o código ao head.jspf:
Dessa forma, simplesmente construímos a estrutura da página de back -end e, no estágio posterior, só precisamos preencher alguma coisa. Vamos testá-lo em index.jsp: <a href = "send_main_aindex.action"> diretamente para a versão em segundo plano easyui </a>, para que o JSP encontre a sendAction que acabamos de escrever e, em seguida, pulará para EWB-Inf/main/Aindex.jsp, e a estrutura de plano de fundo pode ser exibida corretamente, como segue: seguintes:
Neste ponto, construímos com sucesso a estrutura da página em segundo plano usando o easyui.
(Nota: No final, fornecerei o download do código -fonte de todo o projeto! Todos são bem -vindos para coletar ou compartilhar)
O endereço de download do código -fonte de todo o projeto: //www.vevb.com/article/86099.htm
Endereço original: http://blog.csdn.net/eson_15/article/details/51312490
O acima é o conteúdo inteiro deste artigo. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.