1. 程式人生 > >頁面靜態化技術

頁面靜態化技術

1.1為什麼要使用網頁靜態化技術

網頁靜態化解決方案在實際開發中運用比較多,例如新聞網站,入口網站中的新聞頻道或者是文章類的頻道。 案例 對於電商網站的商品詳細頁來說,至少幾百萬個商品,每個商品又有大量的資訊,這樣的情況同樣也適用於使用網頁靜態化來解決。 網頁靜態化技術和快取技術的共同點都是為了減輕資料庫的訪問壓力,但是具體的應用場景不同,快取比較適合小規模的資料,而網頁靜態化比較適合大規模且相對變化不太頻繁的資料。另外網頁靜態化還有利於SEO。 另外我們如果將網頁以純靜態化的形式展現,就可以使用Nginx這樣的高效能的web伺服器來部署。Nginx可以承載5萬的併發,而Tomcat只有幾百。

1.2什麼是 Freemarker

FreeMarker 是一個用 Java 語言編寫的模板引擎,它基於模板來生成文字輸出。FreeMarker與 Web 容器無關,即在 Web 執行時,它並不知道 Servlet 或 HTTP。它不僅可以用作表現層的實現技術,而且還可以用於生成 XML,JSP 或 Java 等。 在這裡插入圖片描述

1.3 Freemarker入門小DEMO

1.3.1工程引入依賴

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

1.3.2建立模板檔案

模板檔案中四種元素 1、文字,直接輸出的部分 2、註釋,即<#–…-->格式不會輸出 3、插值(Interpolation):即${…}部分,將使用資料模型中的部分替代輸出 4、FTL指令:FreeMarker指令,和HTML標記類似,名字前加#予以區分,不會輸出。 我們現在就建立一個簡單的建立模板檔案test.ftl

<html>
<head>
	<meta charset="utf-8">
	<title>Freemarker入門小DEMO </title>
</head>
<body>
<#--我只是一個註釋,我不會有任何輸出  -->
${name},你好。${message}
</body>
</html>

這裡有文字、插值和註釋

1.3.3生成檔案

使用步驟: 第一步:建立一個 Configuration 物件,直接 new 一個物件。構造方法的引數就是 freemarker的版本號。 第二步:設定模板檔案所在的路徑。 第三步:設定模板檔案使用的字符集。一般就是 utf-8. 第四步:載入一個模板,建立一個模板物件。 第五步:建立一個模板使用的資料集,可以是 pojo 也可以是 map。一般是 Map。 第六步:建立一個 Writer 物件,一般建立一 FileWriter 物件,指定生成的檔名。 第七步:呼叫模板物件的 process 方法輸出檔案。 第八步:關閉流 程式碼: 建立Test類 main方法如下:

 //1.建立配置類
		Configuration configuration=new Configuration(Configuration.getVersion());
		//2.設定模板所在的目錄 
		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=new HashMap();
		map.put("name", "張三 ");
		map.put("message", "歡迎來到神奇的品優購世界!");
		//6.建立Writer物件
		Writer out =new FileWriter(new File("d:\\test.html"));
		//7.輸出
		template.process(map, out);
		//8.關閉Writer物件
		out.close();

執行後,在D盤根目錄即可看到生成的test.html ,開啟看看 在這裡插入圖片描述

1.4 FTL指令

1.4.1 assign指令

此指令用於在頁面上定義一個變數 (1)定義簡單型別:

<#assign linkman="周先生">
聯絡人:${linkman}

(2)定義物件型別:freemarker可以直接使用json物件

<#assign info={"mobile":"13301231212",'address':'北京市昌平區王府街'} >
電話:${info.mobile}  地址:${info.address}

執行效果: 在這裡插入圖片描述

1.4.2 include指令

此指令用於模板檔案的巢狀 建立模板檔案head.ftl

<h1>黑馬資訊網</h1>

