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

桃扇骨 2024-04-19 11:14 77阅读 0赞

#### 一、使用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 实现后端分页 完整示例][Spring Boot _ JPA _ Freemarker _]

#### 二、Freemarker函数参考 ####

**1. Freemarker循环遍历数字**

普通循环遍历：

<#list recordPage.content as record>
    
    </#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类型转换 - 操作字符函数 ][Freemarker_ - _]

[Spring Boot _ JPA _ Freemarker _]: https://www.jianshu.com/p/cee11a002307
[-]: http://freemarker.foofun.cn/ref_builtins_boolean.html#ref_builtin_then
[Freemarker_ - _]: https://blog.csdn.net/yjclsx/article/details/80104326