freemarker ftl模板_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頁面中來填充數據。最終達到渲染頁面的目的。

說人話模板引擎就是,把數據和頁面整合在一起的技術。

 

6a554b272b4be74b5d918b8a63fc066c.png

常用的模板引擎技術:

  • Thymleaf
  • FreeMarker
  • Velocity

今天咱么就來先學習Freemarker

什么是FreeMarker

首先咱們先來介紹下Freemarker的概念,FreeMarker是一個使用純Java編寫的基於模板生成文本輸出的通用工具,通常它的文件都是.ftl結尾。

FreeMarker最初被用來在MVC模式的Web開發框架中生成HTML頁面的,但是它的功能可不僅僅可以用到Web開發生成模板文件,它也可以用於非Web應用環境中,如:生成Java代碼。

FreeMarker的主要特點

既然Freemarker模板技術是Spring Boot官方默認支持的,那么它有哪些特點才如此的備受青睞呢?1.輕量級不像JSP那樣是Servlet要嵌入到應用程序中2.可以生成各種文本文件如:html、xml、java等3.學習成本低因為用java編寫的,所以語法和java很像

接下來我們來看看Spring Boot整合Freemarker的實戰操作

Freemarker渲染Web頁面

首先,添加pom依賴,我們使用SpirngBoot Initializr創建SpringBoot基礎工程(記得加上Web依賴,因為我是搞Web開發)。

按照我們的經驗,在Spring Boot中如果想要集成什么技術只需要添加相關技術的依賴就可以,所以呢,這里我們就直接添加FreeMarker的依賴。

 

593e8abf5d6e976ce5d6708772627430.png

當然你也可以在創建項目的直接勾選需要的依賴也可以,項目在創建完成的時候自動加上這個依賴,如下圖:

 

fac2926d1285a00afa04d290e2f4466b.png

添加FreeMarker相關屬性配置

創建好工程之后,在application.properties文件中添加FreeMarker相關配置。

 

25062f32210f6334aafc755f13bbad01.png

創建頁面

這里需要注意的是freemarker的文件名是以.ftl后綴的,我們在resourcestemplates文件夾下創建freemarker.ftl文件,需要注意的是freemarker在取值的時候使用的是插值表達式。

 

6aa56702cb4d4fa23fa122ef2564bf2a.png

創建Controller

這里需要注意,在寫controller的時候,我們使用注解是@Controller,因為我們要跳轉到html頁面,不在是返回JSON數據了

 

12b1a894fb1a471bf94cbe49586619a9.png

測試結果

最后啟動Spirng Boot工程,在瀏覽器地址欄中輸入http://localhost:8080/freemarker就可以,效果如下:

 

c2db34b4ba83be0c9ed1ee88b85491a8.png

好了,通過以上簡單的幾步就可以輕松實現Spring Boot整合FreeMarker模板引擎技術進行web開發了,是不是很激動呢。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM