Velocity布局(layout)介绍

xiaoxiao2021-02-28  100

对于一个WEB应用来说,页面的基本结构往往是固定的,页面中的很多部分,例如页面统一的头部、尾部和菜单,我们一般是不太需要变化的,各个页面基本一致,变化的往往是页面的具体内容部分,这样,布局(layout)功能的使用,就能大大减化前端页面的复杂性了。这里简单介绍一下如何使用velocity框架来实现页面的布局。

         我们知道,要在spring框架中配置velocity,一般需要配置两个bean,一个是velocityConfig, 别一个则是viewResolver。先来看velocityConfig的配置,基本配置如下所示,这里和不使用布局的配置方式没有任何差别。

Xml代码   <!-- 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>   <!-- 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的配置,在使用布局时,一般会配置如下:

Xml代码   <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>   <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,你会发现与你之前的配置主要有两个地方的差别:

    1.  一般情况下,当我们不使用velocity的布局功能时,我们一般会把viewResolver的class配置为:

org.springframework.web.servlet.view.velocity.VelocityViewResolver,当需要使用布局功能的时候,viewResolver的class需要配置为:

org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver,顾名思义,从命名中我们就能看出来这个viewResolver是支持layout功能的。

    2.  另外一点不同的是,这里多了一个layoutUrl的属性配置:<property name="layoutUrl" value="layout/layout.vm" />, 这个配置是设置你的layout文件的存在路径,需要注意的是,这个路径不是相对于webapp路径来的,而是相对于velocityConfig配置中的resourceLoaderPath属性配置的路径(resourceLoaderPath的路径是相对于webapp的路径)。

 

看看一般情况下,我们的layout页面大概长什么样子吧:

 

Html代码   <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>   <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参数对应的值作为页面的一部分渲染出来了,从而实现整个页面的布局功能。

这样,我们就简单介绍了如何简单配置和使用velocity的layout功能了,这里你可以会有疑问了,如果我某个页面需要使用不同的layout页面,甚至我有些页面不需要使用layout功能,该怎么办?其实很简单,我们前面viewResolver配置中,配置的只是默认的layout页面的地址,如果你要使用不同的layout页面,只需在你要返回的页面中如下简单设置一下即可:

 

Html代码   #set($layout = "/layout/layout2.vm")   #set($layout = "/layout/layout2.vm") 

         这样,我们就强制我们的这个页面使用的是layout2.vm这个页面布局。按照这个思路,如果我在某个特殊的页面,不想使用layout功能了,我们可以再指定另外一个layout页面,只不过这个layout页面内容比较特殊,它没有一般布局页面中有的那些页面统一的头部、尾部和菜单,只有如下所示的一行代码就可以了:

 

Html代码   $screen_content   $screen_content 

   由于暂时没找到如何在某个页面中,关闭页面的layout功能,所以想到了上面的方式投机取巧地实现了类似的功能,如果大家有好的方式可以指出。

 

转载请注明原文地址: https://www.6miu.com/read-32941.html

最新回复(0)