移动商城第二篇【页面框架解析】
2017-08-26 10:38
211 查看
页面框架管理
当我们访问后台页面的商品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>
效果:
相关文章推荐
- 移动商城第二篇【页面框架解析】
- 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
- 尚硅谷Android项目之_硅谷商城项目全套源码解析(二、主框架搭建)
- 搭建jQuery Mobile移动应用页面的3个相关框架文件
- 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
- Sword框架解析——知识采集流程页面初始化
- SpringMVC 第二篇【基于注册的框架解析】
- iOS开发 商城中商品详情 ,评价,商品页面继承框架
- 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
- 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签
- 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
- iScroll框架解析——Android 设备页面内 div(容器,非页面)overflow:scroll; 失效解决(转)
- 移动App开发 MUI框架 利用软键盘的搜索键实现页面跳转并传值
- SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架
- 如何使frameset框架的页面通过滚动条整体移动
- 移动web前端开发,页面局部滑动之iscroll框架
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- Android滑动菜单框架完全解析,教你如何一分钟实现滑动菜单特效
- Android 开源框架Universal-Image-Loader完全解析(二)--- 图片缓存策略详解
- jsp页面EL表达式不被解析问题总结