網頁靜態化解決方案Freemarker

時間 2019-11-06

原文原文鏈接

序言：html

　　沉澱了三個月，逐步將本身最近兩年在公司中用到的技術和知識點，從新整理概括了下，對比之前能夠發現，如今技術更新愈來愈快，也愈來愈成熟，在互聯網企業，用到的技術也更先進，更領先，好比微服務、分佈式和高併發等等。接下來我會將本身創業的時候在客戶作項目，用到的一些技術和知識點給你們分享，供你們參考學習。下面咱們先從網頁靜態化技術開始，這在項目中仍是用的比較多的，若是小夥伴還有什麼但願瞭解的技術，能夠在留言區註釋，我會挑選本身擅長的地方給你們分享。下面開始今天的學習吧！java

——WZY程序員

1、什麼是Freemarker?它是幹什麼用的?爲何要使用網頁靜態化技術?web

　　1.什麼是Freemarker:　　　　　　數據庫

　　FreeMarker 是一個用 Java 語言編寫的模板引擎，它基於模板來生成文本輸出。FreeMarker 與 Web 容器無關，即在 Web 運行時，它並不知道 Servlet 或 HTTP。它不只能夠用做表現層的實現技術，並且還能夠用於生成 XML， JSP 或 Java 等。編程

　　這是什麼意思呢?有的同窗可能讀完，也沒明白說的是啥。還記得以前，我給你們分享的mybatis的逆向工程嗎？其實原理相似Freemarker。簡單來講，就是能夠經過編碼java代碼，將固定模板和動態的參數填充到一塊兒，生成所須要的文件。根據不一樣的模板，能夠生成不一樣的文件，好比提供HTML模板，能夠生成所須要的HTML文件。json

2.爲何要使用Freemarker?他的使用場景是什麼?　　　　　　緩存

　　網頁靜態化解決方案在實際開發中運用比較多，例如新聞網站，門戶網站中的新聞頻道或者是文章類的頻道。也好比說一些電商的商品詳情頁面，雖然每一個商品的詳情內容是不同的，可是它總體的佈局是一致了，好比每一個商品都有標題，價格，圖片，商品介紹等等，咱們使用Freemarker將固定不變的內容定義層模板,而後將不動態的內容去從數據庫中查詢出來,再綁定到模板一個一個對應位置，就能夠生成，每一個商品本身的詳情頁了。服務器

　　那麼咱們爲何要使用網頁靜態化呢，像咱們之前那樣，直接定義好頁面，用戶訪問的時候，再將頁面的動態內容查詢填充展現不行嗎？很顯然，使用了網頁靜態化技術，用戶訪問的是生成好的靜態頁面，不用再直接去數據庫中取查詢數據。網頁靜態化技術和緩存技術的共同點都是爲了減輕數據庫的訪問壓力，可是具體的應用場景不一樣，緩存比較適合小規模的數據，而網頁靜態化比較適合大規模且相對變化不太頻繁的數據。mybatis

　　另外網頁靜態化還有利於 SEO。另外咱們若是將網頁以純靜態化的形式展示，就可使用 Nginx 這樣的高性能的 web服務器來部署。 Nginx 能夠承載 5 萬的併發，而 Tomcat 只有幾百。關於 Nginx 我在後續的博客中會詳細講解。

2、瞭解了Freemarker的基本概念，下面咱們經過一個小案例，來具體瞭解下Freemarker。

　　1.使用Freemarker須要如今建立maven工程，引入依賴，還不知道如何使用maven工程的小夥伴，能夠看看我以前的博客關於maven的詳細介紹。

<dependency>
    <groupId>org.freemarker</groupId>
    <artifactId>freemarker</artifactId>
    <version>2.3.23</version>
</dependency>

　　2.建立模板文件，這裏咱們以生成html文件爲例（通俗來講模板就是用於生產的模具）。

　　先了解下模板文件中經常使用的四種元素：

　　1）、文本，直接輸出的部分
　　2）、註釋，即<#--...-->格式不會輸出
　　3）、插值（Interpolation）：即${..}部分,將使用數據模型中的部分替代輸出。
　　4）、 FTL 指令： FreeMarker 指令，和 HTML 標記相似，名字前加#予以區分，不會輸出。

咱們如今就建立一個簡單的建立模板文件 test.ftl （這個後綴不是非要寫出ftl，可是通常都這樣寫）

　　　　

