`

velocity的布局

 
阅读更多

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

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

 

Xml代码  收藏代码
  1. <!-- velocity 配置-->  
  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>  

 

 

 

         接下来看看viewResolver的配置,在使用布局时,一般会配置如下:

 

Xml代码  收藏代码
  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>  

 

 

         如果你配置过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的路径)。

 

web.xml

<servlet>
	    <servlet-name>velocity</servlet-name>
	    <servlet-class>org.apache.velocity.tools.view.servlet.VelocityLayoutServlet</servlet-class>
	    <load-on-startup>1</load-on-startup>
	  </servlet>
	  <servlet-mapping>
	    <servlet-name>velocity</servlet-name>
	    <url-pattern>*.vm</url-pattern>
	  </servlet-mapping>

 

 

  测试的controller

  

@Controller
@RequestMapping(value = "/test/")
public class TestController {

@RequestMapping("{module}")
    public String page1(@PathVariable String module){
		System.out.println("module"+module);
		return module;
    }
	
	
	@RequestMapping("{module}/{name}")
    public String page2(@PathVariable String module,@PathVariable String name){
		System.out.println("module"+module);
		System.out.println("name:"+name);
		 return module+"/"+name;
		
    }
	
	
	@RequestMapping("{module}/{name}/{item}")
    public String page3(@PathVariable String module,@PathVariable String name, @PathVariable String item){
		System.out.println("module"+module);
		System.out.println("name:"+name);
		System.out.println("item:"+item);
		return module+"/"+name+"/"+item;
		
    }

}

 


 

  layout.vm写法



 

 效果:

 



 
 

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

 

Html代码  收藏代码
  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>  

 

 

解释一下:如果你在处理某个请求时返回了a.vm模板,那么最终返回的页面是:将a.vm模板的内容填充layout页面的$screen_content占位符的内容,然后再将整个填充后的页面返回给用户。如果有兴趣你可以看一下大致的实现原理,其实很简单,就是先调用velocity引擎渲染请求返回的模板,将该渲染结果(一个String类型的字符串)作为一参数传递给layout页面,参数名称就是screen_content,然后再次调用引擎渲染layout页面,这样就会把该screen_content参数对应的值作为页面的一部分渲染出来了,从而实现整个页面的布局功能。

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

 

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

 

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

 

Html代码  收藏代码
  1. $screen_content  

 

  • 大小: 19.9 KB
  • 大小: 12.7 KB
  • 大小: 9.8 KB
分享到:
评论
Global site tag (gtag.js) - Google Analytics