如何在J2EE平台开发基于Velocity模板的Web应用

suiw9 2024-11-13 14:45 17 浏览 0 评论

软件项目实训及课程设计指导——如何利用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模板文件中，变量的定义都是使用"#34;字符开头的，"#34;字符作为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模板技术

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

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

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

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

velocity模板引擎