<html>
<head>
<meta charset="utf-8">
<title>Freemarker測試</title>
</head>
<body>
<#--我只是一個註釋，我不會有任何輸出 -->           跟html中的註釋<-- -->是全部區別的,html中註釋雖然不會再頁面顯示,可是仍是會顯示在源代碼中,而#<-- --> 僅從程序員看的,不會顯示在生成的源代碼中。
${name},你好。 ${message}                      ${...} 這就是插值,至關於佔位置,等待數據填充。很相似之前學習的JSP頁面中的{}從域中取值
</body>　　　　　　　　　　　　　　　　　　　　　　　其餘地方就是文本,會直接輸出到生成的源代碼中。
</html>

　　3.編程代碼，填充模板，生成說須要的源代碼文件

　　使用步驟：　　　　　　

　　第一步：建立一個 Configuration 對象，直接 new 一個對象。構造方法的參數就是freemarker 的版本號。

　　第二步：設置模板文件所在的路徑。

　　第三步：設置模板文件使用的字符集。通常就是 utf-8.

　　第四步：加載一個模板，建立一個模板對象。

　　第五步：建立一個模板使用的數據集，能夠是 pojo 也能夠是 map。通常是 Map。

　　第六步：建立一個 Writer 對象，通常建立一 FileWriter 對象，指定生成的文件名。

　　第七步：調用模板對象的 process 方法輸出文件。

　　第八步：關閉流

//1.建立配置類,這個configuration是freemarker提供的,不要導錯包了
Configuration configuration=new Configuration(Configuration.getVersion());
//2.設置模板所在的目錄,這裏定義的就是剛剛test.ftl所存放的真實目錄
configuration.setDirectoryForTemplateLoading(new File("D:/pinyougou_work/freemarkerDemo/src/main/resources/"));  //注意這裏是文件夾路徑,不是文件路徑
//3.設置字符集
configuration.setDefaultEncoding("utf-8");
//4.加載模板
Template template = configuration.getTemplate("test.ftl");
//5.建立數據模型,就是用來填充模板那些插值的,能夠用map,也能夠定義對象,通常都是map,注意的是key須要跟插值中的對應上
Map map=new HashMap();
map.put("name", "張三 ");
map.put("message", "歡迎來到Freemarker！ ");
//6.建立 Writer 對象,表明生成的源代碼會存放到哪裏
Writer out =new FileWriter(new File("d:\\test.html"));
//7.輸出
template.process(map, out);
//8.關閉 Writer 對象,切記不要忘記關流,否則以上的數據都仍是在內存中,須要refresh才能夠持久化到磁盤,這是IO流的知識點.
out.close();

　　4.這時候，D盤下就生成了一個test.html的文件了，打開看看！看到這個頁面，恭喜你，成功了！

　　5.讓咱們來看看生成的源代碼是啥樣的

<html>
<head>
<meta charset="utf-8">
<title>freemarker測試</title>
</head>
<body>
張三，你好。歡迎來到Freemarker!
</body>
</html>

　　對比模板，能夠看到如咱們定義的同樣。文本原樣輸出，註釋再也不源代碼，插值被填充。

3、接下來咱們讓咱們學習FTL指令。

　　1.assign指令：此指令用於在頁面上定義一個變量

　　1）能夠直接一個簡單類型，等同於給一個變量賦值

　　2）也能夠定義個對象類型，取值的時候,根據對象名.屬性名,跟JS中同樣

（1）定義簡單類型：
<#assign linkman="張三">
聯繫人： ${linkman}
（2）定義對象類型：
<#assign info={"mobile":"1314520",'address':'中國臺灣省'} >
電話： ${info.mobile} 地址： ${info.address}

　　　　　　頁面效果:

2.include指令

　　此指令用於指定模板的嵌套，相似JSP頁面中引入其餘JSP文件，一個道理。

建立模板文件 head.ftl
<h1>測試官網</h1>
咱們修改 test.ftl，在模板文件中使用 include 指令引入剛纔咱們創建的模板
<#include "head.ftl">

3.if 指令

在模板文件上添加
<#if success=true>
你已經過實名認證
<#else>
你未經過實名認證
</#if>


在java代碼中對succsee變量賦值
map.put("success", true);
在 freemarker 的判斷中，可使用= 也可使用==

