Web开发人员必会的模板引擎技术之Freemarke

Web开发人员必会的模板引擎技术之Freemarker

几何时，Web开发是个多么高大上的名字，程序猿们都以能搞定Web技术为荣，此时还没有前后端之说。然而随着互联网的发展，社会分工进一步细化，职业岗位也更加细分，慢慢开始有了前端攻城狮和后端攻城狮，技术也进一步细分，出现了以HTML、JS等为主的页面技术，以Java、Pyton为主的后端开发语言技术。

事实上，直到前后端分离开发模式已经逐渐成为主流的今天，前后端技术的划分也没能完全清晰，我们可能会经常听到一个叫全栈工程师的名字，这是一类野心极其大想前后端通吃的程序猿，这是要逼着其他程序猿回家种地的节奏，程序猿没有女朋友已经够惨了，还要这样伤害这些单纯可爱的人吗？

大家都是程序猿，本自同根生，相煎何太急。

全栈工程师其实就是前端和后端技术都会的一类人，而这类人基本都是后端工程师；为什么这么说呢，以Java工程师为例，哪个Java工程师不会HTML、JS呢，否则会被人鄙视的；甚至经验丰富的老司机比真正前端工程师还要精通。Web开发本身就是后端工程师的一部分工作。比如，在Java Web开发领域程序猿通常是既写前端代码，也写后端代码；而且Web开发有着很多很优秀的页面技术HTML、JSP等。这些优秀的页面技术，使Java在Web开发领域有着举足轻重的地位。

咱们今天要学习的也是一个在Java开发领域非常流行的模板引擎技术-Freemarker，用过Spring Boot的同学可能都知道，Spring Boot在自己体系里默认支持的页面技术不是JSP，而是Thymleaf、Freemarker的模板引擎技术。所以，今天咱们就先来学习一下其中的一个，使用Freemarker模板引擎技术做Web开发。

那么问题来了，咱们一直在说模板引擎技术，那什么是模板引擎呢？接下来咱们先来了解一下模板引擎技术。

什么是模板引擎技术

传统的页面开发过程中通常采用的HTML + JS技术，而现在大部分网站都采用标签化+ 模块化的设计。模板引擎其实就是根据这种方式，使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档在原有的HTML页面中来填充数据。最终达到渲染页面的目的。

说人话就是，把数据和页面整合在一起的技术。

常用的模板引擎技术：

? Thymleaf

? FreeMarker

? Velocity

今天咱们就来先学习Freemarker。

什么是FreeMarker

咱们先来介绍下Freemarker的概念，FreeMarker是一个使用纯Java编写的基于模板生成文本输出的通用工具，通常它的文件都是.ftl结尾，FreeMarker最初被用在MVC模式的Web开发框架中生成HTML页面，但是它的功能可不仅仅可以用到Web开发生成模板文件，它也可以用于非Web应用环境中，如：生成Java代码。

FreeMarker的主要特点

既然Freemarker 模板技术是Spring Boot官方默认支持的，那么它有哪些特点，才如此的备受青睐呢？

? 轻量级

不像JSP那样是Servlet要嵌入到应用程序中

? 可以生成各种文本文件

如：html、xml、java等

? 学习成本低

因为是用java编写的，所以语法和java很像

好了，接下来我们来看看Spring Boot整合 Freemarker 的实战操作。

Freemarker 渲染 Web 页面

首先，添加pom依赖，我们使用SpirngBoot Initializr 创建SpringBoot基础工程（记得加上Web依赖，因为我是搞Web开发），按照我们的经验，在Spring Boot中如果想要集成什么技术只需要添加相关技术的依赖就可以，所以呢，这里我们就直接添加FreeMarker的依赖。

当然你也可以在创建项目时直接勾选需要的依赖，项目在创建完成的时候自动加上这个依赖，如下图：

添加FreeMarker相关属性配置

创建好工程之后，在application.properties文件中添加FreeMarker相关配置。

创建页面

这里需要注意的是freemarker的文件名是以.ftl后缀的，我们在resources\templates文件夹下创建freemarker.ftl文件，需要注意的是freemarker在取值的时候使用的是插值表达式。

创建Controller

这里需要注意,在写controller的时候，我们使用注解是@Controller，因为我们要跳转到html页面，不再是返回JSON数据了。

测试结果

最后启动Spirng Boot工程，在浏览器地址栏中输入如下地址就可以了，

