Web開發(fā)人員必會(huì)的模板引擎技術(shù)之Freemarke

Web開發(fā)人員必會(huì)的模板引擎技術(shù)之Freemarker

幾何時(shí)，Web開發(fā)是個(gè)多么高大上的名字，程序猿們都以能搞定Web技術(shù)為榮，此時(shí)還沒有前后端之說。然而隨著互聯(lián)網(wǎng)的發(fā)展，社會(huì)分工進(jìn)一步細(xì)化，職業(yè)崗位也更加細(xì)分，慢慢開始有了前端攻城獅和后端攻城獅，技術(shù)也進(jìn)一步細(xì)分，出現(xiàn)了以HTML、JS等為主的頁面技術(shù)，以Java、Pyton為主的后端開發(fā)語言技術(shù)。

事實(shí)上，直到前后端分離開發(fā)模式已經(jīng)逐漸成為主流的今天，前后端技術(shù)的劃分也沒能完全清晰，我們可能會(huì)經(jīng)常聽到一個(gè)叫全棧工程師的名字，這是一類野心極其大想前后端通吃的程序猿，這是要逼著其他程序猿回家種地的節(jié)奏，程序猿沒有女朋友已經(jīng)夠慘了，還要這樣傷害這些單純可愛的人嗎？

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

全棧工程師其實(shí)就是前端和后端技術(shù)都會(huì)的一類人，而這類人基本都是后端工程師；為什么這么說呢，以Java工程師為例，哪個(gè)Java工程師不會(huì)HTML、JS呢，否則會(huì)被人鄙視的；甚至經(jīng)驗(yàn)豐富的老司機(jī)比真正前端工程師還要精通。Web開發(fā)本身就是后端工程師的一部分工作。比如，在Java Web開發(fā)領(lǐng)域程序猿通常是既寫前端代碼，也寫后端代碼；而且Web開發(fā)有著很多很優(yōu)秀的頁面技術(shù)HTML、JSP等。這些優(yōu)秀的頁面技術(shù)，使Java在Web開發(fā)領(lǐng)域有著舉足輕重的地位。

咱們今天要學(xué)習(xí)的也是一個(gè)在Java開發(fā)領(lǐng)域非常流行的模板引擎技術(shù)-Freemarker，用過Spring Boot的同學(xué)可能都知道，Spring Boot在自己體系里默認(rèn)支持的頁面技術(shù)不是JSP，而是Thymleaf、Freemarker的模板引擎技術(shù)。所以，今天咱們就先來學(xué)習(xí)一下其中的一個(gè)，使用Freemarker模板引擎技術(shù)做Web開發(fā)。

那么問題來了，咱們一直在說模板引擎技術(shù)，那什么是模板引擎呢？接下來咱們先來了解一下模板引擎技術(shù)。

什么是模板引擎技術(shù)

傳統(tǒng)的頁面開發(fā)過程中通常采用的HTML + JS技術(shù)，而現(xiàn)在大部分網(wǎng)站都采用標(biāo)簽化+ 模塊化的設(shè)計(jì) 。模板引擎其實(shí)就是根據(jù)這種方式，使用戶界面與業(yè)務(wù)數(shù)據(jù)（內(nèi)容）分離而產(chǎn)生的，它可以生成特定格式的文檔，用于網(wǎng)站的模板引擎就會(huì)生成一個(gè)標(biāo)準(zhǔn)的HTML文檔在原有的HTML頁面中來填充數(shù)據(jù)。最終達(dá)到渲染頁面的目的。

說人話就是，把數(shù)據(jù)和頁面整合在一起的技術(shù)。

常用的模板引擎技術(shù)：

? Thymleaf

? FreeMarker

? Velocity

今天咱們就來先學(xué)習(xí)Freemarker。

什么是FreeMarker

咱們先來介紹下Freemarker的概念，F(xiàn)reeMarker是一個(gè)使用純Java編寫的基于模板生成文本輸出的通用工具，通常它的文件都是.ftl結(jié)尾，F(xiàn)reeMarker最初被用在MVC模式的Web開發(fā)框架中生成HTML頁面，但是它的功能可不僅僅可以用到Web開發(fā)生成模板文件，它也可以用于非Web應(yīng)用環(huán)境中，如：生成Java代碼。

FreeMarker的主要特點(diǎn)

既然Freemarker 模板技術(shù)是Spring Boot官方默認(rèn)支持的，那么它有哪些特點(diǎn)，才如此的備受青睞呢？

? 輕量級

不像JSP那樣是Servlet要嵌入到應(yīng)用程序中

? 可以生成各種文本文件