我們修改test.ftl,在模板檔案中使用include指令引入剛才我們建立的模板

<#include "head.ftl">

1.4.3 if指令

在模板檔案上新增

<#if success=true>
  你已通過實名認證
<#else>  
  你未通過實名認證
</#if>

在程式碼中對str變數賦值

map.put("success", true);

在freemarker的判斷中,可以使用= 也可以使用==

1.4.4 list指令

需求,實現商品價格表,如下圖: 在這裡插入圖片描述 (1)程式碼中對變數goodsList賦值,修改後端程式碼,新增

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);

(2)在模板檔案上新增

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

如果想在迴圈中得到索引,使用迴圈變數+_index就可以得到。 注意這裡的<#list>不僅可以遍歷後端給的pojo資料,還能遍歷json格式資料

1.5 內建函式

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

1.5.1獲取集合大小

我們通常要得到某個集合的大小,如下圖: 在這裡插入圖片描述 我們使用size函式來實現,程式碼如下:

共  ${goodsList?size}  條記錄

1.5.2轉換JSON字串為物件

我們通常需要將json字串轉換為物件,那如何處理呢?看程式碼

<#assign text="{'bank':'工商銀行','account':'10101920201920212'}" />
	<#assign data=text?eval />
	開戶行:${data.bank}  賬號:${data.account}

1.5.3日期格式化

程式碼中對變數賦值:

dataModel.put("today", new Date());

在模板檔案中加入

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

執行效果如下: 在這裡插入圖片描述

1.5.4數字轉換為字串

程式碼中對變數賦值: map.put(“point”, 102920122); 修改模板: 累計積分:${point} 頁面顯示: 在這裡插入圖片描述 我們會發現數字會以每三位一個分隔符顯示,有些時候我們不需要這個分隔符,就需要將數字轉換為字串,使用內建函式c

累計積分:${point?c}

頁面顯示效果如下: 在這裡插入圖片描述

1.6空值處理運算子

如果你在模板中使用了變數但是在程式碼中沒有對變數賦值,那麼執行生成時會丟擲異常。但是有些時候,有的變數確實是null,怎麼解決這個問題呢?

1.6.1判斷某變數是否存在:“??”

用法為:variable??,如果該變數存在,返回true,否則返回false

<#if aaa??>
  aaa變數存在
<#else>
  aaa變數不存在
</#if>

1.6.2缺失變數預設值:“!”

我們除了可以判斷是否為空值,也可以使用!對null值做轉換處理 在模板檔案中加入

  ${aaa!'-'}

在程式碼中不對aaa賦值,也不會報錯了 ,當aaa為null則返回!後邊的內容

1.7運算子

1.7.1算數運算子

FreeMarker表示式中完全支援算術運算,FreeMarker支援的算術運算子包括:+, - , * , / , %

1.7.2邏輯運算子

邏輯運算子有如下幾個: 邏輯與:&& 邏輯或:|| 邏輯非:! 邏輯運算子只能作用於布林值,否則將產生錯誤

1.7.3比較運算子

表示式中支援的比較運算子有如下幾個: 1 =或者==:判斷兩個值是否相等. 2 !=:判斷兩個值是否不等. 3 >或者gt:判斷左邊值是否大於右邊值 4 >=或者gte:判斷左邊值是否大於等於右邊值 5 <或者lt:判斷左邊值是否小於右邊值 6 <=或者lte:判斷左邊值是否小於等於右邊值 注意: =和!=可以用於字串,數值和日期來比較是否相等,但=和!=兩邊必須是相同型別的值,否則會產生錯誤,而且FreeMarker是精確比較,“x”,"x ","X"是不等的.其它的執行符可以作用於數字和日期,但不能作用於字串,大部分的時候,使用gt等字母運算子代替>會有更好的效果,因為 FreeMarker會把>解釋成FTL標籤的結束字元,當然,也可以使用括號來避免這種情況,如:<#if (x>y)>