效果如下：

好了，通过以上简单的几步就可以轻松实现Spring Boot整合FreeMarker模板引擎技术进行web开发了，是不是很激动呢？

怎么样，你了解了么？欢迎和我们一起探讨。

更多IT技术干货，请关注课工场，和我们一起关注前沿技术，快速提升。

件项目实训及课程设计指导——如何在Web应用系统表示层开发实现中应用Velocity模板技术

1、分离Web表示层的数据处理和展现逻辑的常见的应用技术

分离Web表示层的数据处理和展现逻辑是目前企业级的Web应用系统开发中表现层组件开发实现中的基本实现目标。为此，软件应用系统的设计和开发实现人员必须要寻找到一种能够减少软件开发人员重复劳动的方法，让程序员将更多的精力放在业务逻辑以及其它更加具有创造力的工作上。

因此，读者在课程设计的项目开发中，不应该在Web页面中出现包含大量的服务器端脚本程序代码的Web页面状况，这样的Web应用系统在后期的系统维护、升级中都会比较困难。

如下示图所示的程序代码示例是不良好的Web表示层程序实现的代码示例，因为不仅在Web页面（*.jsp）中包含有大量的Java程序脚本的代码，而且在JSP页面中直接访问数据库（没有合理地进行分层设计）和应用System.out.print控制台信息的输出语句（此语句只能将信息打印输出到服务器主机的系统控制台上而不能输出到Web浏览器中，前端用户根本就无法浏览到相关的信息）。

希望读者在学习和阅读作者的《软件项目实训及课程设计指导》系列文章的内容时，重点掌握目前比较主流的分离Web表示层的数据处理和展现逻辑的技术实现方法——比如，采用CSS+Div分离Web表示层数据和表现、应用XML+XSLT技术彻底分离数据和样式、应用Velocity模板技术实现开发职责分离，并能够在课程设计的项目开发中应用作者在本系列文章中介绍的各种方法。

当然，分离Web表示层的数据处理和展现逻辑目前其实有多种不同的实现方式，不仅仅局限于作者在上文中所提及和介绍过的方法，比如同样很优秀的 Freemarker 也获得了非常广泛的应用。因此，读者在项目开发实现中应该要根据项目的具体需要和自己对具体技术实现的熟悉程度合理地选用。

作者在下文中将为读者介绍如何在J2EE 系统平台中的Web应用系统表示层开发实现中应用Velocity模板技术。但作者考虑到Velocity模板技术以及随后几篇文章中将要介绍的Struts和Struts2应用框架等技术在目前高校的课堂教学中一般都不会涉及，因此部分读者可能在阅读本系列文章的内容时对Velocity模板技术和Struts2应用框架会感觉比较陌生，给读者的学习和理解会带来一定的难度。

作者建议读者在课程设计的项目开发中能够应用Velocity模板技术，经过一段时间的项目开发和应用的实践，也就能够慢慢地熟悉和掌握Velocity模板技术和Struts2应用框架等应用技术。

2、什么是J2EE 系统平台中的Velocity模板技术

Velocity是Apache 基金会的一个开源的模板引擎（Template Engine）项目，其初始开发的主要目标是分离基于MVC 体系架构设计模式的应用系统的持久化层和业务层，但目前被广泛地应用于J2EE Web应用系统中的表示层组件开发中。它能够允许Web开发者在不使用传统的JSP页面的应用情况下，可以用 Velocity模板让HTML页面也能够具有动态内容的特性。

如下示图为Apache Velocity的官方网站页面中对Velocity模板相关技术特性和应用介绍的文字局部截图。

读者可以从Velocity的官方网站上下载Velocity的系统运行包文件和技术参考文档等系统库和资料，然后再解包该系统库的运行包文件，请见下图所示的下载页面。

Velocity是一种基于Java系统平台的模板引擎，它允许软件应用系统的开发人员使用简单而强大的模板语言来引用哪些定义在Java程序代码中的对象。而且Velocity应用具有简洁的语法和采用类似脚本语言的方式引用目标数据对象。

Velocity模板引擎本身不是采用标准的模型视图控制器（MVC）体系结构设计，它只是Web应用系统中的"模型组件"和"视图组件"之间的桥梁。并为Web页面的前端开发和制作人员提供了一种清晰而又简单的模板语法，而且模板和程序代码是分离的。