如：html、xml、java等

? 學(xué)習(xí)成本低

因?yàn)槭怯胘ava編寫的，所以語法和java很像

好了，接下來我們來看看Spring Boot整合 Freemarker 的實(shí)戰(zhàn)操作。

Freemarker 渲染 Web 頁面

首先，添加pom依賴，我們使用SpirngBoot Initializr 創(chuàng)建SpringBoot基礎(chǔ)工程（記得加上Web依賴，因?yàn)槲沂歉鉝eb開發(fā)），按照我們的經(jīng)驗(yàn)，在Spring Boot中如果想要集成什么技術(shù)只需要添加相關(guān)技術(shù)的依賴就可以，所以呢，這里我們就直接添加FreeMarker的依賴。

當(dāng)然你也可以在創(chuàng)建項(xiàng)目時(shí)直接勾選需要的依賴，項(xiàng)目在創(chuàng)建完成的時(shí)候自動(dòng)加上這個(gè)依賴，如下圖：

添加FreeMarker相關(guān)屬性配置

創(chuàng)建好工程之后，在application.properties文件中添加FreeMarker相關(guān)配置。

創(chuàng)建頁面

這里需要注意的是freemarker的文件名是以.ftl后綴的，我們在resources\templates文件夾下創(chuàng)建freemarker.ftl文件，需要注意的是freemarker在取值的時(shí)候使用的是插值表達(dá)式。

創(chuàng)建Controller

這里需要注意,在寫controller的時(shí)候，我們使用注解是@Controller，因?yàn)槲覀円D(zhuǎn)到html頁面，不再是返回JSON數(shù)據(jù)了。

測試結(jié)果

最后啟動(dòng)Spirng Boot工程，在瀏覽器地址欄中輸入如下地址就可以了，

效果如下：

好了，通過以上簡單的幾步就可以輕松實(shí)現(xiàn)Spring Boot整合FreeMarker模板引擎技術(shù)進(jìn)行web開發(fā)了，是不是很激動(dòng)呢？

怎么樣，你了解了么？歡迎和我們一起探討。

更多IT技術(shù)干貨，請關(guān)注課工場，和我們一起關(guān)注前沿技術(shù)，快速提升。

件項(xiàng)目實(shí)訓(xùn)及課程設(shè)計(jì)指導(dǎo)——如何在Web應(yīng)用系統(tǒng)表示層開發(fā)實(shí)現(xiàn)中應(yīng)用Velocity模板技術(shù)

1、分離Web表示層的數(shù)據(jù)處理和展現(xiàn)邏輯的常見的應(yīng)用技術(shù)

分離Web表示層的數(shù)據(jù)處理和展現(xiàn)邏輯是目前企業(yè)級的Web應(yīng)用系統(tǒng)開發(fā)中表現(xiàn)層組件開發(fā)實(shí)現(xiàn)中的基本實(shí)現(xiàn)目標(biāo)。為此，軟件應(yīng)用系統(tǒng)的設(shè)計(jì)和開發(fā)實(shí)現(xiàn)人員必須要尋找到一種能夠減少軟件開發(fā)人員重復(fù)勞動(dòng)的方法，讓程序員將更多的精力放在業(yè)務(wù)邏輯以及其它更加具有創(chuàng)造力的工作上。

因此，讀者在課程設(shè)計(jì)的項(xiàng)目開發(fā)中，不應(yīng)該在Web頁面中出現(xiàn)包含大量的服務(wù)器端腳本程序代碼的Web頁面狀況，這樣的Web應(yīng)用系統(tǒng)在后期的系統(tǒng)維護(hù)、升級中都會(huì)比較困難。

如下示圖所示的程序代碼示例是不良好的Web表示層程序?qū)崿F(xiàn)的代碼示例，因?yàn)椴粌H在Web頁面（*.jsp）中包含有大量的Java程序腳本的代碼，而且在JSP頁面中直接訪問數(shù)據(jù)庫（沒有合理地進(jìn)行分層設(shè)計(jì)）和應(yīng)用System.out.print控制臺(tái)信息的輸出語句（此語句只能將信息打印輸出到服務(wù)器主機(jī)的系統(tǒng)控制臺(tái)上而不能輸出到Web瀏覽器中，前端用戶根本就無法瀏覽到相關(guān)的信息）。

