網頁靜態化技術--Freemarker入門

時間 2020-08-08

標籤網頁靜態技術 freemarker 入門欄目 HTML 简体版

原文原文鏈接

網頁靜態化技術:爲何要使用網頁靜態化技術html

　　網頁靜態化解決方案在實際開發中運用比較多,例如新聞網站,門戶網站中的新聞頻道或者是文章類的頻道.java

　　對於電商網站的商品詳細頁來講,至少幾百萬個商品,每一個商品又有大量的信息,這樣的狀況一樣也適用於使用網頁靜態化來解決.程序員

　　網頁靜態化技術和緩存技術的共同點都是爲了減輕數據庫的訪問壓力,可是具體的應用場景不一樣,緩存比較適合小規模的數據,而網頁靜態化比較適合較大規模且相對變化不太頻繁的數據.web

　　另外咱們若是將網頁以純靜態化的形式展示,就可使用Nginx這樣的高性能的web服務器來部署.Nginx能夠承載5萬的併發,而Tomcat只有幾百.數據庫

　　什麼是Freemarker?apache

　　Freemarker是一款使用java寫的模板引擎,它基於模板來生成文本輸出.它雖然不是web的應用框架,由於FreeMarker與Web容器無關,即在Web運行時,它並不知道Servlet或Http,但它很適合做爲web應用框架的一個組件.它不只能夠用做表現層的實現技術,並且還能夠用於生成XML.JSP.JAVA等.小程序

特色:緩存

1.輕量級模板引擎,不須要Servlet環境就能夠很輕鬆的嵌入到應用程序中.服務器

2.能生成各類文本,如html.xml.java等併發

3.入門簡單,它是用java編寫的.不少語法和java類似.

工做原理的話是:模板+數據==輸出 == 就是Freemarker 能夠輸出到指定的位置,生成一個完成的頁面.

它屬於第三方公司的一個產品,而Velocity 是Apache,可是Apache也是使用FreeMarker.還有及時Struts底層就是使用Freemarker進行實現的.

Freemarker的做用?

　　自定義框架

　　自定義代碼生成器.

　　MyBatis逆向工程.

下面來寫一個FreeMarker工程來試試:

　　引入的依賴爲:

<dependencies>
      <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.23</version>
      </dependency>  
  </dependencies>
  <build>
    <plugins>            
        <!-- java編譯插件 -->
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.2</version>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
                <encoding>UTF-8</encoding>
            </configuration>
         </plugin>
    </plugins>
  </build>

建立模板文件:模板文件中四種元素

　　1.文本,直接輸出的部分

　　2.註釋.即<#--..-->格式不會輸出

　　3.插值(Interpolation):即${...}部分,將使用數據模型中的部分替代輸出

　　4.FTL指令:FreeMarker指令,和HTML標記相似,名字前家#予以區分,不會輸出.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>
<#--我只是一個註釋,這裏會在Test.ftl中進行輸出--> ${zxs} </body>
</html>

生成文件的java代碼部分:

1.建立FreeMarker對象爲Congruation,直接new,而後經過傳入Conguration.getVersion()來進行建立.

2.設置模板所在的路徑,我這裏使用的ftl這個文件夾.設置字符集utf-8

3.獲取模板,建立一個模板對象

4.建立一個模板使用的數據集,能夠是pojo,也能夠是map,通常都是map

5.建立一個Writer對象,通常建立一個FileWriter對象,指定生成的文件名.

6.調用模板的process方法輸出文件,

7.關閉流