所以Web应用系统的开发人员可以分别独立地开发和维护它们，Web前端开发人员可以和后端Java 程序开发人员同步开发一个遵循 MVC体系架构的Web应用系统。而且目前的Velocity 模板引擎也很容易能够集成到J2EE Web容器的运行环境中——如Servlet容器中，也很容易能够与Struts应用框架和Struts2应用框架相互集成。

因为Velocity 模板引擎的强大之处在于它严格地区分Web应用系统项目开发中的人员职责划分——页面开发人员只需要把精力和关注点放在数据的显示功能实现部分，而Java程序员更多地只需要关注如何编程应用系统中的控制层程序和商业业务逻辑、系统中数据库表中数据的访问控制和管理等方面的功能实现。

Velocity 模板是一个目前比较流行的JSP页面技术的替代物，并且能够实现把 Java 程序代码从Web页面中分离出来。

3、Velocity 模板语言VTL

Velocity 模板使用的脚本语言称为 Velocity 模板语言（VTL，Velocity Template Language），但它和其它形式的脚本语言（如JavaScript等）相比，Velocity 模板语言的语法相对而言比较简单。

在Velocity 模板语言中提供有变量定义、指令、注释、对象的引用和各种运算符、宏定义等，也还提供了许多的内置对象。比如下面的代码语句是设置变量someVarable的值为"Velocity"：#set( $someVarable="Velocity" )。

在上面的代码中读者可以看到很多以"#"和"$"字符开头的内容，这些都是 Velocity 模板语言的语法。在 Velocity模板语言中所有的关键字都是以"#"开头的，而所有的变量则是以"$"开头。Velocity 模板语言的语法类似于 JSP 技术中的 JSTL（JSP标准的标签库）。

作者考虑到本文章的篇幅有限，在此文中不能详细地为读者介绍Velocity 模板语言的语法，读者有兴趣可以参考和阅读Velocity 的官方文档，其中提供了Velocity 语法相关的详细内容。

4、Velocity模板系统库中的VelocityServlet组件类

虽然大多数基于Velocity模板的Java应用都是基于J2EE Servlet的Web应用系统，但其实Velocity模板是可以应用于J2SE的应用程序和J2EE Web应用程序的两种不同的开发环境中。但作者在本文中主要介绍在J2EE Web应用程序的开发环境中如何应用Velocity模板。

但由于Velocity模板只是一个模板引擎，读者如果需要在J2EE Web应用系统项目中应用Velocity模板，还需要在项目中添加一个HTTP框架以便能够处理HTTP请求（request）和转发（response）。

为此，在Velocity模板所提供的系统程序包中，提供有一个VelocityServlet组件类（org.apache.velocity.servlet.VelocityServlet），Web应用系统只需要继承并扩展它便可以很快地创建一个基于Velocity模板功能处理的Servlet程序，也就是通过继承VelocityServlet 组件类以产生出自己的Servlet组件。

由于Velocity 模板的系统库不断地在更新和升级，如果读者通过继承VelocityServlet 组件类以产生出自己的Servlet组件时出现如下的提示信息："the type VelocityServlet is deprecated"，说明读者所下载的Velocity 模板系统库中已经将VelocityServlet升级替换为org.apache.velocity.tools.view.VelocityViewServlet类，读者只需要将VelocityServlet类修改为VelocityViewServlet类。

如下示图为Velocity官方网站页面中对新版本的Velocity 模板系统库中的VelocityViewServlet类的定义说明局部截图。

在自己派生出的Servlet组件中可以获得与HTTP请求相关的request、session与application等对象，从而也可以直接获得通过Servlet容器保存在这几个域对象中的值或者返回业务处理后的结果值。

因此，应用Velocity 模板技术可以分离Web应用系统中的业务处理逻辑和数据显示风格控制逻辑。

5、在Web表示层开发实现中应用Velocity模板的基本步骤

Velocity 的任何模板都可以被VelocityServlet使用、并且能够部署在服务器上，也相对比较简单。只需要采用以下的开发实现步骤：

（1）Web应用系统的开发人员首先通过继承 org.apache.velocity.servlet.VelocityServlet 类（或者org.apache.velocity.tools.view.VelocityViewServlet类）并派生出自己的Servlet 程序类；

（2）其次，在所派生出的Servlet 程序类中，重写并实现其中的一个handleRequest()方法，在 handleRequest() 的方法实现中，从文件或资源（如JAR文件）中取得模板文件并返回该模板；