希望讀者在學(xué)習(xí)和閱讀作者的《軟件項(xiàng)目實(shí)訓(xùn)及課程設(shè)計(jì)指導(dǎo)》系列文章的內(nèi)容時(shí)，重點(diǎn)掌握目前比較主流的分離Web表示層的數(shù)據(jù)處理和展現(xiàn)邏輯的技術(shù)實(shí)現(xiàn)方法——比如，采用CSS+Div分離Web表示層數(shù)據(jù)和表現(xiàn)、應(yīng)用XML+XSLT技術(shù)徹底分離數(shù)據(jù)和樣式、應(yīng)用Velocity模板技術(shù)實(shí)現(xiàn)開發(fā)職責(zé)分離，并能夠在課程設(shè)計(jì)的項(xiàng)目開發(fā)中應(yīng)用作者在本系列文章中介紹的各種方法。

當(dāng)然，分離Web表示層的數(shù)據(jù)處理和展現(xiàn)邏輯目前其實(shí)有多種不同的實(shí)現(xiàn)方式，不僅僅局限于作者在上文中所提及和介紹過的方法，比如同樣很優(yōu)秀的 Freemarker 也獲得了非常廣泛的應(yīng)用。因此，讀者在項(xiàng)目開發(fā)實(shí)現(xiàn)中應(yīng)該要根據(jù)項(xiàng)目的具體需要和自己對具體技術(shù)實(shí)現(xiàn)的熟悉程度合理地選用。

作者在下文中將為讀者介紹如何在J2EE 系統(tǒng)平臺(tái)中的Web應(yīng)用系統(tǒng)表示層開發(fā)實(shí)現(xiàn)中應(yīng)用Velocity模板技術(shù)。但作者考慮到Velocity模板技術(shù)以及隨后幾篇文章中將要介紹的Struts和Struts2應(yīng)用框架等技術(shù)在目前高校的課堂教學(xué)中一般都不會(huì)涉及，因此部分讀者可能在閱讀本系列文章的內(nèi)容時(shí)對Velocity模板技術(shù)和Struts2應(yīng)用框架會(huì)感覺比較陌生，給讀者的學(xué)習(xí)和理解會(huì)帶來一定的難度。

作者建議讀者在課程設(shè)計(jì)的項(xiàng)目開發(fā)中能夠應(yīng)用Velocity模板技術(shù)，經(jīng)過一段時(shí)間的項(xiàng)目開發(fā)和應(yīng)用的實(shí)踐，也就能夠慢慢地熟悉和掌握Velocity模板技術(shù)和Struts2應(yīng)用框架等應(yīng)用技術(shù)。

2、什么是J2EE 系統(tǒng)平臺(tái)中的Velocity模板技術(shù)

Velocity是Apache 基金會(huì)的一個(gè)開源的模板引擎（Template Engine）項(xiàng)目，其初始開發(fā)的主要目標(biāo)是分離基于MVC 體系架構(gòu)設(shè)計(jì)模式的應(yīng)用系統(tǒng)的持久化層和業(yè)務(wù)層，但目前被廣泛地應(yīng)用于J2EE Web應(yīng)用系統(tǒng)中的表示層組件開發(fā)中。它能夠允許Web開發(fā)者在不使用傳統(tǒng)的JSP頁面的應(yīng)用情況下，可以用 Velocity模板讓HTML頁面也能夠具有動(dòng)態(tài)內(nèi)容的特性。

如下示圖為Apache Velocity的官方網(wǎng)站頁面中對Velocity模板相關(guān)技術(shù)特性和應(yīng)用介紹的文字局部截圖。

讀者可以從Velocity的官方網(wǎng)站上下載Velocity的系統(tǒng)運(yùn)行包文件和技術(shù)參考文檔等系統(tǒng)庫和資料，然后再解包該系統(tǒng)庫的運(yùn)行包文件，請見下圖所示的下載頁面。

Velocity是一種基于Java系統(tǒng)平臺(tái)的模板引擎，它允許軟件應(yīng)用系統(tǒng)的開發(fā)人員使用簡單而強(qiáng)大的模板語言來引用哪些定義在Java程序代碼中的對象。而且Velocity應(yīng)用具有簡潔的語法和采用類似腳本語言的方式引用目標(biāo)數(shù)據(jù)對象。

Velocity模板引擎本身不是采用標(biāo)準(zhǔn)的模型視圖控制器（MVC）體系結(jié)構(gòu)設(shè)計(jì)，它只是Web應(yīng)用系統(tǒng)中的"模型組件"和"視圖組件"之間的橋梁。并為Web頁面的前端開發(fā)和制作人員提供了一種清晰而又簡單的模板語法，而且模板和程序代碼是分離的。

