从零搭建项目开发框架-12SiteMesh设计

2017-07-04 本文已影响0人孔垂云

在开发页面之前先讲讲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开发