如下示图为Velocity官方网站页面中对handleRequest()的方法定义及功能、返回参数的说明局部截图。

（3）最后，在重写的handleRequest() 的方法实现中，添加希望在模板中作为上下文属性使用的数据或Velocity工具，并且由VelocityServlet向浏览器响应输出——可以由它在向HttpServletResponse的OutputStream 流对象发送之前生成要响应输出的 HTML标签。

体现在Web表示层开发实现中应用Velocity模板的基本步骤相关的程序代码示例如下，读者可以根据自己的应用项目的需要进行修改和扩展。

public class VelocityServletDemo extends VelocityViewServlet {
      @Override
      protected Template handleRequest(HttpServletRequest request, HttpServletResponse response, Context ctx) {
            /** 在Context上下文环境容器对象实例中存放指定名称的变量值 */
            ctx.put("someVarableName","someVarableValue");
            /** 也可以在request域对象实例中存放指定名称的变量值 */
            request.setAttribute("someVarableName","someVarableValue");
            …
            … 其它的程序代码，在此省略
            …
            /** 在业务处理完毕后再 forward转发到指定模板 */
            return getTemplate("myVelocityTemplate.html");
      }
}

Velocity 模板文件是文本格式的文件，并且它可以是HTML、XML等类型的文件（上面的程序代码示例中的模板文件名称为myVelocityTemplate.html）。但在模板文件中一般包括有如下几个不同部分的内容：

1）照原样合并的静态部分

2）将被要合并的数据替代的占位符

3）脚本语言中的指示符和指令。

如下页面代码为上面程序代码中最终转发到的myVelocityTemplate.html模板文件代码示例，它与标准的HTML页面差别在于其中包含有黑体标识的数据获取表达式，如$userName、$userPassword等。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
      <title>一个简单的VelocityWeb应用页面</title>
</head><body>
      <center> <h2>下面为Servlet处理后的结果</h2></center>
      <table cellspacing="0" cellpadding="5" width="200" align="center">
          <tr><td >用户名称</td><td >用户密码</td></tr>
          <tr><td>$userName</td><td>$userPassword</td></tr>
      </table>
</body></html>

另外，myVelocityTemplate.html页面为静态的HTML页面而不是动态的服务器端的JSP页面，因此页面的响应速度将会大大地提高，从而应用Velocity 模板技术的Web页面可以是非JSP类型的Web页面——达到"动态内容静态化"的应用效果。

6、如何在派生的Servlet程序中向响应输出的目标页面传递数据

J2EE Web应用系统的开发人员只需要把数据放置到Velocity的上下文对象中（org.apache.velocity.context.Context），然后Velocity引擎使用Velocity上下文对象中的数据、并应用到模板文件中，最后按照模板文件的格式输出数据。在上面的示例代码中的如下语句则是在模板文件中获得保存在Velocity上下文对象中的指定名称的数据值，然后在表格行中显示。

<tr><td>$userName</td><td>$userPassword</td></tr>

7、与Velocity模板相关的两个重要的概念

（1）Velocity模板（Template类）

它是遵守Velocity VTL模板语言的语法规则定义的一个文本格式的文件，该文件采用Velocity语言定义模板文件。比如下面的程序示例代码是获得指定文件名称为VelocityTemplate.vm的模板文件，并指定所应用的编码格式为中文GB2312编码：

Template oneTemplateObject=oneVelocityObject.getTemplate("VelocityTemplate.vm","gb2312");

在默认的情况下，Velocity模板引擎的系统程序会在Web应用系统资源根路径下搜索*.vm文件，所以开发人员直接将*.vm文件放在Web应用系统资源根路径下即可（当然，也可以通过配置velocity.properties文件中的配置项目来指定加载的路径）。

（2） Velocity上下文（VelocityContext类）

它是Velocity模板引擎系统的一个容器，用于保存相关的业务数据。开发人员可以把Velocity模板上下文VelocityContext类看作是导入 Java 对象并在 Velocity 模板内部访问的一种方法。

比如下面的程序代码是创建一个VelocityContext类的对象，并在其中保存需要向Web表示层页面传递的参数——参数的名称为userName，而对应的参数值为"张三"。

VelocityContext oneContextObject=new VelocityContext();
oneContextObject.put("userName", "张三");

