頁面靜態化技術：FreeMarker

阿新 • • 發佈：2018-12-24

頁面靜態化技術：FreeMarker

背景： 為了實現頁面的管理和快速上線，需要用到頁面靜態化
如何： 頁面靜態化就是使用 模板+資料，通過技術手段將兩者合二為一，生成一個html頁面
業務流程：

獲取模型所需要的資料
製作模版
利用靜態化技術生成html
將html頁面存放在檔案系統中
從檔案系統中取出釋出到網頁上

學習freemarker

1.匯入freemarker的依賴

<dependencies>
   <dependency>
       <groupId>org.springframework.boot</ 
groupId>
       <artifactId>spring-boot-starter-freemarker</artifactId>
   </dependency>
   <dependency>
       <groupId>org.projectlombok</groupId>
       <artifactId>lombok</artifactId>
   </dependency>
   <dependency>
       <groupId> 
com.squareup.okhttp3</groupId>
       <artifactId>okhttp</artifactId>
   </dependency>
   <dependency>
       <groupId>org.apache.commons</groupId>
       <artifactId>commons-io</artifactId>
   </dependency>
   <dependency>
       <groupId 
>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-test</artifactId>
   </dependency>
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
   </dependency>
</dependencies>

2.在resource目錄下建立配置檔案application.yml

server:
  port: 8088 #服務埠
spring:
  application:
    name: test-freemarker #指定服務名
  freemarker:
    cache: false #關閉模板快取，方便測試
    settings:
      template_update_delay: 0 #檢查模板更新延遲時間，設定為0表示立即檢查，如果時間大於0會有快取不方便 進行模板測試

3.在 src/main/resources下建立templates，此目錄為freemarker的預設模板存放目錄，名字不要更改
在templates下建立模板檔案test1.ftl，模板中的${name}最終會被freemarker替換成具體的資料。

    <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf‐8">
       <title>Hello World!</title>
   </head>
   <body>
   Hello ${name}!
   </body>
   </html>

4.建立啟動類

@SpringBootApplication
public class FreemarkerTestApplication {
    public static void main(String[] args) {
        SpringApplication.run(FreemarkerTestApplication.class,args);
    }
}

5.建立模板資料類

@Data
@ToString
public class Student {
    private String name;//姓名
    private int age;//年齡
    private Date birthday;//生日
    private Float money;//錢包
    private List<Student> friends;//朋友列表 private Student bestFriend;//最好的朋友
}

6.建立controller

@Controller
@RequestMapping("/freemarker")
public class FreemarkerController {

    @RequestMapping("/test1")
    public String freemarker(Map<String,Object> map){
        map.put("name","奧特曼");
        return "test1";
    }
}

7.訪問工程，埠為8088

freemarker的基礎語法

1.註釋：<#–註釋–>
2.差值表示式：${name}，從模板中取出資料的
3.ftl表示式，接下來要重點學習的
4.文字，就是不用任何表示式的純文字，直接展示在頁面上

建立模板

@Controller
@RequestMapping("/freemarker")
public class FreemarkerController {

    @RequestMapping("/test1")
    public String freemarker(Map<String,Object> map){
        map.put("name","奧特曼");
        //向資料模型放資料 map.put("name","黑馬程式設計師");
        Student stu1 = new Student();
        stu1.setName("小明");
        stu1.setAge(18);
        stu1.setMoney(1000.86f);
        stu1.setBirthday(new Date());
        Student stu2 = new Student();
        stu2.setName("小紅");
        stu2.setMoney(200.1f);
        stu2.setAge(19);
        stu2.setBirthday(new Date());
        List<Student> friends = new ArrayList<>();
        friends.add(stu1);
        //給學生2設定朋友列表
        stu2.setFriends(friends);
        //給學生2設定最好的朋友為學生1
        stu2.setBestFriend(stu1);
        List<Student> stus = new ArrayList<>();
        stus.add(stu1);
        stus.add(stu2);
        //向資料模型放資料
        map.put("stus",stus);
        //準備map資料
        HashMap<String,Student> stuMap = new HashMap<>();
        stuMap.put("stu1",stu1);
        stuMap.put("stu2",stu2);
        //向資料模型放資料
        map.put("stu1",stu1);
        //向資料模型放資料
        map.put("stuMap",stuMap);
        //返回模板檔名稱
        return "test1";
    }
}

list表示式：

<#list stus as stu>
<#--如果使用序號-->
<td>${stu_index}</td>
<td>${stu.name}</td>
…… ……
</list>

栗子

<body>
    Hello ${name}!
    <br/>
    使用list指令
    <br/>
    <table>
        <tr>
            <td>序號</td>
            <td>姓名</td>
            <td>年齡</td>
            <td>生日</td>
            <td>錢包</td>
        </tr>
        <#list stus as stu>
            <tr>
                <td>${stu_index+1}</td>
                <td>${stu.name}</td>
                <td>${stu.age}</td>
                <td>生日</td>
                <td>${stu.money}</td>
            </tr>
        </#list>

    </table>
</body>

Map表示式：

獲取map列表中的資料
    1。通過[]來獲取資料<br/>
    姓名：${stuMap['stu1'].name}<br/>
    年齡：${stuMap['stu1'].age}<br/>
    <br/>
    2.通過點來獲取資料<br/>
    姓名：${stuMap.stu1.name}<br/>
    年齡：${stuMap.stu1.age}
    <br/>
    3.遍歷Map
    <table>
        <tr>
            <td>序號</td>
            <td>姓名</td>
            <td>年齡</td>
            <td>錢包</td>
        </tr>
        <#list stuMap?keys as key>
            <tr>
                <td>${key_index+1}</td>
                <td>${stuMap[key].name}</td>
                <td>${stuMap[key].age}</td>
                <td>${stuMap[key].money}</td>
            </tr>
        </#list>
    </table>

if表示式

如果年齡大於18歲背景顏色就為綠色

<#--注意中間的括號是要加上的-->
<td <#if (stuMap[key].age>18)> bgcolor="blue" </#if>>${stuMap[key].name}</td>
或者不加括號
<td <#if stuMap[key].age &gt 18> bgcolor="blue" </#if>>${stuMap[key].name}</td>

空值處理

1.判斷某個變數是否存在，使用"??"。栗子：list??，如果存在返回true，不存在返回false,一般用在集合或者是物件上面

<#if list??>
  ………………          
</#if>

2.缺失變數預設值使用 “!” 使用!要以指定一個預設值，當變數為空時顯示預設值。
例: ${name!’’}表示如果name為空顯示空字串。
如果是巢狀物件則建議使用()括起來。

年齡：${(stuMap.stu1.age)!''}

內建函式

內建函式語法格式: 變數+?+函式名稱
1.顯示某個集合的大小

size:${stus?size}

2.顯示日期

顯示年月日: ${today?date} 
顯示時分秒:${today?time} 
顯示日期+時間:${today?datetime}  
自定義格式化: ${today?string("yyyy年MM月")}

3.內建函式c
map.put(“point”, 102920122); point是數字型，使用${point}會顯示這個數字的值，不併每三位使用逗號分隔。如果不想顯示為每三位分隔的數字，可以使用c函式將數字型轉成字串輸出 ${point?c}
4.將json字串轉成物件
一個例子:
其中用到了 assign標籤，assign的作用是定義一個變數。

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

頁面靜態化技術：FreeMarker