文章出處

   前面兩節，我們整合了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" />。（應該是直接@Controller 之前的博主寫忘記了可能）

        這個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>

 從修改后的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>

之前 用過easy ui 框架 但是我在搭建的時候 304 然后打鉤Disable cache  禁止緩存后 200 但是CSS 出不來 min.js 報錯 。也不能直接引用 在線的jquery 因為我們是easyui

以及使用../../引入

包含原來代碼寫的 總共4種均無法引入但是狀態是200

最后 單獨拎出來 換版本和 用webroot下jquery-1.5的文件夾 都不行

    <script type="text/javascript" src="js/jquery.min.js"></script>
     <script type="text/javascript" src="js/jquery.easyui.min.js"></script> 
     <script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script> 

    <link rel="stylesheet"  href="css/icon.css" type="text/css"/> 
    <link rel="stylesheet"  href="css/easyui.css" type="text/css"/>

 

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>

至于easyui 官方文檔 要求 加上個 id 小弟到現在也不明白 我是嘗試 body class="easyui-layout" 和div id="easyui-layout" 里面都加上 希望大神給我留言

  這里的這么多<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成功搭建好了后臺頁面的框架。

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()