所以Web應(yīng)用系統(tǒng)的開發(fā)人員可以分別獨(dú)立地開發(fā)和維護(hù)它們，Web前端開發(fā)人員可以和后端Java 程序開發(fā)人員同步開發(fā)一個(gè)遵循 MVC體系架構(gòu)的Web應(yīng)用系統(tǒng)。而且目前的Velocity 模板引擎也很容易能夠集成到J2EE Web容器的運(yùn)行環(huán)境中——如Servlet容器中，也很容易能夠與Struts應(yīng)用框架和Struts2應(yīng)用框架相互集成。

因?yàn)閂elocity 模板引擎的強(qiáng)大之處在于它嚴(yán)格地區(qū)分Web應(yīng)用系統(tǒng)項(xiàng)目開發(fā)中的人員職責(zé)劃分——頁面開發(fā)人員只需要把精力和關(guān)注點(diǎn)放在數(shù)據(jù)的顯示功能實(shí)現(xiàn)部分，而Java程序員更多地只需要關(guān)注如何編程應(yīng)用系統(tǒng)中的控制層程序和商業(yè)業(yè)務(wù)邏輯、系統(tǒng)中數(shù)據(jù)庫表中數(shù)據(jù)的訪問控制和管理等方面的功能實(shí)現(xiàn)。

Velocity 模板是一個(gè)目前比較流行的JSP頁面技術(shù)的替代物，并且能夠?qū)崿F(xiàn)把 Java 程序代碼從Web頁面中分離出來。

3、Velocity 模板語言VTL

Velocity 模板使用的腳本語言稱為 Velocity 模板語言（VTL，Velocity Template Language），但它和其它形式的腳本語言（如JavaScript等）相比，Velocity 模板語言的語法相對而言比較簡單。

在Velocity 模板語言中提供有變量定義、指令、注釋、對象的引用和各種運(yùn)算符、宏定義等，也還提供了許多的內(nèi)置對象。比如下面的代碼語句是設(shè)置變量someVarable的值為"Velocity"：#set( $someVarable="Velocity" )。

在上面的代碼中讀者可以看到很多以"#"和"$"字符開頭的內(nèi)容，這些都是 Velocity 模板語言的語法。在 Velocity模板語言中所有的關(guān)鍵字都是以"#"開頭的，而所有的變量則是以"$"開頭。Velocity 模板語言的語法類似于 JSP 技術(shù)中的 JSTL（JSP標(biāo)準(zhǔn)的標(biāo)簽庫）。

作者考慮到本文章的篇幅有限，在此文中不能詳細(xì)地為讀者介紹Velocity 模板語言的語法，讀者有興趣可以參考和閱讀Velocity 的官方文檔，其中提供了Velocity 語法相關(guān)的詳細(xì)內(nèi)容。

4、Velocity模板系統(tǒng)庫中的VelocityServlet組件類

雖然大多數(shù)基于Velocity模板的Java應(yīng)用都是基于J2EE Servlet的Web應(yīng)用系統(tǒng)，但其實(shí)Velocity模板是可以應(yīng)用于J2SE的應(yīng)用程序和J2EE Web應(yīng)用程序的兩種不同的開發(fā)環(huán)境中。但作者在本文中主要介紹在J2EE Web應(yīng)用程序的開發(fā)環(huán)境中如何應(yīng)用Velocity模板。

但由于Velocity模板只是一個(gè)模板引擎，讀者如果需要在J2EE Web應(yīng)用系統(tǒng)項(xiàng)目中應(yīng)用Velocity模板，還需要在項(xiàng)目中添加一個(gè)HTTP框架以便能夠處理HTTP請求（request）和轉(zhuǎn)發(fā)（response）。

為此，在Velocity模板所提供的系統(tǒng)程序包中，提供有一個(gè)VelocityServlet組件類（org.apache.velocity.servlet.VelocityServlet），Web應(yīng)用系統(tǒng)只需要繼承并擴(kuò)展它便可以很快地創(chuàng)建一個(gè)基于Velocity模板功能處理的Servlet程序，也就是通過繼承VelocityServlet 組件類以產(chǎn)生出自己的Servlet組件。

由于Velocity 模板的系統(tǒng)庫不斷地在更新和升級，如果讀者通過繼承VelocityServlet 組件類以產(chǎn)生出自己的Servlet組件時(shí)出現(xiàn)如下的提示信息："the type VelocityServlet is deprecated"，說明讀者所下載的Velocity 模板系統(tǒng)庫中已經(jīng)將VelocityServlet升級替換為org.apache.velocity.tools.view.VelocityViewServlet類，讀者只需要將VelocityServlet類修改為VelocityViewServlet類。

如下示圖為Velocity官方網(wǎng)站頁面中對新版本的Velocity 模板系統(tǒng)庫中的VelocityViewServlet類的定義說明局部截圖。