因此，只需要通过创建 org.apache.velocity.context.Context 类型的对象实例就可以获得 Velocity 的上下文VelocityContext对象，然后利用上下文对象中的 put方法，把要导入到模板文件中的对象附加到上下文中。

当然，如果是采用继承VelocityViewServlet类而派生出自己的Servlet程序类，并在自己的Servlet程序类中重写handleRequest()方法的方式的程序中，不需要自行再创建出VelocityContext 类的对象实例，而直接应用handleRequest()方法中所携带的Context接口类型的对象实例（参看如下示例代码中的黑体标识的代码）。

protected Template handleRequest(HttpServletRequest request, HttpServletResponse response, Context ctx) {
 				…
        … 其它的程序代码，在此省略
        …
}

应用XML+XSLT技术分离Web应用表示层数据和样式的实例

如何应用“XML+XSLT”技术分离Web表示层数据和样式

如何应用CSS+Div分离Web表示层数据处理逻辑和展现逻辑

如何正确应用Web MVC架构模式分离表示层和模型层耦合关系

如何应用策略设计模式分离JDBC数据库连接中的外部环境信息

件项目实训及课程设计指导——如何利用MyEclipse开发工具开发基于Velocity模板的Web应用

1、在MyEclipse开发工具中新建一个名称为WebVelocity的Web项目

在名称为WebVelocity的J2EE Web应用项目中的lib目录下添加Velocity模板所需要JAR包文件velocity-1.6.1-dep.jar，请见下图所示的最终操作的结果截图。

由于Velocity 模板的系统库不断地在更新和升级，读者可以从Velocity的官方网站上下载Velocity的系统运行包文件和技术参考文档等系统库和资料，然后再解包该系统库的运行包文件，请见下图所示的下载页面。

2、在该Web项目中添加一个文件名称为userLogin.jsp的JSP页面

在该userLogin.jsp的JSP页面中添加一个实现应用系统的用户登陆功能的Web表单，并且向应用系统后台的Servlet组件发送Web请求。该userLogin.jsp的JSP页面的内容标签请见如下示例中所示的内容—— 名称为userLogin.jsp的JSP页面内容。

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
      <head>
      			<title>My JSP 'userLogin.jsp' starting page</title>
      </head>
      <body>
            <form action="/WebVelocity/userloginservlet" method="POST">
                  请输入用户名称：<input type="text" name="userName"><br>
                  请输入用户密码：<input type="password" name="userPassword"><br>
                  <input type="submit" value="提交">
                  <input type="reset" value="重来">
            </form>
      </body>
</html>

该userLogin.jsp的JSP页面在Web浏览器中的执行结果如下示例图所示，其中包含有一个收集用户登陆信息的Web表单。

3、在该Web项目中再添加一个Servlet组件

该Servlet类名称为UserLoginServlet，程序包名称为com.px1987.webvelocity.servlet，并且继承org.apache.velocity.servlet.VelocityServlet类、URL-Pattern为/userloginservlet。该Servlet类代码内容请见如下代码示例所示的UserLoginServlet类代码示例。

在新版本的Velocity模板系统库中，将VelocityServlet类升级替换为VelocityViewServlet（org.apache.velocity.tools.view.VelocityViewServlet）类，读者在开发中只需要将VelocityServlet类修改为VelocityViewServlet类。

（1）编程该Servlet类的程序代码—— UserLoginServlet类代码示例

