在开发页面之前先讲讲SiteMesh。
SiteMesh 是一个网页布局和修饰的框架，利用它可以将网页的内容和页面结构分离，以达到页面结构共享的目的。其中涉及到两个名词： 装饰页面(decorator page)和 "被装饰页面(Content page)" , 即 SiteMesh通过对Content Page的装饰，最终得到页面布局和外观一致的页面，并返回给客户。
下面是一个常见的页面布局图：
页面布局.png
一个常见页面分为四块：
- Header：放置系统标题、注销按钮等
- Menu：放置菜单
- Footer：放置版权信息等
- Content：核心内容
还有两个看不到的，引用的CSS和JS，就是说完成一个页面其中有5块是不用变的，每次只需要完成Content的内容即可，剩下的由修饰框架完成即可。
没有SiteMesh的时候可以定义公共的jsp，然后依次include过来即可，这样会很麻烦，而且还会出现该外层结构，导致所有页面都需要跟着调整的风险。
SiteMesh3的配置
1、pom.xml添加依赖
<!--sitemesh-->
<dependency>
<groupId>org.sitemesh</groupId>
<artifactId>sitemesh</artifactId>
<version>${sitemesh.version}</version>
</dependency>
2.web.xml添加配置
<!-- 设置SiteMesh页面框架布局 -->
<filter>
<filter-name>sitemesh3</filter-name>
<filter-class>org.sitemesh.config.ConfigurableSiteMeshFilter</filter-class>
</filter>
<!--设置sitemesh映射-->
<filter-mapping>
<filter-name>sitemesh3</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>FORWARD</dispatcher>
<dispatcher>ERROR</dispatcher>
</filter-mapping>
这一段主要是配置SiteMesh的过滤器
3、配置SiteMesh
<?xml version="1.0" encoding="UTF-8"?>
<sitemesh>
<!--默认情况下，sitemesh 只对 HTTP 响应头中 Content-Type 为 text/html 的类型进行拦截和装饰，我们可以添加更多的 mime 类型-->
<mime-type>text/html</mime-type>
<!-- 指明满足“/*”的页面，将被“/WEB-INF/views/decorators/decorator.jsp”所装饰 -->
<mapping path="/*" decorator="/WEB-INF/views/plat/decorators/decorator.jsp" />
<!-- 指明满足“/login”的页面，将被排除，不被装饰 -->
<mapping path="/login.htm" exclue="true" />
</sitemesh>
这样除了login.htm其余都会被SiteMesh拦截，进行装饰。
4、装饰页面代码
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
<meta charset="utf-8"/>
<meta name="description" content="${webTitle}"/>
<title><sitemesh:write property='title'/> - ${webTitle}</title>
<%@include file="../common/styles.jspf" %>
<sitemesh:write property='head'/>
</head>
<body class="no-skin">
<%@ include file="../common/header.jspf" %>
<div class="main-container" id="main-container">
<%@ include file="../common/menu.jspf" %>
<div class="main-content">
<div class="main-content-inner">
<sitemesh:write property='body'/>
</div>
</div>
</div>
<%@include file="../common/scripts.jspf" %>
</body>
</html>
这是装饰页面的代码，下面讲讲几个核心点：
1、<meta name="renderer" content="webkit">加上这句话，如果用的是360浏览器，就会默认使用高速模式
2、<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>这句话可以识别设备的种类
3、<sitemesh:write property='title'/>这句话的作用就是把被装饰页面内的title标签内的内容取过来填充至这地方
4、<sitemesh:write property='body'/>把被装饰页面内的body里面的内容取过来填充至这地方
5、<%@include file="../common/styles.jspf" %>引用公共的资源
6、${webTitle}这个值是怎么来的呢？这是通过servlet-context.xml配置得来
5、servlet-context.xml增加页面引用参数
在jsp页面也需要引用一些公共参数，这时候就需要直接获取，用EL直接在页面展示出来。
<!--读取配置文件-->
<context:property-placeholder ignore-unresolvable="true" location="classpath:/application.properties"/>
<!-- 默认的注解映射的支持，自动注册DefaultAnnotationHandlerMapping和AnnotationMethodHandlerAdapter -->
<mvc:annotation-driven/>
<!-- 设置Controller注解，及json格式解析器-->
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<bean id="jacksonMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
<!-- 设置请求适配器 -->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
</bean>
<!-- 设置静态资源文件夹 -->
<mvc:resources mapping="/assets/**" location="/assets/"/>
<!-- 设置全局公共变量 -->
<bean id="viewResolver" abstract="true">
<property name="attributes">
<props>
<prop key="versionNo">${versionNo}</prop>
<prop key="imageServer">${imageServer}</prop>
<prop key="staticServer">${staticServer}</prop>
<prop key="dynamicServer">${dynamicServer}</prop>
<prop key="webTitle">${webTitle}</prop>
</props>
</property>
</bean>
<!--设置视图解析器及视图对应文件位置和后缀名，当前设置jsp -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" parent="viewResolver">
<property name="prefix" value="/WEB-INF/views/"/>
<property name="suffix" value=".jsp"/>
</bean>
<!-- 设置注解的扫描包名t -->
<mvc:default-servlet-handler/>
<context:component-scan base-package="com.critc.*.*.controller">
<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
这里面定义了viewResolver，可以获取配置文件里面的参数
这里面还定义SpringMVC的消息转换方式，利用json来进行转换，所以还需要配置Json的依赖,jackson
<!-- Jackson -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>${jackson.version}</version>
</dependency>
下一节讲UI开发
网友评论