移動商城第二篇【頁面框架解析】

時間 2019-11-08

原文原文鏈接

頁面框架管理

當咱們訪問後臺頁面的商品index頁面時，咱們能夠發現這麼一個頁面css

但是，他的JSP是很是簡單的，咱們來看一下：html

<%@ 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這麼一類的框架的話，那麼咱們對這些的修飾也就不陌生了！java

咱們點進去它的包含JSP頁面中web

<%@ 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>

發現這正是咱們的左邊菜單欄的數據spring

那麼上邊橫線的菜單欄從何而來的呢？？？sql

咱們發現項目中有好幾個配置文件：bootstrap

菜單欄的配置文件，該配置文件在Tomcat啓動的時候加載的ruby

<?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頁面markdown

<decorators defaultdir="/ecps/console/decorators">
    <excludes>
        <pattern>*/top10.jsp</pattern>

    </excludes> 
    <decorator name="default" page="default.jsp">
        <pattern>/*</pattern>
    </decorator>
</decorators>

找到默認的裝飾器JSP頁面，找到了對應的修飾菜單：app

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