在自己派生出的Servlet組件中可以獲得與HTTP請求相關(guān)的request、session與application等對象，從而也可以直接獲得通過Servlet容器保存在這幾個(gè)域?qū)ο笾械闹祷蛘叻祷貥I(yè)務(wù)處理后的結(jié)果值。

因此，應(yīng)用Velocity 模板技術(shù)可以分離Web應(yīng)用系統(tǒng)中的業(yè)務(wù)處理邏輯和數(shù)據(jù)顯示風(fēng)格控制邏輯。

5、在Web表示層開發(fā)實(shí)現(xiàn)中應(yīng)用Velocity模板的基本步驟

Velocity 的任何模板都可以被VelocityServlet使用、并且能夠部署在服務(wù)器上，也相對比較簡單。只需要采用以下的開發(fā)實(shí)現(xiàn)步驟：

（1）Web應(yīng)用系統(tǒng)的開發(fā)人員首先通過繼承 org.apache.velocity.servlet.VelocityServlet 類（或者org.apache.velocity.tools.view.VelocityViewServlet類）并派生出自己的Servlet 程序類；

（2）其次，在所派生出的Servlet 程序類中，重寫并實(shí)現(xiàn)其中的一個(gè)handleRequest()方法，在 handleRequest() 的方法實(shí)現(xiàn)中，從文件或資源（如JAR文件）中取得模板文件并返回該模板；

如下示圖為Velocity官方網(wǎng)站頁面中對handleRequest()的方法定義及功能、返回參數(shù)的說明局部截圖。

（3）最后，在重寫的handleRequest() 的方法實(shí)現(xiàn)中，添加希望在模板中作為上下文屬性使用的數(shù)據(jù)或Velocity工具，并且由VelocityServlet向?yàn)g覽器響應(yīng)輸出——可以由它在向HttpServletResponse的OutputStream 流對象發(fā)送之前生成要響應(yīng)輸出的 HTML標(biāo)簽。

體現(xiàn)在Web表示層開發(fā)實(shí)現(xiàn)中應(yīng)用Velocity模板的基本步驟相關(guān)的程序代碼示例如下，讀者可以根據(jù)自己的應(yīng)用項(xiàng)目的需要進(jìn)行修改和擴(kuò)展。

public class VelocityServletDemo extends VelocityViewServlet {
      @Override
      protected Template handleRequest(HttpServletRequest request, HttpServletResponse response, Context ctx) {
            /** 在Context上下文環(huán)境容器對象實(shí)例中存放指定名稱的變量值 */
            ctx.put("someVarableName","someVarableValue");
            /** 也可以在request域?qū)ο髮?shí)例中存放指定名稱的變量值 */
            request.setAttribute("someVarableName","someVarableValue");
            …
            … 其它的程序代碼，在此省略
            …
            /** 在業(yè)務(wù)處理完畢后再 forward轉(zhuǎn)發(fā)到指定模板 */
            return getTemplate("myVelocityTemplate.html");
      }
}

Velocity 模板文件是文本格式的文件，并且它可以是HTML、XML等類型的文件（上面的程序代碼示例中的模板文件名稱為myVelocityTemplate.html）。但在模板文件中一般包括有如下幾個(gè)不同部分的內(nèi)容：

1）照原樣合并的靜態(tài)部分

2）將被要合并的數(shù)據(jù)替代的占位符

3）腳本語言中的指示符和指令。

如下頁面代碼為上面程序代碼中最終轉(zhuǎn)發(fā)到的myVelocityTemplate.html模板文件代碼示例，它與標(biāo)準(zhǔn)的HTML頁面差別在于其中包含有黑體標(biāo)識的數(shù)據(jù)獲取表達(dá)式，如$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>一個(gè)簡單的VelocityWeb應(yīng)用頁面</title>
</head><body>
      <center> <h2>下面為Servlet處理后的結(jié)果</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頁面為靜態(tài)的HTML頁面而不是動(dòng)態(tài)的服務(wù)器端的JSP頁面，因此頁面的響應(yīng)速度將會(huì)大大地提高，從而應(yīng)用Velocity 模板技術(shù)的Web頁面可以是非JSP類型的Web頁面——達(dá)到"動(dòng)態(tài)內(nèi)容靜態(tài)化"的應(yīng)用效果。

6、如何在派生的Servlet程序中向響應(yīng)輸出的目標(biāo)頁面?zhèn)鬟f數(shù)據(jù)

