前端模板引擎 -- Freemarker（二）

一、使用Freemarker頁面實現後端分頁

1. 引入頁 product.ftl

<#-- 分頁的表單，包含分頁參數，分頁搜索的條件 -->
<form name="pageForm" action="/product/findByPage" method="post">
    <#-- 分頁參數：當前頁 -->
    <input type="hidden" id="pageNum" name="pageNum">
    <#-- 分頁參數：頁大小 -->
    <input type="hidden" id="pageSize" name="pageSize">
</form>

<#-- 引入分頁頁面 -->
<#include "page.ftl">

2. 分頁 page.ftl

<div class="box-footer">
    <div class="pull-left">
        <div class="form-group form-inline">
            總共${pageInfo.pages} 頁，共${pageInfo.total} 條數據。
            每頁
            <select class="form-control" onchange="gotoPage(1,this.value)">
                <#list 1..5 as num>
                    <option value="${num*10}"
                            <#if pageInfo.pageSize == num*10>selected</#if> >
                        ${num*10}
                    </option>
                </#list>
            </select>
            條
        </div>
    </div>
    <div class="box-tools pull-right">
        <ul class="pagination">
            <li><a href="javascript:gotoPage(1,'${pageInfo.pageSize}')" aria-label="Previous">首頁</a></li>
            <li><a href="javascript:gotoPage('${pageInfo.prePage}','${pageInfo.pageSize}')">上一頁</a></li>

            <#--頁碼：只顯示當前頁前5頁，當前頁，當前頁後5頁 -->
            <#if ((pageInfo.pageNum-5)<1)>
                <#assign begin=1>
            <#else >
                <#assign begin=pageInfo.pageNum-5>
            </#if>

            <#if ((pageInfo.pageNum+5)>pageInfo.pages)>
                <#assign end=pageInfo.pages>
            <#else >
                <#assign end=pageInfo.pageNum+5>
            </#if>

            <#list begin..end as page>
                <li>
                    <#if (pageInfo.pageNum==page)>
                        <a href="javascript:gotoPage(${page},${pageInfo.pageSize})">
                            <span style="color: red">${page}</span>
                        </a>
                    <#else>
                        <a href="javascript:gotoPage(${page},${pageInfo.pageSize})">${page}</a>
                    </#if>
                </li>
            </#list>
            <li><a href="javascript:gotoPage('${pageInfo.nextPage}','${pageInfo.pageSize}')">下一頁</a></li>
            <li><a href="javascript:gotoPage('${pageInfo.pages}','${pageInfo.pageSize}')" aria-label="Next">尾頁</a></li>
        </ul>
    </div>

</div>
<script type="text/javascript">
    // 分頁函數
    // 參數1：當前頁
    ///參數2：頁大小
    // 分頁時候只要提交form表單就可以
    function gotoPage(pageNum, pageSize) {

        // 給分頁表單元素賦值
        $("#pageNum").val(pageNum);
        $("#pageSize").val(pageSize);
        // 提交表單，document.forms[0] 表示獲取頁面的第一個表單
        document.forms[0].submit();
    }
</script>

• Spring Boot + JPA + Freemarker 實現後端分頁 完整示例
  
  

二、Freemarker函數參考

1. Freemarker循環遍歷數字

普通循環遍歷：

<#list recordPage.content as record>
<!--do someting-->
</#list>

做分頁時動態獲取頁數索引：

<#list 1..max as i>    
    <li><a href="#">${i}</a></li>
</#list>

從1開始，每次迭代1，到max結束，如果max是5，則會輸出1、2、3、4、5。

2. 布爾值內建函數

then：

• 該內建函數從 FreeMarker 2.3.23 版本開始存在；
• 使用於 booleanExp?then(whenTrue, whenFalse)，就像是類C語言中的三元運算符 (也就是說，booleanExp ? whenTrue : whenFalse)。如果 booleanExp 評估爲布爾值 true， 那麼就評估並返回第一個參數，而若 booleanExp 評估爲布爾值 false，那麼就評估並返回它的第二個參數。
• 參考：官網 - 布爾值內建函數

3. Freemarker日期格式化處理

基本參數：

• date：只顯示日期，不顯示時間.
  如${createTime?date} 或 ${createTime?date('yyyy-MM-dd')}

• time：只顯示時間，不顯示日期
  如${createTime?time} 或 ${createTime?time('hh:mm:ss')}

• datetime：時間和日期同時顯示
  如${createTime} 或 ${createTime?datetime('yyyy-MM-dd hh:mm:ss')} 或 ${createTime?string('yyyy-MM-dd hh:mm:ss')}

4. Freemarker數字格式化方法

方法如下：

${num?string('0.00')}
//如果小數點後不足兩位，用 0 代替
 
${num?string('#.##')}
//如果小數點後多餘兩位，就只保留兩位，否則輸出實際值
//輸出爲：1239765.46

...

5. Freemarker空值處理
　　對於在Freemarker文件中的空值，如果不處理以${xxx}的方式取值控制檯會報FTL stack trace ("~" means nesting-related)的錯誤，所以一般都採用${xxx?if_exists}的方式去處理。

另外解決方法：在application.properties添加如下一句即可。

spring.freemarker.settings.classic_compatible=true

三、Tips

• Freemarker類型轉換 - 操作字符函數