처음 두 기사에서는 SSH를 통합하고 서비스 및 작업 부품의 인터페이스를 추출했습니다. 기본 개발 환경이 구축되었다고 말할 수 있습니다. 이 섹션에서는 백엔드 페이지를 작성합니다. 프레임 세트 기반과 EasyUi 기반의 두 가지 구축 방법에 대해 논의 해 봅시다. 마지막으로, 우리는 EasyUi를 사용하여 개발할 것입니다.
1. 공개 JSP 페이지를 추출하십시오
먼저 현재 JSP 페이지를 살펴 보겠습니다.
<%@ page language = "java"import = "java.util.*"pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core"prefix = "c"%> <! arttype html public "-//01. <html> <head> </head> <hod> <!-생략 ...-> </c : foreach> </body> </html> </span>
신체 부위의 내용을 먼저 읽지 마십시오. 이는 모두 이전 테스트에 사용되기 때문입니다. JSP 페이지를 추출한다는 것은 일부 공통 부품을 새 JSP 페이지에 추출한 다음 현재 JSP 페이지에 포함시키는 것을 의미합니다. 나중에 프로젝트는 JS, CSS 및 기타 파일을 확실히 소개하기 때문에 각 JSP 페이지에 작성된 경우 매우 중복되므로 이러한 파일 및 기타 사항을 소개하려면 공통 JSP를 추출해야합니다. Webroot 디렉토리에 새 공개 폴더를 생성하고 새로운 Head.jspf를 만듭니다 (JSPF는 다른 JSP 페이지를 포함 할 JSP 조각을 나타냅니다).
<%@ page language = "java"pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core"c "%> <c : set value ="$ {pagecontext.request.context} "var = <splock ="shop "/> <shoping" "shop" "var =" <script type = "text/javaScript"src = ""> </script> <style type = "text/css"> </style> -> </span> 주석 부분에는 주로 JS 및 CSS가 포함됩니다. 아직 사용되지 않았기 때문에 프레임 워크를 구축하고 사용하면 제거하십시오. <c : set> tag는 $ {pagecontext.request.contextpath}를 사용하여 쉽게 쓰는 글을 쉽게 작성할 수 있도록 $ {shop}을 대체합니다. 이런 식으로 새로운 JSP는 향후이 head.jspf 만 포함하면됩니다. 수정 된 index.jsp를 살펴 보겠습니다.
<%@ page language = "java"import = "java.util.*"pageEncoding = "utf-8"%> <! doctype html public "-// w3c // dtml 4.01 전환 // en"> <html> <head> <%@ public/head.jspf "%> <!-<! </body> </html> </span>
객체 지향적 인 아이디어가 있습니까?
2. 프레임 세트를 기반으로 배경 페이지를 작성하십시오
2.1 문제 발견
템플릿이 추출되었으며 이제는 배경 페이지 프레임 워크를 구축하기 시작했습니다. 먼저 프레임 세트를 사용하여 수행합니다. Web-Inf 디렉토리의 메인 인 새 폴더를 작성하고 aindex.jsp, top.jsp, left.jsp 및 right.jsp. 우리의 프레임 세트는 aindex.jsp로 작성되었습니다. 다른 세 가지는 방금 테스트를 위해 간단한 문장으로 작성되었습니다. aindex.jsp를 살펴 보겠습니다.
<%@ page language = "java"import = "java.util.*"pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 전환 // en"> <html> <head> <%@ public/head.jspf "</head> </head. pages-> <frameset rows = "150,*"> <frame src = "top.jsp"/> <frameset cols = "150,*"> "> <frame src ="left.jsp "/> <frame src ="right.jsp "/> </frameset> </framest> </html> </span
구조는 매우 명백하고 페이지는 3 개로 나뉘며 페이지는 왼쪽과 오른쪽에 있습니다. 각 모듈에는 해당 JSP 페이지가 포함 된 다음 <a href = "/wen-inf/main/aindex.jsp"> test </a> index.jsp의 본문에서 Tomcat을 시작하고 링크를 클릭하면 배경에 액세스 할 수 없음을 찾습니다. 그 이유는 Web-INF 디렉토리의 JSP를 직접 리디렉션 할 수 없으며 서블릿이나 작업을 통해 리디렉션해야하기 때문입니다. 방법이 없습니다. 새로운 점프 액션 만 쓸 수 있습니다.
2.2 페이지 점프 동작 쓰기
먼저 페이지 리디렉션을 완료하기위한 조치를 작성합니다. 이 작업은 단순히 페이지 리디렉션을 구현하며 비즈니스 로직을 처리하지 않습니다.
/ ** * @description : TODO (이 조치는 Web-Inf에서 JSP 및 JSP 요청 전달 함수를 완료하는 데 사용 되며이 작업은 논리를 처리하지 않습니다) * @Author eson_15 * */ public 클래스 전송은 ActionSupport {public string execute () {return "send"; }} 우리는 전송이 이전에 추출한 바지를 물려받지 않고 단순히 ActionSupport를 물려 받는다는 것을 알 수 있습니다. 그런 다음 struts.xml 파일로 구성합니다.
<? xml version = "1.0"encoding = "utf-8"?> <! doctype struts public "-// apache 소프트웨어 재단 // dtd struts configuration 2.3 // en" "http://struts.apache.org/dtds/struts-2.3.dtd "> <struts> <package"shop "shop"shop "" 결과적 으로이 패키지의 모든 작업에 유효한-> </span> <global-Results> <result name = "aindex">/web-inf/main/aindex.jsp </result> </global-restults> <!-다른 조치의 구성을 생략 ... </span>-> <!-모든 요청이 실행에 사용됩니다. name = "send">/web-inf/{1}/{2} .jsp </resent> </action> </package> </struts> beans.xml : <bean id = "sendaction" />에서 구성하는 것을 잊지 마십시오.
이 조치에서 두*숫자가 할당되는 이유는 JSP의 주소 작성 방법에 대한 계약이 필요합니다. aindex.jsp의 작문 방법을 살펴 보겠습니다.
<span style = "font-family : microsoft yahei;"> <%@ page language = "java"import = "java.util.*"pageencoding = "utf-8"%> <! doctype html public "-// w3c // w3c // w3c // file = " /public /head.jspf" %> < /head> <!-프레임 본체에는 3+1 페이지-> <frameset rows = "150,*"> "> <frame src ="send_main_top.action " /> <frameset cols ="150,*"> <frame src ="send_main_left.action " /> </frameset> </frameset> </html> </span>
수정 된 aindex.jsp에서 Web-Inf/에서 JSP에 직접 액세스하지 않음을 알 수 있습니다 (우리는 이에 액세스 할 수 없습니다). 우리는 동작을 뛰어 넘어 <a href = "send_main_aindex.action">을 index.jsp의 본문에 작성하여 배경으로 테스트 한 다음 Tomcat을 시작한 다음 링크를 클릭하여 백엔드 홈 페이지에 정상적으로 액세스하십시오.
위의 과정에서 프레임 세트를 사용하여 백엔드 페이지를 작성하는 것은 매우 번거 롭습니다. 각 페이지에 포함되어 있으며 프레임 세트는 개발에 사용되지 않습니다. EasyUi에는 페이지가 하나 뿐이며 모든 요청은 Ajax 요청입니다. 다음으로 EasyUi를 사용하여 백엔드 페이지를 작성하는 방법을 살펴 보겠습니다.
3. EasyUi를 기반으로 한 배경 페이지를 작성하십시오
JQuery EasyUi는 jQuery를 기반으로 한 UI 플러그인 모음이며 jQuery EasyUi의 목표는 웹 개발자가 기능이 풍부하고 아름답게 풍부한 UI 인터페이스를 만드는 데 도움이됩니다. 개발자는 복잡한 JavaScript를 작성할 필요가 없으며 CSS 스타일에 대한 심층적 인 이해가 필요하지 않습니다. 모든 개발자가 알아야 할 모든 개발자는 간단한 HTML 태그입니다.
3.1 EasyUI 관련 구성 요소를 가져옵니다
먼저 프로젝트의 Webroot 디렉토리에서 EasyUI에 필요한 구성 요소를 가져 오며 인터넷에 다운로드가 있습니다. 나는 jquery-easyui-1.3.5를 사용하여 불필요한 것을 제거합니다. 최종 결과는 다음과 같습니다.
3.2 Easyui 환경 구축
방금 추출한 Head.jspf 파일을 열고 EasyUI가 여기에 의존하는 CSS 및 JS를 가져오고 다른 페이지에 JSPF 파일을 소개합니다.
<%@ page language = "java"pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core"c "%> <c : set value ="$ {pagecontext.request.context} "var = <title> <shoping" "shop"/> <shoping " 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.5/thefaultemes//eSy. 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 "> </script> 3.3 배경을위한 프레임 워크 구축
Web-Inf/ Main/ Directory에서 top.jsp, left.jsp 및 right.jsp를 삭제하십시오. 그런 다음 aindex.jsp 페이지를 수정하십시오. 이제 easyui를 사용하여 수행 할 수 있습니다.
<%@ page language = "java"import = "java.util.*"pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtml 4.01 전환 // en"> <html> <head> <%@ include public/head.jspf "%> </head> </head> </head> data-options = "지역 : 'North', 제목 : 'North Title', split : true"style = "height : 100px;"> </div> <div data-options = "region : 'West', title : 'west', split : true"> <!-시스템 메뉴가 여기에 표시됩니다-> <div id = "aa"> <div data-options = "iconcls : 'icon-save" 스타일 = "오버 플로우 : 자동; 패딩 : 10px;"> <h3 style = "color :#0099ff;"> jQuery의 아코디언 </h3> <p> 아코디언은 jQuery의 Easyi 프레임 워크의 일부입니다. 웹 페이지에서 아코디언 구성 요소를 더 쉽게 정의 할 수 있습니다. </p> </div> <div data-options = "iconcls : 'icon-reload', selected : true"style = "padding : 10px;"> content2 </div> <div> content3 </div> </div> </div> <div data-options = "영역 : 'CENTER' '' ' 스타일 = "패딩 : 5px; 배경 : #eee;"> </div> </body> </html>
여기에 많은 <div>는 모두 위의 EasyUi 설명 문서를 참조하고 아래에 게시했습니다. 먼저 전체 레이아웃 레이아웃을 수행하고 필요없는 것을 제거하십시오. 북쪽, 서쪽 및 센터의 세 부분 만 필요합니다.
그런 다음 서쪽 부분의 DIV에 AccordOn 분류의 레이아웃을 추가하고 Head.jspf에 코드를 추가하십시오.
이런 식으로, 우리는 단순히 백엔드 페이지 프레임 워크를 구축했으며, 이후 단계에서는 무언가를 채워야합니다. index.jsp : <a href = "send_main_aindex.action"> 배경 EasyUi 버전에 직접 테스트하여 JSP가 방금 쓴 전송을 찾은 다음 EWB-Inf/Main/Aindex.jsp로 점프하면 다음과 같이 배경 프레임 워크를 올바르게 표시 할 수 있습니다.
이 시점에서 우리는 EasyUI를 사용하여 배경 페이지의 프레임 워크를 성공적으로 구축했습니다.
(참고 : 결국 전체 프로젝트의 소스 코드 다운로드를 제공 할 것입니다! 모두가 수집하거나 공유 할 수 있습니다).
전체 프로젝트의 소스 코드 다운로드 주소 : //www.vevb.com/article/86099.htm
원본 주소 : http://blog.csdn.net/eson_15/article/details/51312490
위는이 기사의 전체 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.