文档章节

Velocity练习:使用vm模板生成最简单的html页面

北风其凉
 北风其凉
发布于 2016/05/11 19:16
字数 1465
阅读 2574
收藏 5

这几天要用到Velocity模板引擎去做一些页面,所以学习了下这个工具。我的jdk版本为 1.8.0_25

需要做的准备工作有:

1、建立一个Java工程,需要引用Velocity相关的jar包,这些jar包可从apache.org下载到最新版本。 下载地址在:http://velocity.apache.org/download.cgi 。我下载的文件是velocity-tools-2.0.zip,将这些文件导入到项目中,就可以使用Velocity进行编码了。

2、安装Eclipse上的Velocity插件Veloedit。因为googlecode被gfw墙掉了,没有条件的朋友们可以安装网上下载到的离线安装版。这里还有一个需要注意,我的Eclipse版本为 Luna Service Release 1 (4.4.1),这个版本必须要先利用Eclipse自带的update功能,下载“Elipse Tests, Examples, and Extras”。

我要用Velocity绘制一个通讯录的联系人资料页面,使用Balsamiq工具绘制的页面原型如下:

建立一个JavaProject,取名VelocityTool,里面新建两个java文件。

其中,VelocityHelper.java包含一个Velocity模板转换工具类,代码如下:

import java.io.File;
import java.io.FileWriter;

import org.apache.velocity.Template;
import org.apache.velocity.VelocityContext;
import org.apache.velocity.app.Velocity;
import org.apache.velocity.app.VelocityEngine;

/**
 * 
 * @文件名称 VelocityHelper.java
 * @文件作者 Tsybius2014
 * @创建时间 2016年5月10日 下午2:14:01
 */
public class VelocityHelper {
    /**
     * 根据给定的vm模板和上下文生成html页面
     * @param inputVmFilePath vm模板
     * @param outputHtmlFilePath 输出html页面
     * @param context 上下文
     * @throws Exception
     */
    public static void generateHtml(String inputVmFilePath, String outputHtmlFilePath,
        VelocityContext context) throws Exception {
        try {
            Velocity.init();
            VelocityEngine engine = new VelocityEngine();
            Template template = engine.getTemplate(inputVmFilePath, "gbk");
            File outputFile = new File(outputHtmlFilePath); 
            FileWriter writer = new FileWriter(outputFile);
            template.merge(context, writer);
            writer.close();
        } catch (Exception ex) {
            throw ex;
        }
    }
}

VelocityTool.java中有main函数,代码如下:

import java.util.HashMap;
import java.util.Vector;

import org.apache.velocity.VelocityContext;

/**
 * 
 * @文件名称 VelocityTool.java
 * @文件作者 Tsybius2014
 * @创建时间 2016年5月10日 上午10:03:59
 */
