zoukankan      html  css  js  c++  java
  • 移动商城第二篇【页面框架解析】

    页面框架管理

    当我们访问后台页面的商品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>
    
    

    效果:

    这里写图片描述


  • 相关阅读:
    Java垃圾回收机制
    Java学习笔记——反射
    GitHub中有关已建仓库及上传项目文件的删除
    LaTex简历排版
    JavaSwing输入对话框,点击取消抛出异常的解决方法
    map的遍历方式(使用Junit测试)
    eclipse faild to creat the java Virtual Machine的解决办法
    XML消息解析_php
    [转载]android常用的API接口调用
    算法练习之:Doubles
  • 原文地址:https://www.cnblogs.com/zhong-fucheng/p/7554338.html
Copyright © 2011-2022 走看看