前端模板引擎 -- 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类型转换 - 操作字符函数