public class VelocityTool {
    public static void main(String[] args) {
        try {
            VelocityContext context= new VelocityContext();
            context.put("name", "Kim Jung-un");
            context.put("gender", "Male");
            context.put("email", "XXX@XXX.gov");
            context.put("job", "Chairman of the WPK");
            context.put("company", "Workers' Party Of Korea (WPK)");
            context.put("address", "XXXXXXXXX, Pyongyang, North Korea");
            context.put("portraitPath", "file:///C:/Users/Tsybius/Desktop/kju.jpg");
            HashMap<String, String> hashMapContact = new HashMap<String, String>();
            hashMapContact.put("Tel", "XXX-XXXXXXXX");
            hashMapContact.put("Fax", "XXX-XXXXXXXX");
            hashMapContact.put("Mobile", "XXX-XXXX-XXXX");
            context.put("contactItems", hashMapContact);
            Vector<String> vectorRemark = new Vector<String>();
            vectorRemark.add("Kim Jong-un is the Chairman of the Workers' Party of Korea and supreme leader of the Democratic People's Republic of Korea (DPRK), commonly referred to as North Korea.");
            vectorRemark.add("Kim is the son of Kim Jong-il (1941–2011) and the grandson of Kim Il-sung (1912–1994).");
            vectorRemark.add("Kim obtained two degrees, one in Physics at Kim Il-sung University, and another as an Army officer at the Kim Il-sung Military University.");
            vectorRemark.add("Kim was named the World's 46th Most Powerful Person by the Forbes list of The World's Most Powerful People in 2013");
            context.put("remarks", vectorRemark);
            VelocityHelper.generateHtml(
                "velocity_test.vm", 
                "C:\\Users\\Tsybius\\Desktop\\output.html", 
                context);
            System.out.println("生成完毕");
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
}

模板velocity_test.vm是一个存储着人物通讯录的模板,代码如下:

#set($docDesc="VelocityTest")
#set($docAuthor="Tsybius2014")
#set($docDateTime="2016-05-10 14:29:04")
#set($docRemark="none")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <style type="text/css">
  </style>
  <head>
    <title>$!{name}</title>
  </head>
  <body>
    <table width="100%">
      <tr>
        <!-- Title -->
        <td align="center"><b>Address Book - $!{name}</b></td>
      </tr>
      <tr>
        <!-- BaseInfo -->
        <td>
          <table width="100%" height="100%">
            <tr>
              <td width="10%">Name:</td>
              <td width="30%">$!{name}</td>
              <td width="10%">Gender:</td>
              <td width="30%">$!{gender}</td>
              <td width="20%" rowspan="4">
                <img src="$!{portraitPath}" height="120" width="100"/>
              </td>
            </tr>
            <tr>
              <td width="10%">E-mail:</td>
              <td width="30%">$!{email}</td>
              <td width="10%">Job:</td>
              <td width="30%">$!{job}</td>
            </tr>
            <tr>
              <td width="10%">Company:</td>
              <td width="70%" colspan="3">$!{company}</td>
            </tr>
            <tr>
              <td width="10%">Address:</td>
              <td width="70%" colspan="3">$!{address}</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <!-- Contact -->
        <td>
          <table width="100%" height="100%" >
            <tr>
              <td width="10%" align="left" valign="top">
                Contact:
              </td>
              <td>
                <table width="100%" height="100%" >
                  <tr>
                    <th></th>
                    <th align="left">Contact Type</th>
                    <th align="left">Contact Code</th>
                    <th></th>
                  </tr>
                  #foreach($contactItem in $contactItems.entrySet())
                    <tr>
                      <td align="left" width="5%">$velocityCount</td>
                      <td align="left" width="20%">$contactItem.key</td>
                      <td align="left" width="30%">$contactItem.value</td>
                      <td></td>
                    </tr>
                  #end 
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <!-- Remarks-->
        <td>
          <table width="100%" height="100%" >
            <tr>
              <td width="10%" align="left" valign="top">
                Remark:
              </td>
              <td>
                <table width="100%" height="100%" >
                  #foreach($remark in $remarks)
                    <tr>
                      <td>[$velocityCount] $remark</td>
                    </tr>
                  #end 
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

以JavaApplication的方式运行本工程后,生成的HTML页面output.html如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <style type="text/css">
  </style>
  <head>
    <title>Kim Jung-un</title>
  </head>
  <body>
    <table width="100%">
      <tr>
        <!-- Title -->
        <td align="center"><b>Address Book - Kim Jung-un</b></td>
      </tr>
      <tr>
        <!-- BaseInfo -->
        <td>
          <table width="100%" height="100%">
            <tr>
              <td width="10%">Name:</td>
              <td width="30%">Kim Jung-un</td>
              <td width="10%">Gender:</td>
              <td width="30%">Male</td>
              <td width="20%" rowspan="4">
                <img src="file:///C:/Users/Tsybius/Desktop/kju.jpg" height="120" width="100"/>
              </td>
            </tr>
            <tr>
              <td width="10%">E-mail:</td>
              <td width="30%">kim001@northkorea.gov</td>
              <td width="10%">Job:</td>
              <td width="30%">Chairman of the WPK</td>
            </tr>
            <tr>
              <td width="10%">Company:</td>
              <td width="70%" colspan="3">Workers' Party Of Korea (WPK)</td>
            </tr>
            <tr>
              <td width="10%">Address:</td>
              <td width="70%" colspan="3">The Dark Side Laboratory, Pyongyang, North Korea</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <!-- Contact -->
        <td>
          <table width="100%" height="100%" >
            <tr>
              <td width="10%" align="left" valign="top">
                Contact:
              </td>
              <td>
                <table width="100%" height="100%" >
                  <tr>
                    <th></th>
                    <th align="left">Contact Type</th>
                    <th align="left">Contact Code</th>
                    <th></th>
                  </tr>
                    <tr>
                      <td align="left" width="5%">1</td>
                      <td align="left" width="20%">Tel</td>
                      <td align="left" width="30%">XXX-XXXXXXXX</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td align="left" width="5%">2</td>
                      <td align="left" width="20%">Fax</td>
                      <td align="left" width="30%">XXX-XXXXXXXX</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td align="left" width="5%">3</td>
                      <td align="left" width="20%">Mobile</td>
                      <td align="left" width="30%">XXX-XXXX-XXXX</td>
                      <td></td>
                    </tr>
                  </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <!-- Remarks-->
        <td>
          <table width="100%" height="100%" >
            <tr>
              <td width="10%" align="left" valign="top">
                Remark:
              </td>
              <td>
                <table width="100%" height="100%" >
                  <tr>
                    <td>[1] Kim Jong-un is the Chairman of the Workers' Party of Korea and supreme leader of the Democratic People's Republic of Korea (DPRK), commonly referred to as North Korea.</td>
                  </tr>
                  <tr>
                    <td>[2] Kim is the son of Kim Jong-il (1941–2011) and the grandson of Kim Il-sung (1912–1994).</td>
                  </tr>
                  <tr>
                    <td>[3] Kim obtained two degrees, one in Physics at Kim Il-sung University, and another as an Army officer at the Kim Il-sung Military University.</td>
                  </tr>
                  <tr>
                    <td>[4] Kim was named the World's 46th Most Powerful Person by the Forbes list of The World's Most Powerful People in 2013</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

使用 Firefox 46.0.1 打开此页面后效果图如下:

(部分内容摘自对应人物的维基百科页面)

END

© 著作权归作者所有

共有 人打赏支持
北风其凉

北风其凉

粉丝 115
博文 498
码字总数 463468
作品 4
朝阳
程序员
私信 提问
Apache Velocity实现模板化

1.参考文献 http://www.cnblogs.com/zhuboxingzbx/articles/1225103.html http://www.cnblogs.com/amboyna/archive/2008/06/19/1225105.html 2.概述 2.1.Velocity模板引擎 模板引擎的设计思想......

嗯哼9925
2017/12/20
0
0
J2EE Velocity 前端集成方案--jello

jello 是针对服务端为 JAVA + Velocity 的前端集成解决方案。jello 为优化前端开发而生,提供前后端开发分离、自动性能优化、模块化开发机制等功能。 前后端分离 基于 velocity 模板引擎实现...

叶秀兰
2014/07/28
3.3K
0
Velocity入门指南——第一章 快速入门

1 简介 Velocity是一款基于Java的模板引擎。它允许Web页面设计者引用Java代码中定义的方法。Web设计者能与根据Model-View-Controller (MVC)模型开发Web网站的Java程序员合作,意味着Web页面设...

Leech
2015/12/03
1K
0
基于Velocity的Web开发指南

原文名称《Web Application Guide》,副标题为基于Web的应用技术和VelocityViewServlet入门,地址为此处链接。文章分为四部分,第一部分,通览使用Velocity创建Web应用的好处,第二部分,讲述...

zhmsong
2012/12/24
0
0
[翻译]使用 Velocity 构建一个web应用

作为JSP的替代方案,Velocity 经常被用来在应用中生成web页面。使用Velocity生成页面的一些好处有: Simplicity - 页面可以被非技术型的web设计师创作和维护了。 Ease of maintainance – 脚...

LeoXu
2013/05/16
0
10

没有更多内容

加载失败,请刷新页面

加载更多

Web安全之XSS攻击与防御小结

Web安全之XSS攻防 1. XSS的定义 跨站脚本攻击(Cross Site Scripting),缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从...

前端小攻略
18分钟前
1
0
JavaScript中的继承及实现代码

JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢? 一、构造函数继承 在构造函数中,同样属于两个新创建的函数,也是不相等的 function Fn...

peakedness丶
21分钟前
1
0
记一次面试最常见的10个Redis"刁难"问题

导读:在程序员面试过程中Redis相关的知识是常被问到的话题。作为一名在互联网技术行业打击过成百上千名的资深技术面试官,本文作者总结了面试过程中经常问到的问题。十分值得一读。 Redis在...

小刀爱编程
34分钟前
13
0
TiDB Lab 诞生记 | TiDB Hackathon 优秀项目分享

本文由红凤凰粉凤凰粉红凤凰队的成员主笔,他们的项目 TiDB Lab 在本届 TiDB Hackathon 2018 中获得了二等奖。TiDB Lab 为 TiDB 培训体系增加了一个可以动态观测 TiDB / TiKV / PD 细节的动画...

TiDB
47分钟前
4
0
当区块链遇到零知识证明

本文由云+社区发表 当区块链遇到零知识证明 什么是零知识证明 零知识证明的官方定义是能够在不向验证者任何有用的信息的情况下,使验证者相信某个论断是正确的。这个定义有点抽象,下面笔者举...

腾讯云加社区
56分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部