Velocity布局（layout）介绍

迈不过友情╰ 2022-06-12 00:15 382阅读 0赞

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

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

Xml代码   ![收藏代码][icon_star.png]

1.    
2.  **<bean** id= "velocityConfig"  
3.   class= "org.springframework.web.servlet.view.velocity.VelocityConfigurer"**>**  
4.           **<property** name= "resourceLoaderPath"**>**  
5.                     **<value>**WEB-INF/view**</value>**  
6.           **</property>**  
7.           **<property** name= "velocityProperties"**>**  
8.                     **<props>**  
9.                              **<prop** key= "input.encoding"**>**utf-8**</prop>**  
10.                             **<prop** key= "output.encoding"**>**utf-8**</prop>**  
11.                    **</props>**  
12.          **</property>**  
13. **</bean>**

<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代码   ![收藏代码][icon_star.png]

1.  **<bean** id= "viewResolver"  
2.  class= "org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver"**>**  
3.           **<property** name= "cache" value= "true"**/>**  
4.           **<property** name= "prefix" value= "/"**/>**  
5.           **<property** name= "suffix" value= ".vm"**/>**  
6.           **<property** name= "contentType"**>**  
7.                     **<value>**text/html;charset=utf\-8**</value>**  
8.           **</property>**  
9.           **<property** name="toolboxConfigLocation"**>**  
10.                    **<value>**/WEB-INF/toolbox.xml**</value>**  
11.          **</property>**  
12.          **<property** name="layoutUrl" value="layout/layout.vm" **/>**  
13.          **<property** name="allowSessionOverride" value="true"**/>**  
14.          **<property** name="allowRequestOverride" value="true"**/>**  
15.          **<property** name="exposeSessionAttributes" value="true"**/>**  
16.          **<property** name="requestContextAttribute" value="rc"**/>**  
17.          **<property** name="exposeRequestAttributes" value="true"**/>**  
18. **</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代码   ![收藏代码][icon_star.png]

1.  **<body>**  
2.          **<div** class="content"**>**  
3.              \#parse("/common/header.vm")  
4.              **<div** class="content-info"**>**  
5.                  \#parse("/common/leftMenu.vm")  
6.                  **<div** class="content-main"**>**  
7.                      $screen\_content  
8.                  **</div>**  
9.              **</div>**  
10.             \#parse("common/footer.vm")  
11.         **</div>**  
12. **</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代码   ![收藏代码][icon_star.png]

1.  \#set($layout = "/layout/layout2.vm")

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

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

Html代码   ![收藏代码][icon_star.png]

1.  $screen\_content

$screen_content

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

[icon_star.png]: /images/20220612/7ae8335d02d840f3bc2268c71e9f4d20.png