前面两节,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站整合了SSH而且抽取了service和action限制的接口,可以说根蒂开发情况曾经搭建好了,这一节银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站搭建一下后台的页面。银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站讨论一下两种搭建格事务署:基于frameset和基于easyUI。着末银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站会运用easyUI来开发。

  1. 抽取公共JSP页面

  银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站先来看一下当前的jsp页面:

XML/HTML代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  4. <html>    
  5.   <head>    
  6.     
  7.   </head>    
  8.       
  9.   <body>    
  10.     <!-- 省略…… -->    
  11.     </c:forEach>    
  12.   </body>    
  13. </html>  

   先撇开body限制的实质不看,由于这都是之前测试用的,抽取JSP页面是指将一些共有限制抽取出来到一个新的JSP页面,然后正正在当前JSP页面中包含进来。由于后期项目中肯定会引入js、css等文件,如果正正在每个jsp页面都写的话,会很冗余,以是银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站得抽取一个共有的jsp来引入这些文件以及其他东西。银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站正正在WebRoot目录下新建一个public文件夹,正正在里面新建一个head.jspf(jspf表示JSP片断,供其他JSP页面包含的)。

XML/HTML代码
  1. <%@ page language="java" pageEncoding="UTF-8"%>    
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
  3. <c:set value="${pageContext.request.contextPath }" var="shop" />    
  4. <title>易购商城</title>    
  5. <!--     
  6. <script type="text/javascript" src=""></script>    
  7. <style type="text/css"></style>    
  8.  -->  

  注释限制浸要是包含js和css,由于目前还没用到,只是搭建一个框架,等用到了再去掉。<c:set>标签将${pageContext.request.contextPath }用${shop}来替代,便当书写。这样以后新的JSP只要包含这个head.jspf即可。银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站看一下修改后的index.jsp:

XML/HTML代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  3. <html>    
  4.   <head>    
  5.     <%@ include file="/public/head.jspf" %>    
  6.   </head>    
  7.       
  8.   <body>    
  9.       <!-- 省略…… -->    
  10.   </body>    
  11. </html>   

  是不是有种面向对象的思想~

  2. 基于frameset搭建后台页面

  2.1 发现问题

   模板抽取好了,现正正在银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站开始搭建后台页面框架了,起首银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站运用frameset来做。正正在WEB-INF目录下新建一个文件夹main用来保存后台的浸要页面,正正在main中新建四个jsp文件:aindex.jsp、top.jsp、left.jsp和right.jsp。银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站的frameset写正正在aindex.jsp中,其他三个只是简单写一句话用来测试,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站来看看aindex.jsp:

XML/HTML代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  3. <html>    
  4. <head>    
  5.     <%@ include file="/public/head.jspf" %>    
  6. </head>    
  7. <!-- 框架体,里面包含了3+1个页面 -->    
  8. <frameset border="5" rows="150,*">    
  9.     <frame src="top.jsp" />    
  10.     <frameset border="5" cols="150,*">    
  11.         <frame src="left.jsp" />    
  12.         <frame src="right.jsp" />    
  13.     </frameset>    
  14. </frameset>      
  15.     
  16. </html>  

  构制很明显,将页面分为3块,上控制。每个模块包含相应的jsp页面,然后银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站正正在index.jsp的body中写入<a href="/WEN-INF/main/aindex.jsp">测试到后台</a>,启动tomcat,发现点击链接是无法拜访到后台的。途理正正在于WEB-INF目录下的jsp不行直接跳转,需要通过Servlet或者Action来跳转。那没观点,只可新写一个跳转的Action了。

  2.2 编写页面跳转的Action

   银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站起首写一个Action来完成页面的跳转,该Action只是单纯的实现页面跳转,不治理任何商业逻辑。

Java代码
  1. /**  
  2.  * @Description: TODO(此Action用来完成WEB-INF中JSP与JSP请求转发功能,此Action不治理任何的逻辑)  
  3.  * @author eson_15  
  4.  *  
  5.  */    
  6. public class SendAction extends ActionSupport {    
  7.         
  8.     public String execute() {    
  9.         return "send";    
  10.     }    
  11. }    

   银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站可以看出,SendAction没有继承银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站之前抽取的BaseAction,只是单纯的继承了ActionSupport。然后银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站正正在struts.xml文件中装备一下:

XML/HTML代码
  1. <?xml version="1.0" encoding="UTF-8" ?>    
  2. <!DOCTYPE struts PUBLIC    
  3.     "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"    
  4.     "http://struts.apache.org/dtds/struts-2.3.dtd">    
  5.     
  6. <struts>    
  7.     <package name="shop" extends="struts-default">    
  8.     
  9.                 <!-- 全事务署result,对这个package中的所有action有效 --></span>     
  10.         <global-results>    
  11.             <result name="aindex">/WEB-INF/main/aindex.jsp</result>    
  12.         </global-results>    
  13.     
  14.         <!-- 省略其他action的装备……</span> -->    
  15.             
  16.         <!-- 用来完成编制 请求转发的action,所有的请求都交给execute-->    
  17.         <action name="send_*_*" class="sendAction">    
  18.             <result name="send">/WEB-INF/{1}/{2}.jsp</result>    
  19.         </action>    
  20.     </package>    
  21.     
  22. </struts>    

  别忘了正正在beans.xml中装备:<bean id="sendAction" class="cn.it.shop.action.SendAction" />。

   这个action中之以是配两个*号是为了便于拜访WEB-INF/*/*.jsp,这需要正正在jsp中商定好地址的写法了。下面银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站看一下aindex.jsp中的写法:

XML/HTML代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  3. <html>    
  4. <head>    
  5.     <%@ include file="/public/head.jspf" %>    
  6. </head>    
  7. <!-- 框架体,里面包含了3+1个页面 -->    
  8. <frameset border="5" rows="150,*">    
  9.     <frame src="send_main_top.action" />    
  10.     <frameset border="5" cols="150,*">    
  11.         <frame src="send_main_left.action" />    
  12.         <frame src="send_main_right.action" />    
  13.     </frameset>    
  14. </frameset>      
  15.     
  16. </html>  

   从修改后的aindex.jsp中可以看出,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站不直接拜访WEB-INF/下的jsp(银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站也拜访不了),银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站通过Action去跳转,这样银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站正正在index.jsp的body中写入<a href="send_main_aindex.action">测试到后台</a>,然后启动tomcat,就可以点开链接正常拜访后台主页面了。

   从上面运用frameset搭建后台页面的历程来看,还是挺郁闷的,它是一个个页面包含进来的,开发中也不会用frameset,而easyUI只有一个页面,所有的请求都是AJAX请求,接下来银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站看一下怎样运用easyUI来搭建后台页面。

  3. 基于EasyUI搭建后台页面

  jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮帮web开发者更废弛的打制出功能充裕而且场面的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深化的了解,开发者需要了解的只有一些简单的html标签。(EasyUI下载地址)

  3.1 导入EasyUI相干组件

  银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站先正正在工程中的WebRoot目录下导入EasyUI所需要的组件,网上都有下载,我用的是jquery-easyui-1.3.5,去掉一些不需要的东西,着末的结果如下:

SSH电商项目实战之三:运用EasyUI搭建后台页面框架

  3.2 搭建EasyUI的情况

   银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站打开刚刚抽取出来的head.jspf文件,正正在这里导入EasyUI所依赖的css和js,其他页面引入该jspf文件即可间接引入了EasyUI所依赖的css和js了:

XML/HTML代码
  1. <%@ page language="java" pageEncoding="UTF-8"%>    
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
  3. <c:set value="${pageContext.request.contextPath }" var="shop" />    
  4. <title>易购商城</title>    
  5.     
  6. <!-- 下面是easyui的情况 -->    
  7. <link rel="stylesheet" href="${shop }/jquery-easyui-1.3.5/themes/icon.css" type="text/css"></link>    
  8. <link rel="stylesheet" href="${shop }/jquery-easyui-1.3.5/themes/default/easyui.css" type="text/css"></link>    
  9. <script type="text/javascript" src="${shop }/jquery-easyui-1.3.5/jquery.min.js"></script>    
  10. <script type="text/javascript" src="${shop }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>    
  11. <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来做了:

XML/HTML代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  3. <html>    
  4. <head>    
  5.     <%@ include file="/public/head.jspf" %>    
  6. </head>    
  7.     
  8.     <body class="easyui-layout">    
  9.         <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>       
  10.         <div data-options="region:'west',title:'West',split:true" style="width:200px;">    
  11.             <!-- 此处显现的是编制菜单 -->    
  12.             <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">       
  13.                 <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">       
  14.                     <h3 style="color:#0099FF;">Accordion for jQuery</h3>       
  15.                     <p>Accordion is a part of easyui framework for jQuery.         
  16.                     It lets you define your accordion component on web page more easily.</p>       
  17.                 </div>       
  18.                 <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">content2</div>       
  19.                 <div title="Title3">content3</div>       
  20.             </div>       
  21.         </div>       
  22.         <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>       
  23.     </body>      
  24.     
  25. </html>    

  这里的这么众<div>都是参照上面那个EasyUI的说明文档,我正正在下面贴出来。先辈行整体layout布事务署,去掉银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站不需要的,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站只要north、west和center三限制:

SSH电商项目实战之三:运用EasyUI搭建后台页面框架

  再正正在west限制的div中加上accordon分类的布事务署,将代码添加到head.jspf中:

SSH电商项目实战之三:运用EasyUI搭建后台页面框架

  这样银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站就简单搭建好了后台的页面框架了,后期只要往里面填入东西就行了。银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站正正在index.jsp中测试一下:<a href="send_main_aindex.action">直接到后台EasyUI版</a>,这样jsp就会找银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站刚刚写好的SendAction然后跳转到EWB-INF/main/aindex.jsp,就能正确显现后台框架了,如下:

SSH电商项目实战之三:运用EasyUI搭建后台页面框架

   至此,银河文娱有哪些网站_云顶文娱场7610_bet9九州 网站运用EasyUI成功搭建好了后台页面的框架。

 转自:倪升武的CSDN博客

除非特别注明,鸡啄米文章均为原创
转载请标明本文地址:http://www.sygjbus.cn/software/762.html
2017年9月6日
作家:鸡啄米 分类:软件开发 浏览: 评论:1