页面的基本结构往往是固定的,统一的头部、尾部和菜单 各个页面基本一致,变化的往往是页面的具体内容部分.
这样,布局(layout)功能的使用,就能大大减化前端页面的复杂性了。这里简单介绍一下如何使用velocity框架来实现页面的布局。
注意两个bean:velocityConfig, viewResolver.
velocityConfig的配置
<!-- velocity 配置-->
<bean id= "velocityConfig"
class= "org.springframework.web.servlet.view.velocity.VelocityConfigurer">
<property name= "resourceLoaderPath">
<value>WEB-INF/view</value>
</property>
<property name= "velocityProperties">
<props>
<prop key= "input.encoding">utf-8</prop>
<prop key= "output.encoding">utf-8</prop>
</props>
</property>
</bean>
viewResolver的配置
<bean id= "viewResolver"
class= "org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver">
<property name= "cache" value= "true"/>
<property name= "prefix" value= "/"/>
<property name= "suffix" value= ".vm"/>
<property name= "contentType">
<value>text/html;charset=utf-8</value>
</property>
<property name="toolboxConfigLocation">
<value>/WEB-INF/toolbox.xml</value>
</property>
<property name="layoutUrl" value="layout/layout.vm" />
<property name="allowSessionOverride" value="true"/>
<property name="allowRequestOverride" value="true"/>
<property name="exposeSessionAttributes" value="true"/>
<property name="requestContextAttribute" value="rc"/>
<property name="exposeRequestAttributes" value="true"/>
</bean>
- 当我们不使用velocity的布局功能时,我们一般会把viewResolver的class配置为:
org.springframework.web.servlet.view.velocity.VelocityViewResolver,当需要使用布局功能的时候,viewResolver的class需要配置为:
org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver,顾名思义,从命名中我们就能看出来这个viewResolver是支持layout功能的。 - 另外一点不同的是,这里多了一个layoutUrl的属性配置:, 这个配置是设置你的layout文件的存在路径,需要注意的是,这个路径不是相对于webapp路径来的,而是相对于velocityConfig配置中的resourceLoaderPath属性配置的路径(resourceLoaderPath的路径是相对于webapp的路径)。
一般情况下,我们的layout页面大概长什么样子吧:
<body>
<div class="content">
#parse("/common/header.vm")
<div class="content-info">
#parse("/common/leftMenu.vm")
<div class="content-main">
$screen_content
</div>
</div>
#parse("common/footer.vm")
</div>
</body>
解释一下:如果你在处理某个请求时返回了a.vm模板,那么最终返回的页面是:将a.vm模板的内容填充layout页面的$screen_content占位符的内容,然后再将整个填充后的页面返回给用户。如果有兴趣你可以看一下大致的实现原理,其实很简单,就是先调用velocity引擎渲染请求返回的模板,将该渲染结果(一个String类型的字符串)作为一参数传递给layout页面,参数名称就是screen_content,然后再次调用引擎渲染layout页面,这样就会把该screen_content参数对应的值作为页面的一部分渲染出来了,从而实现整个页面的布局功能。
有些页面不需要使用layout功能
#set($layout="layout/blank.vm")