移动商城第二篇【页面框架解析】
页面框架管理
当我们访问后台页面的商品index页面时，我们可以发现这么一个页面
可是，他的JSP是非常简单的，我们来看一下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/ecps/console/common/taglibs.jsp"%>
<head>
<title>商品管理</title>
<meta name="heading" content="商品管理"/>
<meta name="menu" content="ItemMgmtMenu"/>
</head>
<body id="main">
<div class="frameL"><div class="menu icon">
<jsp:include page="/ecps/console/common/itemmenu.jsp"/>
</div></div>
<div class="frameR"><div class="content">
</div></div>
</body>明显地，我们看见它用了menu icon这么一个类来修饰，如果我们使用过bootstrap、easyui这么一类的框架的话，那么我们对这些的修饰也就不陌生了！
我们点进去它的包含JSP页面中
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<%@ include file="taglibs.jsp"%>
<head>
<title>商品管理</title>
</head>
<h2><samp class="t03"></samp>商品管理</h2>
<ul class="ul">
<li><a href="${path}/shop/item/list.jsp"><samp class="t05"></samp>商品录入/上下架</a></li>
<li><a href="${path}/shop/item/listAudit.jsp?auditStatus=0&showStatus=1"><samp class="t05"></samp>商品审核</a></li>
<li><a href="${base}/activity/listOfferGroup.do?showStatus=1&labelStatus=4"><samp class="t05"></samp>营销案管理</a></li>
<li><a href="${base}/activity/listAudit.do?auditStatus=0&labelStatus=1"><samp class="t05"></samp>营销案审核</a></li>
<li><a href="${base}/activity/listoffer.do"><samp class="t05"></samp>营销案档次</a></li>
<li><a href="${path}/shop/item/listfeature.jsp"><samp class="t05"></samp>属性管理</a></li>
<li><a href="${path}/shop/item/listbrand.jsp"><samp class="t05"></samp>品牌管理</a></li>
</ul>发现这正是我们的左边菜单栏的数据
那么上边横线的菜单栏从何而来的呢？？？
我们发现项目中有好几个配置文件：
菜单栏的配置文件，该配置文件在Tomcat启动的时候加载的
<?xml version="1.0" encoding="UTF-8"?>
<MenuConfig>
<Displayers>
<Displayer name="Velocity" type="net.sf.navigator.displayer.VelocityMenuDisplayer"/>
</Displayers>
<Menus>
<Menu name="MainMenu" title="首页" page="/shop/mainMenu.jsp" />
<Menu name="ItemMgmtMenu" title="商品管理" page="/shop/item/index.jsp" />
<!--新增-->
<Menu name="studentMenu" title="学生管理" page="/student/index.jsp" />
<!-- 辽宁2期屏蔽该功能 -->
<!-- <Menu name="SimCardMgmtMenu" title="号卡管理" page="/shop/simcard/index.jsp" /> -->
<Menu name="OrderMgmtMenu" title="订单管理" page="/shop/order/index.jsp" />
<Menu name="ValetOrderMgmtMenu" title="代客下单" page="/shop/valetorder/index.jsp" />
<Menu name="EbPtlUserMgmtMenu" title="会员管理" page="/shop/ptlUser/index.jsp" />
<Menu name="RelationShipMgmtMenu" title="合作伙伴管理" page="/shop/relational/index.jsp" />
<Menu name="PaymentMgmtMenu" title="支付管理" page="/shop/payment/index.jsp" />
<Menu name="AdvertisementMenu" title="广告管理" page="/shop/advertisement/index.jsp" />
<!-- 辽宁2期屏蔽该功能 -->
<!-- <Menu name="PromotionMenu" title="促销活动" page="/shop/promotion/index.jsp" /> -->
<Menu name="SystemSet" title="系统配置" page="/shop/contentset/index.jsp" />
<Menu name="permission" title="权限管理" page="/shop/permission/index.jsp" />
<Menu name="reportMenu" title="报表管理" page="/shop/report/index.jsp" />
<Menu name="Logout" title="退出" page="/shop/logout" />
<Menu name="PMS-CHANNEL" title="栏目管理" page="/pms/frame/channel/main.jsp" />
<Menu name="PMS-CONTENT" title="内容管理" page="/pms/frame/content/main.jsp" />
<Menu name="PMS-PUBLISH" title="静态发布" page="/pms/frame/generate/main.jsp" />
<Menu name="PMS-TEMPLATE" title="模版管理" page="/pms/frame/template/main.jsp" />
<Menu name="PMS-SYSTEM" title="PMS管理" page="/pms/frame/system/main.jsp" />
<Menu name="SAMPLE-LOGIN" title="APP-LOGIN" page="/sample/login.jsp" />
<Menu name="SAMPLE-INDEX" title="mainMenu.title" page="/sample/index.jsp" />
</Menus>
</MenuConfig>
<listener>
<listener-class>net.sf.navigator.menu.MenuContextListener</listener-class>
</listener>从另外的配置文件中，我们可以发现他使用了装饰器来修饰我们的JSP页面
<decorators defaultdir="/ecps/console/decorators">
<excludes>
<pattern>*/top10.jsp</pattern>
</excludes>
<decorator name="default" page="default.jsp">
<pattern>/*</pattern>
</decorator>
</decorators>
找到默认的装饰器JSP页面，找到了对应的修饰菜单：
<div class="header">
<jsp:include page="/ecps/console/common/header.jsp"/>
<c:set var="currentMenu" scope="request"><decorator:getProperty property="meta.menu"/></c:set>
<jsp:include page="/ecps/console/common/menu.jsp"/>
</div>
<%@ page language="java" errorPage="/ecps/console/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<%@ include file="taglibs.jsp"%>
<menu:useMenuDisplayer name="Velocity" config="cssHorizontalMenu.vm">
<div class="nav w">
<ul id="nav_m" class="ul">
<menu:displayMenu name="MainMenu"/>
<menu:displayMenu name="ItemMgmtMenu"/>
<menu:displayMenu name="OrderMgmtMenu"/>
<menu:displayMenu name="ValetOrderMgmtMenu"/>
<menu:displayMenu name="PaymentMgmtMenu"/>
<menu:displayMenu name="AdvertisementMenu"/>
<menu:displayMenu name="RelationShipMgmtMenu"/>
<menu:displayMenu name="EbPtlUserMgmtMenu"/>
<menu:displayMenu name="permission"/>
<menu:displayMenu name="SystemSet"/>
<menu:displayMenu name="reportMenu"/>
</ul>
<p></p>
</div>
</menu:useMenuDisplayer>
我们发现该页面包含了taglibs.jsp，taglibs中又有众多的标签引入
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security" %>
<%@ taglib uri="http://www.springmodules.org/tags/commons-validator" prefix="v" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://struts-menu.sf.net/tag" prefix="display" %>
<%@ taglib uri="http://struts-menu.sf.net/tag-el" prefix="menu" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="system" value="/ecps/console"/>
<c:set var="PmsServerPath" value="http://10.1.248.131:8080/pmsV4/pms/main.do"/>
<c:set var="datePattern"><fmt:message key="date.format"/></c:set>
而sitemesh就是我们在web.xml配置的过滤器，它的功能就是用来渲染我们的页面的
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page"%>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>*.do</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>
<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>*.jsp</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>
再次看回我们的index页面，我们可以发现有那么一段代码
<meta name="menu" content="ItemMgmtMenu"/>content和上面的name是一致的…
模拟增加新功能
根据上面我们所看到的，我们在原有的页面上增添新的功能，看看我们的分析是否有错误！
在菜单的配置文件中新增学生管理
<!--新增-->
<Menu name="studentMenu" title="学生管理" page="/student/index.jsp" />随后在修饰器中新增学生管理菜单项
<%--新增！--%>
<menu:displayMenu name="studentMenu"/>接着根据其他的index页面，编写我们学生管理的JSP页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/ecps/console/common/taglibs.jsp"%>
<head>
<title>学生管理</title>
<meta name="heading" content="学生管理"/>
<meta name="menu" content="studentMenu"/>
</head>
<body id="main">
<div class="frameL"><div class="menu icon">
<jsp:include page="/student/studentmenu.jsp"/>
</div></div>
<div class="frameR"><div class="content">
</div></div>
</body>
左侧菜单的JSP
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<%@ include file="../ecps/console/common/taglibs.jsp"%>
<head>
<title>学生管理</title>
</head>
<h2><samp class="t03"></samp>学生管理</h2>
<ul class="ul">
<li><a href="${path}/shop/item/list.jsp"><samp class="t05"></samp>查看成绩</a></li>
</ul>
效果：
如果您觉得这篇文章帮助到了您，可以给作者一点鼓励