J2EE Web應(yīng)用系統(tǒng)的開發(fā)人員只需要把數(shù)據(jù)放置到Velocity的上下文對象中（org.apache.velocity.context.Context），然后Velocity引擎使用Velocity上下文對象中的數(shù)據(jù)、并應(yīng)用到模板文件中，最后按照模板文件的格式輸出數(shù)據(jù)。在上面的示例代碼中的如下語句則是在模板文件中獲得保存在Velocity上下文對象中的指定名稱的數(shù)據(jù)值，然后在表格行中顯示。

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

7、與Velocity模板相關(guān)的兩個(gè)重要的概念

（1）Velocity模板（Template類）

它是遵守Velocity VTL模板語言的語法規(guī)則定義的一個(gè)文本格式的文件，該文件采用Velocity語言定義模板文件。比如下面的程序示例代碼是獲得指定文件名稱為VelocityTemplate.vm的模板文件，并指定所應(yīng)用的編碼格式為中文GB2312編碼：

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

在默認(rèn)的情況下，Velocity模板引擎的系統(tǒng)程序會(huì)在Web應(yīng)用系統(tǒng)資源根路徑下搜索*.vm文件，所以開發(fā)人員直接將*.vm文件放在Web應(yīng)用系統(tǒng)資源根路徑下即可（當(dāng)然，也可以通過配置velocity.properties文件中的配置項(xiàng)目來指定加載的路徑）。

（2） Velocity上下文（VelocityContext類）

它是Velocity模板引擎系統(tǒng)的一個(gè)容器，用于保存相關(guān)的業(yè)務(wù)數(shù)據(jù)。開發(fā)人員可以把Velocity模板上下文VelocityContext類看作是導(dǎo)入 Java 對象并在 Velocity 模板內(nèi)部訪問的一種方法。

比如下面的程序代碼是創(chuàng)建一個(gè)VelocityContext類的對象，并在其中保存需要向Web表示層頁面?zhèn)鬟f的參數(shù)——參數(shù)的名稱為userName，而對應(yīng)的參數(shù)值為"張三"。

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

因此，只需要通過創(chuàng)建 org.apache.velocity.context.Context 類型的對象實(shí)例就可以獲得 Velocity 的上下文VelocityContext對象，然后利用上下文對象中的 put方法，把要導(dǎo)入到模板文件中的對象附加到上下文中。

當(dāng)然，如果是采用繼承VelocityViewServlet類而派生出自己的Servlet程序類，并在自己的Servlet程序類中重寫handleRequest()方法的方式的程序中，不需要自行再創(chuàng)建出VelocityContext 類的對象實(shí)例，而直接應(yīng)用handleRequest()方法中所攜帶的Context接口類型的對象實(shí)例（參看如下示例代碼中的黑體標(biāo)識的代碼）。

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

應(yīng)用XML+XSLT技術(shù)分離Web應(yīng)用表示層數(shù)據(jù)和樣式的實(shí)例

如何應(yīng)用“XML+XSLT”技術(shù)分離Web表示層數(shù)據(jù)和樣式

如何應(yīng)用CSS+Div分離Web表示層數(shù)據(jù)處理邏輯和展現(xiàn)邏輯

如何正確應(yīng)用Web MVC架構(gòu)模式分離表示層和模型層耦合關(guān)系

如何應(yīng)用策略設(shè)計(jì)模式分離JDBC數(shù)據(jù)庫連接中的外部環(huán)境信息

件項(xiàng)目實(shí)訓(xùn)及課程設(shè)計(jì)指導(dǎo)——如何利用MyEclipse開發(fā)工具開發(fā)基于Velocity模板的Web應(yīng)用

1、在MyEclipse開發(fā)工具中新建一個(gè)名稱為WebVelocity的Web項(xiàng)目

在名稱為WebVelocity的J2EE Web應(yīng)用項(xiàng)目中的lib目錄下添加Velocity模板所需要JAR包文件velocity-1.6.1-dep.jar，請見下圖所示的最終操作的結(jié)果截圖。

由于Velocity 模板的系統(tǒng)庫不斷地在更新和升級，讀者可以從Velocity的官方網(wǎng)站上下載Velocity的系統(tǒng)運(yùn)行包文件和技術(shù)參考文檔等系統(tǒng)庫和資料，然后再解包該系統(tǒng)庫的運(yùn)行包文件，請見下圖所示的下載頁面。

2、在該Web項(xiàng)目中添加一個(gè)文件名稱為userLogin.jsp的JSP頁面

