zoukankan      html  css  js  c++  java
  • Velocity的layout功能

    一、从VelocityViewServlet到VelocityLayoutServlet 

    使用Velocity开发web应用时,需要在web.xml中配置一个Velocity提供的VelocityViewServlet接受处理对velocity模板(即vm文件)的forward访问。VelocityViewServlet负责将设置在request中的attribute“读出”和模板文件进行merge形成最终的页面,向response输出显示在用户电脑上。 

    VelocityViewServlet是一个简单的易使用的。但是只要把web.xml中VelocityViewServlet换成VelocityLayoutServlet,并配置上2,3句话,将具有页面简单Layout的功能。而这个功能其实非常强大。 

    二、VelocityLayoutServlet可以。。。 

    VelocityLayoutServlet可以用来简化velocity下的页面布局开发。 
    使用VelocityLayoutServlet,可以使当forward到一个页面时,能把自动把该页面作为一个页面布局的一部分整体显示出来。比如访问用户资料页面,能够自动把网站的头,尾等自动也输出显示处理。 

    三、VelocityLayoutServlet使用按步就班 

    系统中有若干页面布局是这样设定的:头部(header),左侧菜单区域(sub),中右侧页面内容部(main),底部(footer)。 

    1、 

    创建文件[webapp home]/vm/layout/layout.vm如下: 


    Java代码  收藏代码
    1.    
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
    4.     <head>  
    5.     ...省略...  
    6.     </head>  
    7.     <body>  
    8.         <div id="header>#parse('vm/layout/header.vm')</div>  
    9.         <div id="content">  
    10.             <div id="sub">#parse($sub)</div>  
    11.             <div id="main">$screen_content</div>  
    12.         </div>  
    13.         <div id="footer">#parse('vm/layout/footer.vm')</div>  
    14.     </body>  
    15. </html>  


    $screen_content相当于一个占位符,被forward的目标页面内容将替代该处内容。 
    #parse($sub):表示sub位置是可以动态通过$sub变量设置的。 

    同时也创建'vm/layout/footer.vm''vm/layout/header.vm'这两个文件。 



    2、 
    创建WEB-INF/vm/user/profile.vm如下:(假设该页面用于显示用户的资料信息) 

    Java代码  收藏代码
    1.    
    2. #set($layout = "layout.vm")  
    3. #set($sub= "vm/user/sub.vm" )  
    4. A: What's your name?<br>  
    5. B: My name is $user.loginName!  



    注意,这个文件和普通我vm不一样的地方在于前两句话。 
    第一句话设置这个页面使用哪个布局器。 
    第二句话设置sub的值,用于布局把vm/user/sub.vm文件包含进来。 


    同时也创建"vm/user/sub.vm"文件 

    3、配置velocity.properites文件 

    使用velocity一般都是需要配置velocity.properites的,至少应该设置input.encoding和output.encoding等。在这个文件中增加设置如下代码: 

    Java代码  收藏代码
    1. # Directory for layout templates,  
    2. #  relative to web application root directory  
    3. tools.view.servlet.layout.directory = vm/layout/  
    4.   
    5. # Filepath of the default layout template  
    6. #  relative to the layout directory  
    7. #  !!!!!哥们要注意这行提示:NOT relative to the root directory of the webapp!!!!  
    8. tools.view.servlet.layout.default.template =  layout.vm  



    4、确定web.xml配置和下面的差不多如下(主要是配置VelocityLayoutServlet,而非VelocityViewServlet): 

    Java代码  收藏代码
    1. <servlet>  
    2.     <servlet-name>velocity</servlet-name>  
    3.     <servlet-class>  
    4.         org.apache.velocity.tools.view.servlet.VelocityLayoutServlet  
    5.     </servlet-class>  
    6.   
    7.     <init-param>  
    8.         <param-name>org.apache.velocity.toolbox</param-name>  
    9.         <param-value>/WEB-INF/toolbox.xml</param-value>  
    10.     </init-param>  
    11.     <init-param>  
    12.         <param-name>org.apache.velocity.properties</param-name>  
    13.         <param-value>/WEB-INF/velocity.properties</param-value>  
    14.     </init-param>  
    15. </servlet>  
    16. <servlet-mapping>  
    17.     <servlet-name>velocity</servlet-name>  
    18.     <url-pattern>*.vm</url-pattern>  
    19. </servlet-mapping>  



    5、运行服务器吧, 
    a) 访问http://www.xxx.com/vm/user/profile.vm 看看效果。 

    b) 回到vm/user/profile.vm文件,把#set($layout = "layout.vm")去掉 看看效果。 

    效果比较: 
    加上$layout设置的profile.vm文件,浏览该页面时,将自动把该页面变成布局的一部分,把header.vm,sub.vm,footer.vm也输出出来;去掉$layout设置后浏览时,只是输出该页面,不会将header.vm,sub.vm,footer.vm输出出来。 

    这种功能在调试和编写时非常方便。 



    以后每增加一个新的页面时,只要在第一行设置了$layout指向一个布局模板便可(注意布局模板的路径,第3步已经做了提示),便可以轻松具有简单的布局功能了 



    6、后语: 

    一直想着自己实现一个类似的功能,最后再仔细看看Velocity官方网站时才发现velocity已经有了。我觉得挺好的,很符合我的需求。 

    所以,如果你使用或即将使用Velocity开发系统,强烈推荐使用layout功能。 

  • 相关阅读:
    Tomcat设置web 点击劫持 X-Frame-Options
    Spring boot 防止 xss 攻击 和 LDAP注入
    Spring Boot
    Spring Boot 跨域设置
    SpringBoot 引入redis
    Mybatis常用增删改以及过程的xml配置文件编写
    关于mybatis的一些注意点
    盒子的定位和布局
    vuex随学笔记
    JavaScript数据结构
  • 原文地址:https://www.cnblogs.com/xiohao/p/4651848.html
Copyright © 2011-2022 走看看