SSH框架網上商城項目第3戰之應用EasyUI搭建後台頁面框架。本站提示廣大學習愛好者：（SSH框架網上商城項目第3戰之應用EasyUI搭建後台頁面框架）文章只能為提供參考，不一定能成為您想要的結果。以下是SSH框架網上商城項目第3戰之應用EasyUI搭建後台頁面框架正文
後面兩篇，我們整合了SSH而且抽取了service和action部門的接口，可以說根本開辟情況曾經搭建好了，這一節我們搭建一下後台的頁面。我們評論辯論一下兩種搭建方法：基於frameset和基於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" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <!-- 省略…… --> </c:forEach> </body> </html></span>
先撇開body部門的內容不看，由於這都是之前測試用的，抽取JSP頁面是指將一些共有部門抽掏出離開一個新的JSP頁面，然後在以後JSP頁面中包括出去。由於前期項目中確定會引入js、css等文件，假如在每一個jsp頁面都寫的話，會很冗余，所以我們得抽取一個共有的jsp來引入這些文件和其他器械。我們在WebRoot目次下新建一個public文件夾，在外面新建一個head.jspf（jspf表現JSP片斷，供其他JSP頁面包括的）。
<%@ 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>易購商城</title>
<!--
<script type="text/javascript" src=""></script>
<style type="text/css"></style>
--></span>
正文部門重要是包括js和css，由於今朝還沒用到，只是搭建一個框架，等用到了再去失落。<c:set>標簽將${pageContext.request.contextPath }用${shop}來取代，便利書寫。如許今後新的JSP只需包括這個head.jspf便可。我們看一下修正後的index.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> </head> <body> <!-- 省略…… --> </body> </html> </span>
是否是有種面向對象的思惟~
2. 基於frameset搭建後台頁面
2.1 發明成績
模板抽取好了，如今我們開端搭建後台頁面框架了，起首我們應用frameset來做。在WEB-INF目次下新建一個文件夾main用來保留後台的重要頁面，在main中新建四個jsp文件：aindex.jsp、top.jsp、left.jsp和right.jsp。我們的frameset寫在aindex.jsp中，其他三個只是簡略寫一句話用來測試，我們來看看aindex.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> </head> <!-- 框架體，外面包括了3+1個頁面 --> <frameset border="5" rows="150,*"> <frame src="top.jsp" /> <frameset border="5" cols="150,*"> <frame src="left.jsp" /> <frame src="right.jsp" /> </frameset> </frameset> </html></span>
構造很顯著，將頁面分為3塊，上閣下。每一個模塊包括響應的jsp頁面，然後我們在index.jsp的body中寫入<a href="/WEN-INF/main/aindex.jsp">測試到後台</a>，啟動tomcat，發明點擊鏈接是沒法拜訪到後台的。緣由在於WEB-INF目次下的jsp不克不及直接跳轉，須要經由過程Servlet或許Action來跳轉。那沒方法，只能新寫一個跳轉的Action了。
2.2 編寫頁面跳轉的Action
我們起首寫一個Action來完成頁面的跳轉，該Action只是純真的完成頁面跳轉，不處置任何營業邏輯。
/**
* @Description: TODO(此Action用來完成WEB-INF中JSP與JSP要求轉發功效，此Action不處置任何的邏輯)
* @author eson_15
*
*/
public class SendAction extends ActionSupport {
public String execute() {
return "send";
}
}
我們可以看出，SendAction沒有繼續我們之前抽取的BaseAction，只是純真的繼續了ActionSupport。然後我們在struts.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">
<struts>
<package name="shop" extends="struts-default">
<!-- 全局result，對這個package中的一切action有用 --></span>
<global-results>
<result name="aindex">/WEB-INF/main/aindex.jsp</result>
</global-results>
<!-- 省略其他action的設置裝備擺設……</span> -->
<!-- 用來完成體系 要求轉發的action,一切的要求都交給execute-->
<action name="send_*_*" class="sendAction">
<result name="send">/WEB-INF/{1}/{2}.jsp</result>
</action>
</package>
</struts>
別忘了在beans.xml中設置裝備擺設：<bean id="sendAction" class="cn.it.shop.action.SendAction" />。
這個action中之所以配兩個*號是為了便於拜訪WEB-INF/*/*.jsp，這須要在jsp中商定好地址的寫法了。上面我們看一下aindex.jsp中的寫法：
<span > <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> </head> <!-- 框架體，外面包括了3+1個頁面 --> <frameset border="5" rows="150,*"> <frame src="send_main_top.action" /> <frameset border="5" cols="150,*"> <frame src="send_main_left.action" /> <frame src="send_main_right.action" /> </frameset> </frameset> </html></span>
從修正後的aindex.jsp中可以看出，我們不直接拜訪WEB-INF/下的jsp（我們也拜訪不了），我們經由過程Action去跳轉，如許我們在index.jsp的body中寫入<a href="send_main_aindex.action">測試到後台</a>，然後啟動tomcat，便可以點開鏈接正常拜訪後台主頁面了。
從下面應用frameset搭建後台頁面的進程來看，照樣挺費事的，它是一個個頁面包括出去的，開辟中也不會用frameset，而easyUI只要一個頁面，一切的要求都是AJAX要求，接上去我們看一下若何應用easyUI來搭建後台頁面。
3. 基於EasyUI搭建後台頁面
jQuery EasyUI是一組基於jQuery的UI插件聚集體，而jQuery EasyUI的目的就是贊助web開辟者更輕松的打造出功效豐碩而且雅觀的UI界面。開辟者不須要編寫龐雜的javascript，也不須要對css款式有深刻的懂得，開辟者須要懂得的只要一些簡略的html標簽。
3.1 導入EasyUI相干組件
我們先在工程中的WebRoot目次下導入EasyUI所須要的組件，網上都有下載，我用的是jquery-easyui-1.3.5，去失落一些不須要的器械，最初的成果以下：
3.2 搭建EasyUI的情況
我們翻開方才抽掏出來的head.jspf文件，在這裡導入EasyUI所依附的css和js，其他頁面引入該jspf文件便可直接引入了EasyUI所依附的css和js了：
<%@ 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>易購商城</title>
<!-- 上面是easyui的情況 -->
<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"></script>
3.3 搭建後台的框架
將WEB-INF/main/目次下的top.jsp、left.jsp和right.jsp都刪失落，由於如今用不上了，然後修正aindex.jsp頁面，如今可使用EasyUI來做了：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> </head> <body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" ></div> <div data-options="region:'west',title:'West',split:true" > <!-- 此處顯示的是體系菜單 --> <div id="aa" class="easyui-accordion" > <div title="Title1" data-options="iconCls:'icon-save'" > <h3 >Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Title2" data-options="iconCls:'icon-reload',selected:true" >content2</div> <div title="Title3">content3</div> </div> </div> <div data-options="region:'center',title:'center title'" ></div> </body> </html>
這裡的這麼多<div>都是參照下面誰人EasyUI的解釋文檔，我鄙人面貼出來。先輩行全部layout結構，去失落我們不須要的，我們只需north、west和center三部門：
再在west部門的div中加上accordon分類的結構，將代碼添加到head.jspf中：
如許我們就簡略搭建好了後台的頁面框架了，前期只需往外面填入器械就好了。我們在index.jsp中測試一下：<a href="send_main_aindex.action">直接到後台EasyUI版</a>，如許jsp就會找我們方才寫好的SendAction然後跳轉到EWB-INF/main/aindex.jsp，就可以准確顯示後台框架了，以下：
至此，我們應用EasyUI勝利搭建好了後台頁面的框架。
（注：到最初我會供給全部項目標源碼下載！迎接年夜家珍藏或分享）
全部項目標源碼下載地址：http://www.jb51.net/article/86099.htm
原文地址：http://blog.csdn.net/eson_15/article/details/51312490
以上就是本文的全體內容，願望能給年夜家一個參考，也願望年夜家多多支撐。