頁面效果:

4.list 指令

　　在後臺java代碼中,建立一個集合

List goodsList=new ArrayList();
Map goods1=new HashMap();
goods1.put("name", "蘋果");
goods1.put("price", 5.8);
Map goods2=new HashMap();
goods2.put("name", "香蕉");
goods2.put("price", 2.5);
Map goods3=new HashMap();
goods3.put("name", "橘子");
goods3.put("price", 3.2);
goodsList.add(goods1);
goodsList.add(goods2);
goodsList.add(goods3);
map.put("goodsList", goodsList);

　　　　　　　　　　在模板文件中添加:

----商品價格表----<br>
<#list goodsList as goods>
${goods_index} 商品名稱： ${goods.name} 價格： ${goods.price}<br>
</#list>

頁面效果:

5. 內建函數

　　語法格式:變量+?+函數名稱

5.1 得到集合大小:

　　好比要得到上面goodsLIst集合的長度能夠這樣寫

　　一共 ${goodsList?size} 條記錄

頁面效果:

5.2 轉換JSON字符串對象

　　咱們一般須要將 json 字符串轉換爲對象，那如何處理呢？看代碼

<#assign text="{'bank':'工商銀行','account':'10101920201920212'}" />  <#-- 這裏定義的是一個json字符串{}是被""包裹在 -->
<#assign data=text?eval />   <#-- 經過?eval將json字符串text轉換成對象,賦值給變量data,就能夠經過data取值了 -->
開戶行： ${data.bank} 帳號： ${data.account}

5.3 日期格式化

　　代碼中對變量賦值:map.put("taday",new Date())，而後在頁面取：

當前日期： ${today?date} <br>
當前時間： ${today?time} <br>
當前日期+時間： ${today?datetime} <br>
日期格式化： ${today?string("yyyy 年 MM 月")}

頁面效果：

5.4 數字轉換爲字符串

　　代碼中對變量賦值 map.put("number",10231231);

　　那麼用${number}取值頁面會是 102,31,231 的這種格式

　　使用 ${number?c} 會原樣輸出:10231231

5.5 空值處理運算符

　　若是你在模板中使用了變量可是在代碼中沒有對變量賦值，那麼運行生成時會拋出異常。可是有些時候，有的變量確實是 null，怎麼解決這個問題呢？

用法一:
用法爲:variable??,若是該變量存在,返回 true,不然返回 false
<#if aaa??>
aaa 變量存在
<#else>
aaa 變量不存在
</#if>

用法二:
咱們除了能夠判斷是否爲空值，也可使用!對 null 值作轉換處理
在模板文件中加入
${aaa!'-'}
在代碼中不對 aaa 賦值，也不會報錯了 ，當 aaa 爲 null 則返回！後邊的內容-

5.6 運算符

　　1)算數運算符

　　FreeMarker 表達式中徹底支持算術運算,FreeMarker 支持的算術運算符包括:+, - , * , / , %
　　邏輯運算符

　　2)邏輯運算符有以下幾個:
　　邏輯與:&&
　　邏輯或:||
　　邏輯非:!
　　邏輯運算符只能做用於布爾值,不然將產生錯誤

　　3)比較運算符

　　表達式中支持的比較運算符有以下幾個:
　　1 =或者==:判斷兩個值是否相等.
　　2 !=:判斷兩個值是否不等.
　　3 >或者 gt:判斷左邊值是否大於右邊值
　　4 >=或者 gte:判斷左邊值是否大於等於右邊值
　　5 <或者 lt:判斷左邊值是否小於右邊值
　　6 <=或者 lte:判斷左邊值是否小於等於右邊值

　　注意: =和!=能夠用於字符串,數值和日期來比較是否相等,但=和!=兩邊必須是相同類型的值,不然會產生錯誤,並且 FreeMarker 是精確比較,"x","x ","X"是不等的.其它的運行符能夠做用於數字和日期,但不能做用於字符串,大部分的時候,使用 gt等字母運算符代替>會有更好的效果,由於 FreeMarker 會把>解釋成 FTL 標籤的結束字符,固然,也可使用括號來避免這種狀況,如:<#if (x>y)>

　　　　　　　　
結尾:今天Freemarker的基本入門就介紹到這裏了,下一期,咱們經過實戰來,深刻了解具體在項目中如何使用Freemarker!