SpringMVC 学习-如何搭配使用 Velocity 页面模板

一、快速搭建 Velocity 框架

 

1. 加入所需 Jar 包

<dependency>
    <groupId>org.apache.velocity</groupId>
    <artifactId>velocity</artifactId>
    <version>1.7</version>
</dependency>
<dependency>
    <groupId>velocity-tools</groupId>
    <artifactId>velocity-tools-generic</artifactId>
    <version>2.0-beta1</version>
</dependency>
<dependency>
    <groupId>velocity-tools</groupId>
    <artifactId>velocity-tools-view</artifactId>
    <version>2.0-beta1</version>
</dependency>
<dependency>
    <groupId>commons-digester</groupId>
    <artifactId>commons-digester</artifactId>
    <version>2.1</version>
</dependency>

 

2. 修改 SpringMVC 的配置文件 springmvc-servlet.xml

旧配置：

<!-- 对加载页面的路径解析 -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
　　<!-- 前缀 -->
　　<property name="prefix" value="/"></property>
　　<!-- 后缀 -->
　　<property name="suffix" value=".html"></property>
</bean>

改为：

<!-- 对加载页面的路径解析 不需要配 prefix， 在 velocity-servlet.xml 中配置 -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.velocity.VelocityViewResolver">
　　<!-- 加载 toolbox 配置文件 -->
　　<property name="toolboxConfigLocation" value="/WEB-INF/velocityToolBox.xml" />
　　<!-- 后缀 -->
　　<property name="suffix" value=".vm"></property>
</bean>

 

3. 在 WEB-INF 下面创建配置文件，命名为 velocityToolBox.xml 

<toolbox>
　　<!-- application start -->
　　<tool>
　　　　<key>date</key>
       <scope>application</scope>
       <class>org.apache.velocity.tools.generic.DateTool</class>
　　</tool>
　　<tool>
       <key>math</key>
       <scope>application</scope>
　　　　<class>org.apache.velocity.tools.generic.MathTool</class>
　　</tool>
　　<!-- application end -->
</toolbox>

 

4. 在 WEB-INF 下创建配置文件 velocity-servlet.xml 

<bean id="velocityConfigurer"
        class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
　　<!-- 模版路径 -->
　　<property name="resourceLoaderPath">
　　　　<!-- prefix -->
　　　　<value>/</value>
　　</property>
　　<!-- 模版属性 -->
　　<property name="velocityProperties">
　　　　<props>
　　　　　　<prop key="input.encoding">utf-8</prop>
　　　　　　<prop key="output.encoding">utf-8</prop>
　　　　</props>
　　</property>
</bean>

记得在 web.xml 文件中引入 velocity-servlet.xml 

 

5. velocity 模板的一些基本指令

比如循环：后台传递过来的用户信息列表 userList 

#foreach($item in $userList)
    <div>$item.userName $item.createDate</div>
#end

 

二. 如何自定义标签

 

1. 先创建一个自定义标签 Java 类。必须要有 @DefaultKey("") 注解

package com.erim.web.common;

@DefaultKey("erim")
public class ErimTag {
　　// 格式化时间
    public String formatDate(Date date) {
        return new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(date);
    }
}

 

2. 修改 WEB-INF 下 velocityToolBox.xml 引入 Java 类

<tool>
    <key>erim</key>
    <scope>application</scope>
    <class>com.erim.web.common.ErimTag</class>
</tool>

这样自定义注解就生效了。假如后台有一个时间变量 createDate 需要在页面渲染，渲染完发现格式是酱紫的：

Thu May 12 15:20:02 CST 2016

这就需要用到我们的自定义标签：

$erim.formatDate($createDate)

 

三. 如何自定义指令

 

1. 还是先创建一个 Java 类，继承 Directive。

public class TextTag extends Directive {

    @Override
    public String getName() {
        return "vText";
    }

    @Override
    public int getType() {
        return LINE;
    }

    @Override
    public boolean render(InternalContextAdapter context, Writer writer, Node node)
            throws IOException, ResourceNotFoundException, ParseErrorException,
            MethodInvocationException {
        // 获取第一个参数
        SimpleNode user = (SimpleNode) node.jjtGetChild(0);
        // 格式化
        String userName = (String) user.value(context);
        // 操作
        userName = userName + ".....";
        // 输出
        writer.write(userName);
        return true;
    }

}

 

2. 在 WEB-INF 下创建资源文件 velocity.properties

input.encoding=utf-8   
output.encoding=utf-8 
userdirective=com.erim.web.common.TextTag

其中 userdirective 的值为自定义指令 Java 类的地址，多个 Java 类以逗号分隔

 

3. 修改 velocity-servlet.xml 文件

<!-- velocity 相关配置 -->
<bean id="velocityConfigurer" 
　　class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
　　<!-- 引入外部资源 -->
　　<property name="configLocation" value="/WEB-INF/velocity.properties" />
　　<!-- 模板路径 -->
　　<property name="resourceLoaderPath" value="/templates/"></property>
　　<!-- 模板属性 -->
　　<property name="velocityProperties">
　　　　<props>
　　　　　　<prop key="input.encoding">utf-8</prop>
　　　　　　<prop key="output.encoding">utf-8</prop>
　　　　</props>
　　</property>
</bean>

 

4. 使用场景

#vText("hhahaha")

hahahha， demo 就是这么任意

#vText 就是上面 getName() 方法中指定的字符串。