package com.px1987.webvelocity.servlet;
import java.io.*;
import java.util.Properties;
import javax.servlet.*;
import javax.servlet.http.*;
import org.apache.velocity.Template;
import org.apache.velocity.app.Velocity;
import org.apache.velocity.context.Context;
import org.apache.velocity.exception.*;
import org.apache.velocity.servlet.VelocityServlet;
public class UserLoginServlet extends VelocityServlet{
      protected Properties loadConfiguration(ServletConfig config ) throws
      IOException,FileNotFoundException{
            String propsFile=config.getInitParameter("properties");
            if ( propsFile !=null ){
                  String realPath=getServletContext().getRealPath(propsFile);
                  if ( realPath !=null ) {
                 			 propsFile=realPath;
                  }
            }
            Properties onePropertiesObject=new Properties();
            onePropertiesObject.load( new FileInputStream(propsFile) );
            String propertiesFilePath=onePropertiesObject.getProperty("file.resource.loader.path");
            if (propertiesFilePath!=null){
                  propertiesFilePath=getServletContext().getRealPath(path);
                  onePropertiesObject.setProperty(Velocity.FILE_RESOURCE_LOADER_PATH, path );
            }
            /** 设置模板的资源位置 */
            propertiesFilePath=onePropertiesObject.getProperty("runtime.log");
            if (propertiesFilePath!=null){
                  propertiesFilePath=getServletContext().getRealPath(path);
                  onePropertiesObject.setProperty("runtime.log", propertiesFilePath);
            }
            return onePropertiesObject;
        }
        public Template handleRequest(HttpServletRequest request,
            HttpServletResponse response, Context context )
            throws ServletException, IOException{
                  String userName=request.getParameter("userName");
                  String userPassword=request.getParameter("userPassword");
                  context.put("userName", userName);
                  context.put("userPassword", userPassword);
                  Template outTemplate=null;
                  try {
                 			 outTemplate=getTemplate("WebVelocityApp.html");
                  }
                  catch( ParseErrorException e ){
                        request.setAttribute("errorText","不能对模板进行解析" );
                        error(request,response,e);
                  }
                  catch( ResourceNotFoundException e ){
                        request.setAttribute("errorText","没有找到模板文件" );
                        error(request,response,e);
                  }
                  catch( Exception e ){
                        request.setAttribute("errorText","出现了其它方面的错误" );
                        error(request,response,e);
                  }
            return outTemplate;
      }
      /** 异常处理也都交到error方法处理，可以覆盖基类中的error的处理办法，从而实现对异常的封装和包裹。*/
      protected void error( HttpServletRequest request, HttpServletResponse response,
      Exception cause ) throws ServletException, IOException{
          String errorText=(String) request.getAttribute("errorText");
          StringBuffer oneStringBuffer=new StringBuffer();
          oneStringBuffer.append("<html>");
          oneStringBuffer.append("<head><meta http-equiv=\"Content-Type\"
          content=\"text/html; charset=gb2312\">");
          oneStringBuffer.append("<title>错误信息显示页面</title>");
          oneStringBuffer.append("</head><body>"+ errorText+"<br>错误出现的位置：<br>");
          StringWriter oneStringWriter=new StringWriter();
          cause.printStackTrace(new PrintWriter(oneStringWriter));
          oneStringBuffer.append(oneStringWriter.toString());
          oneStringBuffer.append("</body></html>");
          response.setContentType("text/html;charset=gb2312");
          PrintWriter webOutPutStream=response.getWriter();
          webOutPutStream.print(oneStringBuffer.toString());
      }
}

（2）在Web项目的部署描述文件web.xml文件中部署定义该Servlet类

在部署该Servlet类的同时，还需要为它提供一个名称为properties的初始化参数，其值为Velocity模板的属性配置文件velocity.properties的路径信息（在程序UserLoginServlet类中动态获得）。如下代码示例为在web.xml文件中部署该UserLoginServlet类的部分代码。

<servlet>
      <servlet-name>UserLoginServlet</servlet-name> 
     <servlet-class>com.px1987.webvelocity.servlet.UserLoginServlet</servlet-class>
      <init-param>
            <param-name>properties</param-name>
            <param-value>/velocityConf/velocity.properties</param-value>
      </init-param>
</servlet>
<servlet-mapping>
      <servlet-name>UserLoginServlet</servlet-name>
      <url-pattern>/userloginservlet</url-pattern>
</servlet-mapping>

4、在Web项目的velocityConf目录中添加Velocity的属性配置文件

在本Web项目中新增一个属性配置文件所在的文件目录，目录的名称为velocityConf，并在该velocityConf目录下，再添加一个文件名称为velocity.properties文件。设置该文件中的内容，请见如下代码中的示例——Velocity模板引擎（Template Engine）的velocity.properties属性配置文件的示例

file.resource.loader.path=/
runtime.log=/velocity.log

该文件为Velocity模版引擎的初始化参数文件，Web应用系统的开发人员可以在其中设置相关的工作参数，这些工作参数主要是Velocity模板引擎的配置、编码、缓存、日志等文件的工作参数的定义等。

当然，在Velocity模版引擎中也预设了一些默认的配置属性，从而避免开发人员出现错误的配置项目。Web应用系统的开发人员通过配置velocity.properties文件，可以自定义vm文件加载方式，指定编码等。