在該userLogin.jsp的JSP頁面中添加一個(gè)實(shí)現(xiàn)應(yīng)用系統(tǒng)的用戶登陸功能的Web表單，并且向應(yīng)用系統(tǒng)后臺(tái)的Servlet組件發(fā)送Web請求。該userLogin.jsp的JSP頁面的內(nèi)容標(biāo)簽請見如下示例中所示的內(nèi)容—— 名稱為userLogin.jsp的JSP頁面內(nèi)容。

<%@ 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瀏覽器中的執(zhí)行結(jié)果如下示例圖所示，其中包含有一個(gè)收集用戶登陸信息的Web表單。

3、在該Web項(xiàng)目中再添加一個(gè)Servlet組件

該Servlet類名稱為UserLoginServlet，程序包名稱為com.px1987.webvelocity.servlet，并且繼承org.apache.velocity.servlet.VelocityServlet類、URL-Pattern為/userloginservlet。該Servlet類代碼內(nèi)容請見如下代碼示例所示的UserLoginServlet類代碼示例。

在新版本的Velocity模板系統(tǒng)庫中，將VelocityServlet類升級替換為VelocityViewServlet（org.apache.velocity.tools.view.VelocityViewServlet）類，讀者在開發(fā)中只需要將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 );
            }
            /** 設(shè)置模板的資源位置 */
            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","不能對模板進(jìn)行解析" );
                        error(request,response,e);
                  }
                  catch( ResourceNotFoundException e ){
                        request.setAttribute("errorText","沒有找到模板文件" );
                        error(request,response,e);
                  }
                  catch( Exception e ){
                        request.setAttribute("errorText","出現(xiàn)了其它方面的錯(cuò)誤" );
                        error(request,response,e);
                  }
            return outTemplate;
      }
      /** 異常處理也都交到error方法處理，可以覆蓋基類中的error的處理辦法，從而實(shí)現(xiàn)對異常的封裝和包裹。*/
      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>錯(cuò)誤信息顯示頁面</title>");
          oneStringBuffer.append("</head><body>"+ errorText+"<br>錯(cuò)誤出現(xiàn)的位置：<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項(xiàng)目的部署描述文件web.xml文件中部署定義該Servlet類

在部署該Servlet類的同時(shí)，還需要為它提供一個(gè)名稱為properties的初始化參數(shù)，其值為Velocity模板的屬性配置文件velocity.properties的路徑信息（在程序UserLoginServlet類中動(dòng)態(tài)獲得）。如下代碼示例為在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項(xiàng)目的velocityConf目錄中添加Velocity的屬性配置文件

在本W(wǎng)eb項(xiàng)目中新增一個(gè)屬性配置文件所在的文件目錄，目錄的名稱為velocityConf，并在該velocityConf目錄下，再添加一個(gè)文件名稱為velocity.properties文件。設(shè)置該文件中的內(nèi)容，請見如下代碼中的示例——Velocity模板引擎（Template Engine）的velocity.properties屬性配置文件的示例

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

該文件為Velocity模版引擎的初始化參數(shù)文件，Web應(yīng)用系統(tǒng)的開發(fā)人員可以在其中設(shè)置相關(guān)的工作參數(shù)，這些工作參數(shù)主要是Velocity模板引擎的配置、編碼、緩存、日志等文件的工作參數(shù)的定義等。

當(dāng)然，在Velocity模版引擎中也預(yù)設(shè)了一些默認(rèn)的配置屬性，從而避免開發(fā)人員出現(xiàn)錯(cuò)誤的配置項(xiàng)目。Web應(yīng)用系統(tǒng)的開發(fā)人員通過配置velocity.properties文件，可以自定義vm文件加載方式，指定編碼等。

當(dāng)然，也可以不配置velocity.properties文件而使用缺省的值即可。如下代碼示例是一個(gè)更有代表性的velocity.properties文件的配置示例。

## 設(shè)置Velocity模版引擎的模板文件加載器，webapp從應(yīng)用根目錄加載
      resource.loader=webapp
      webapp.resource.loader.class=org.apache.velocity.tools.view.servlet.WebappLoader
## 定義Velocity模版引擎的模板文件路徑為Web應(yīng)用系統(tǒng)的根目錄文件夾
			webapp.resource.loader.path=/
## 設(shè)置Velocity模版引擎的編碼方式
      input.encoding=UTF-8
      output.encoding=UTF-8

讀者也可以根據(jù)Web應(yīng)用項(xiàng)目的需要，將其中的"input.encoding"和"output.encoding"設(shè)置為中文編碼格式，如GBK或者GB2312等。

5、在Web項(xiàng)目中再添加一個(gè)webVelocityApp.html模板文件

Velocity 模板文件其實(shí)是文本格式的文件，并且模板文件除了可以為*.vm的模板文件之外，還可以是HTML、XML 等標(biāo)準(zhǔn)格式類型的文本文件。因此，模板文件的文件擴(kuò)展名可以是*.vm、*.html和*.xml等類型。在模板文件中一般都會(huì)包括有：

1）照原樣合并的靜態(tài)部分

2）將被要合并的數(shù)據(jù)替代的占位符

3）腳本語言中的指示符和指令

因此，在Web項(xiàng)目中新增一個(gè)HTML頁面文件，它是文件名稱為webVelocityApp.html的模板文件，在該模板文件中添加如下代碼示例所示的HTML標(biāo)簽內(nèi)容——webVelocityApp.html模板文件中的HTML標(biāo)簽內(nèi)容，讀者注意其中黑體標(biāo)識的語句。

<!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>一個(gè)簡單的VelocityWeb應(yīng)用頁面</title>
      </head>
      <body>
            <center> <h2>下面為Servlet處理后的結(jié)果</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>

由于上面的這個(gè)模板文件是一個(gè)完整的 HTML 文件，因此可以使用任何Web頁面設(shè)計(jì)工具或者文本編輯器來創(chuàng)建和編輯該HTML頁面文件；在模板文件中訪問保存在上下文對象中的屬性：

比如，可以使用 $userName指令來引用前面保存到上下文對象中的屬性。注意：在Velocity模板文件中，變量的定義都是使用"$"字符開頭的，"$"字符作為Velocity模板文件中的標(biāo)識符。

由于Velocity模板引擎系統(tǒng)采用簡單而強(qiáng)大的模板語言VTL實(shí)現(xiàn)對Web頁面的渲染，因此能保證在Dreamwaver之類的Web頁面可視化編輯器中都能夠正常顯示；另外，模板文件可以是任意的文件擴(kuò)展名，采用*.vm、*.html或者*.xml都是可以的（本示例采用*.html文件擴(kuò)展名），這樣就能直接在Web瀏覽器中看到Web頁面的預(yù)覽的效果。

6、執(zhí)行該Web應(yīng)用并測試Velocity模板的功能效果

讀者可以直接在瀏覽器中輸入如下形式的URL地址字符串，直接瀏覽用戶登錄頁面http://127.0.0.1:8080/WebVelocity/userLogin.jsp的請求URL地址后，將會(huì)出現(xiàn)如下示圖所示的實(shí)現(xiàn)用戶登陸功能的頁面。

讀者在上圖中所示的Web表單框中輸入用戶名稱和密碼，然后點(diǎn)擊其中的"提交"按鈕后，Web表單頁面將向Web應(yīng)用系統(tǒng)后臺(tái)的Servlet組件提交Web請求，最后將出現(xiàn)如下示圖所示的執(zhí)行結(jié)果狀態(tài)——本示例為了驗(yàn)證應(yīng)用Velocity模版引擎的正確性，在響應(yīng)頁面中獲得用戶登錄的賬戶和密碼等信息，然后在頁面中顯示以比對是否正確地獲得了相關(guān)的數(shù)據(jù)。

從執(zhí)行結(jié)果和最終在Web瀏覽器中響應(yīng)輸出的信息來看，本示例的功能是正確的，對Velocity模版引擎的應(yīng)用也是合情合理和正確的。

當(dāng)然，在實(shí)際的Web應(yīng)用系統(tǒng)中的業(yè)務(wù)處理邏輯中，并不會(huì)簡單直接地顯示出用戶敏感的登錄信息，而是通過訪問系統(tǒng)后臺(tái)的物理數(shù)據(jù)庫系統(tǒng)中的數(shù)據(jù)庫表中的數(shù)據(jù)，比對用戶提交的登錄信息是否合法和有效。

另外，webVelocityApp.html頁面為靜態(tài)的HTML頁面而不是動(dòng)態(tài)的服務(wù)器端的JSP頁面，如果在本W(wǎng)eb示例中不應(yīng)用Velocity模版引擎系統(tǒng)，是很難實(shí)現(xiàn)在靜態(tài)的HTML頁面中獲得服務(wù)器端返回的業(yè)務(wù)處理結(jié)果的參數(shù)。

因此Web頁面的響應(yīng)速度將會(huì)大大地提高，從而應(yīng)用Velocity 模板技術(shù)的Web頁面可以是非JSP類型的Web頁面——達(dá)到"動(dòng)態(tài)內(nèi)容靜態(tài)化"的應(yīng)用效果。

如何在Web應(yīng)用系統(tǒng)表示層開發(fā)中應(yīng)用Velocity模板技術(shù)