轉自: http://blog.csdn.net/eson_15/article/details/51312490
前面兩節,我們整合了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>
<%@ 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>
<%@ 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>
<%@ 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>
<%@ 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";
- }
- }
/**
* @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>
<?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 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>
- <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>
<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>
<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標籤。(EasyUI下載地址)
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>
<%@ 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" style="height:100px;"></div>
- <div data-options="region:'west',title:'West',split:true" style="width:200px;">
- <!-- 此處顯示的是系統菜單 -->
- <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
- <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
- <h3 style="color:#0099FF;">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" style="padding:10px;">content2</div>
- <div title="Title3">content3</div>
- </div>
- </div>
- <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
- </body>
- </html>
<%@ 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" style="height:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:200px;">
<!-- 此處顯示的是系統菜單 -->
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">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" style="padding:10px;">content2</div>
<div title="Title3">content3</div>
</div>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></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://blog.csdn.net/column/details/str2hiberspring.html
整個項目的源碼下載地址:http://blog.csdn.net/eson_15/article/details/51479994