import freemarker.template.Configuration; import freemarker.template.Template; import freemarker.template.TemplateException; import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.io.Writer; import java.util.HashMap; import java.util.Map; /** * @Auther:qingmu * @Description:腳踏實地,只爲出人頭地 * @Date:Created in 15:34 2019/4/22 * * 簡單的入門 * 1.建立FreeMarker的Conguuration對象 * 2.設置模板路徑,設置字符集 * 3.加載模板 * 4.使用pojo或者map添加數據 * 5.使用Writer進行 輸出 * 6.關閉流 */
public class FreeMarkerDemo { public static void main(String[] args) throws IOException, TemplateException { // 1.建立FreeMarker對象,傳入一個參數爲版本.爲了取出過期的構造參數.
        Configuration configuration = new Configuration(Configuration.getVersion()); // 2.設置模板所在的位置
        String dir = "G:\\idjavacode\\pyg_qingmu\\FreeMarker\\src\\ftl\\"; configuration.setDirectoryForTemplateLoading(new File(dir)); // 3.設置字符集
        configuration.setDefaultEncoding("utf-8"); // 4.加載模板
        Template template = configuration.getTemplate("FreeMarker.ftl"); // 5.建立一個pojo或者建立一個map來存儲數據
        Map map = new HashMap<>(); map.put("zxs", "周星星"); // 6.建立writer對象
        Writer writer = new FileWriter(new File(dir + "test.ftl")); // 7.輸出
 template.process(map, writer); // 8.關閉流
 writer.close(); System.out.println("完成"); } }

執行後,在個人文件中生成的代碼爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body> 周星星 </body>
</html>

FTL指令

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

定義簡單類型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>
<#--assign指令-->
<#assign linkname="周先生"> 姓名:${linkname} </body>
</html>

而後效果圖爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body> 姓名:周先生 </body>
</html>

定義對象類型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>
<#assign info={"電話":"13058752743","地址":"北京市順義"}> 電話:${info.電話} 地址:${info.地址} </body>
</html>

效果圖爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body> 電話:13058752743 地址:北京市順義 </body>
</html>

include指令:此指令用於模板文件的嵌套

建立模板文件head.ftl

<h>黑馬程序員</h><br/>

引入include文件的標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>
<#include "head.ftl"><br/>
</body>
</html>

效果圖爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>
<h>黑馬程序員</h><br/>
</body>
</html>

if指令:在模板文件上添加:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>

<#--if指令-->
<#if success> 審覈經過 <#else> 審覈未經過 </#if>

</body>
</html>

在代碼中須要添加的是:

map.put("success",true);

而後顯示的效果圖爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body> 審覈經過 </body>
</html>

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

在模板上添加爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>

<#list goodsList as goods> name:${goods.name} price:${goods.price} </#list>


</body>
</html>

效果顯示爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body> name:蘋果 price:5.8 name:香蕉 price:2.5 name:橘子 price:3.2


</body>
</html>

內建函數變量+?+函數名稱

獲取集合的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>

<#list goodsList as goods> name:${goods.name} price:${goods.price} </#list> ${goodsList?size} </body>
</html>

效果圖爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>

3

</body>
</html>

轉換Json字符串爲對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>

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

效果爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body> 工商銀行 10101920201920212

</body>
</html>

日期格式化轉化爲:

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

日期轉化爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body> ${today?date} ${today?time} ${today?datetime} ${today?string("yyyy年MM月")} </body>
</html>

效果爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>

2019-4-22
17:23:18
2019-4-22 17:23:18 2019年04月 </body>
</html>

數字轉換爲字符串

插入數據爲:

map.put("point",123456);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body> ${point} </body>
</html>

效果爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>


123,456

</body>
</html>

由於最後輸出的結果帶有,因此使用內建函數c

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body> ${point?c} </body>
</html>

效果爲:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>

123456

</body>
</html>

空值處理運算符

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

　判斷某變量是否存在:"??"

　　用法爲:variable??,若是該變量存在,返回true,不然返回false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body>

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

</body>
</html>

由於我沒有在程序中存儲aaa因此:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body> aaa變量不存在 </body>
</html>

缺失變量的默認值"!"

咱們處理能夠判斷是否爲空值,也可使用!對null值作轉換處理

　　在模板文件中加入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker入門小程序</title>
</head>
<body> ${aaa!"-"} </body>
</html>

運算符

　　算術運算符

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

　　邏輯運算符

邏輯運算符有以下幾個:

　　邏輯與&&

　　邏輯或||

　　邏輯非!

　　邏輯運算符只能做用於布爾值,不然將產生錯誤.

比較運算符

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

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