当然，也可以不配置velocity.properties文件而使用缺省的值即可。如下代码示例是一个更有代表性的velocity.properties文件的配置示例。

## 设置Velocity模版引擎的模板文件加载器，webapp从应用根目录加载
      resource.loader=webapp
      webapp.resource.loader.class=org.apache.velocity.tools.view.servlet.WebappLoader
## 定义Velocity模版引擎的模板文件路径为Web应用系统的根目录文件夹
			webapp.resource.loader.path=/
## 设置Velocity模版引擎的编码方式
      input.encoding=UTF-8
      output.encoding=UTF-8

读者也可以根据Web应用项目的需要，将其中的"input.encoding"和"output.encoding"设置为中文编码格式，如GBK或者GB2312等。

5、在Web项目中再添加一个webVelocityApp.html模板文件

Velocity 模板文件其实是文本格式的文件，并且模板文件除了可以为*.vm的模板文件之外，还可以是HTML、XML 等标准格式类型的文本文件。因此，模板文件的文件扩展名可以是*.vm、*.html和*.xml等类型。在模板文件中一般都会包括有：

1）照原样合并的静态部分

2）将被要合并的数据替代的占位符

3）脚本语言中的指示符和指令

因此，在Web项目中新增一个HTML页面文件，它是文件名称为webVelocityApp.html的模板文件，在该模板文件中添加如下代码示例所示的HTML标签内容——webVelocityApp.html模板文件中的HTML标签内容，读者注意其中黑体标识的语句。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
      <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
            <title>一个简单的VelocityWeb应用页面</title>
      </head>
      <body>
            <center> <h2>下面为Servlet处理后的结果</h2></center>
            <table cellspacing="0" cellpadding="5" width="200" align="center">
                  <tr>
                  				<td >用户名称</td><td >用户密码</td>
                  </tr>
                  <tr>
                  				<td>$userName</td><td>$userPassword</td>
                  </tr>
            </table>
      </body>
</html>

由于上面的这个模板文件是一个完整的 HTML 文件，因此可以使用任何Web页面设计工具或者文本编辑器来创建和编辑该HTML页面文件；在模板文件中访问保存在上下文对象中的属性：

比如，可以使用 $userName指令来引用前面保存到上下文对象中的属性。注意：在Velocity模板文件中，变量的定义都是使用"$"字符开头的，"$"字符作为Velocity模板文件中的标识符。

由于Velocity模板引擎系统采用简单而强大的模板语言VTL实现对Web页面的渲染，因此能保证在Dreamwaver之类的Web页面可视化编辑器中都能够正常显示；另外，模板文件可以是任意的文件扩展名，采用*.vm、*.html或者*.xml都是可以的（本示例采用*.html文件扩展名），这样就能直接在Web浏览器中看到Web页面的预览的效果。

6、执行该Web应用并测试Velocity模板的功能效果

读者可以直接在浏览器中输入如下形式的URL地址字符串，直接浏览用户登录页面http://127.0.0.1:8080/WebVelocity/userLogin.jsp的请求URL地址后，将会出现如下示图所示的实现用户登陆功能的页面。

读者在上图中所示的Web表单框中输入用户名称和密码，然后点击其中的"提交"按钮后，Web表单页面将向Web应用系统后台的Servlet组件提交Web请求，最后将出现如下示图所示的执行结果状态——本示例为了验证应用Velocity模版引擎的正确性，在响应页面中获得用户登录的账户和密码等信息，然后在页面中显示以比对是否正确地获得了相关的数据。

从执行结果和最终在Web浏览器中响应输出的信息来看，本示例的功能是正确的，对Velocity模版引擎的应用也是合情合理和正确的。

当然，在实际的Web应用系统中的业务处理逻辑中，并不会简单直接地显示出用户敏感的登录信息，而是通过访问系统后台的物理数据库系统中的数据库表中的数据，比对用户提交的登录信息是否合法和有效。

另外，webVelocityApp.html页面为静态的HTML页面而不是动态的服务器端的JSP页面，如果在本Web示例中不应用Velocity模版引擎系统，是很难实现在静态的HTML页面中获得服务器端返回的业务处理结果的参数。

因此Web页面的响应速度将会大大地提高，从而应用Velocity 模板技术的Web页面可以是非JSP类型的Web页面——达到"动态内容静态化"的应用效果。

如何在Web应用系统表示层开发中应用Velocity模板技术