Velocity魔法堂系列一：入門示例 - fsjohnhuang－IT工程師數位筆記本

文章出處

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　

Velocity作為歷史悠久的模板引擎不單單可以替代JSP作為Java Web的服務端網頁模板引擎，而且可以作為普通文本的模板引擎來增強服務端程序文本處理能力。而且Velocity被移植到不同的平臺上，如.Net的NVelocity和js的Velocity.js，雖然各平臺在使用和實現上略有差別，但大部分語法和引擎核心的實現是一致的，因此學習成本降低不少哦。

最好的學習資源——官網：http://velocity.apache.org/

本系列打算采用如下結構對Velocity進行較為全面的學習，若有不妥或欠缺望大家提出，謝謝。

1. 入門示例

2. VTL語法詳解

3. 模板與宿主環境通信

4. 基礎配置項

5. 深入模板引擎及調優配置

二、入門示例　　　　　　　　　　　　　　　　　　　　　　　　

示例結果是生成如下的html表單：

<form action="./submit">
<div>
  <label for="title">標題：</label>
  <input type="text" id="title" name="title"/>
</div>
<div>
  <label for="brief">摘要：</label>
  <input type="text" id="brief" name="brief"/>
</div>
<div>
  <label for="sex">性別：</label>
  <select id="sex" name="sex">
    <option value="0">男</option>
    <option value="1">女</option>
  </select>
</div>
<div>
  <label for="job">職業：</label>
  <select id="job" name="job">
    <option value="0">Java工程師</option>
    <option value="1">Net工程師</option>
  </select>
</div>
</form>

引入依賴項——velocity-1.7-dep.jar

模板文件frm.vm

##表單模板
##@author fsjohnhuang
##@version 1.0
## 引入外部模板文件
#parse('macro.vm')
## 主邏輯
<form action="$action">
#foreach($input in $inputs)
#input($input.title $input.id)
#end
#foreach($select in $selects)
#select($select.title $select.id $select.items)
#end
</form>

模板文件macro.vm

## 生成input表單元素區域的宏
#macro(input $title $id)
<div>
  <label for="$id">$title</label>
  <input type="text" id="$id" name="$id"/>
</div>
#end
## 生成select表單元素區域的宏
#macro(select $title $id $items)
<div>
  <label for="$id">$title</label>
  <select id="$id" name="$id">
## VTL指令緊貼左側才能確保結果的排版正常（不會有多余空格）
#foreach($key in $items.keySet())
    <option value="$key">$items.get($key)</option>
#end
  </select>
</div>
#end

Java代碼：

public static void main(String[] args) {
        // 初始化模板引擎
        Properties props = new Properties();
        props.put("file.resource.loader.path", ".\\vm");
        VelocityEngine ve = new VelocityEngine(props);
        // 配置引擎上下文對象
        VelocityContext ctx = new VelocityContext();
        ctx.put("action", "./submit");
        ArrayList<HashMap<String, String>> inputs = new ArrayList<HashMap<String,String>>();
        HashMap<String, String> input1 = new HashMap<String, String>();
        input1.put("id", "title");
        input1.put("title", "標題：");
        inputs.add(input1);
        HashMap<String, String> input2 = new HashMap<String, String>();
        input2.put("id", "brief");
        input2.put("title", "摘要：");
        inputs.add(input2);
        ctx.put("inputs", inputs);
        ArrayList<HashMap<String, Object>> selects = new ArrayList<HashMap<String,Object>>();
        HashMap<String, Object> select1 = new HashMap<String, Object>();
        selects.add(select1);
        select1.put("id", "sex");
        select1.put("title", "性別：");
        HashMap<Integer, String> kv1 = new HashMap<Integer, String>();
        kv1.put(0, "男");
        kv1.put(1, "女");
        select1.put("items", kv1);
        HashMap<String, Object> select2 = new HashMap<String, Object>();
        selects.add(select2);
        select2.put("id", "job");
        select2.put("title", "職業：");
        HashMap<Integer, String> kv2 = new HashMap<Integer, String>();
        kv2.put(0, "Java工程師");
        kv2.put(1, "Net工程師");
        select2.put("items", kv2);
        ctx.put("selects", selects);
        // 加載模板文件
        Template t = ve.getTemplate("test.vm");
        StringWriter sw = new StringWriter();
        // 渲染模板
        t.merge(ctx, sw);
        System.out.print(sw.toString());
    }

Velocity模板引擎使用時的關注點分別為以外部文件形式存在的Velocity模板和Java代碼調用。

Velocity模板由VTL（Velocity Template Language）和引擎上下文對象構成；Java代碼調用部分則負責初始Velocity引擎、構建引擎上下文對象、加載Velocity模板和啟動模版渲染。而Velocity模板與Java代碼調用部分通信的紐帶就是引擎上下文對象了。

三、總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

現在我們對Velocity引擎應該有個大概的了解，后續內容將對上述內容逐一深入。

尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/4112328.html ^_^肥仔John

吐槽：倘若對文本的排版有強烈的要求，那么Velocity就不是最佳選擇了。

如上述示例，若想改成如下格式就要重新設計模板形式了：

<form action="./submit">
  <div>
    .................
  </div>
  <div>
    .................
  </div>
  <div>
    .................
  </div>
  <div>
    .................
  </div>
</form>