1. 程式人生 > >FreeMarker與Thymeleaf

FreeMarker與Thymeleaf

content pos 模板生成 文件中 state items target english url

FreeMarker 是一個模板引擎,一個基於模板生成文本輸出的通用工具,使用純 Java 編寫,FreeMarker 被設計用來生成 HTML Web 頁面,特別是基於 MVC 模式的應用程序,雖然 FreeMarker 具有一些編程的能力,但通常由 Java 程序準備要顯示的數據,由FreeMarker 生成頁面,通過模板顯示準備的數據。符合MVC模式,采用哈希表存儲,你可以專註於如何展現數據, 而在模板之外可以專註於要展示什麽數據。

簡單實現:

JAVA:(我不是後端,只能說下我所知道的實現形式)

在新建工程時,可以勾選模板的使用:

技術分享圖片

1.引入依賴jar包

<dependency>  
<groupId>freemarker</groupId>  
<artifactId>freemarker</artifactId>  
</dependency>  

  

2.bean配置

<!-- 配置Freemarker屬性文件路徑 -->
<bean id="freemarkerConfiguration"        class="org.springframework.beans.factory.config.PropertiesFactoryBean">
    <property name="location" value="classpath:conf/freemarker.properties" />
</bean>
<!-- 配置freeMarker模板加載地址 -->
<bean id="freemarkerConfig"        class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
    <!-- 視圖解析器會在/WEB-INF/ftl/路徑下掃描視圖文件 -->
    <property name="templateLoaderPath" value="/WEB-INF/ftl/" />
    <property name="freemarkerVariables">
        <map>
            <entry key="xml_escape" value-ref="fmXmlEscape" />
        </map>
    </property>
</bean>
<bean id="fmXmlEscape" class="freemarker.template.utility.XmlEscape" />
<!-- 配置freeMarker視圖解析器 -->
<bean id="freemakerViewResolver"        class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
    <property name="viewClass"        value="org.springframework.web.servlet.view.freemarker.FreeMarkerView" />
    <!-- 掃描路徑內所有以ftl結尾的文件 -->
    <property name="viewNames">
        <array>
            <value>*.ftl</value>
        </array>
    </property>
    <property name="contentType" value="text/html; charset=UTF-8" />
    <property name="exposeRequestAttributes" value="true" />
    <property name="exposeSessionAttributes" value="true" />
    <property name="exposeSpringMacroHelpers" value="true" />
    <property name="requestContextAttribute" value="request" />
    <!-- 給視圖解析器配置優先級,你可以給之前jsp視圖解析器的值配為2 -->
    <property name="order" value="1" />
</bean>

3.控制層controller返回數據或者數據視圖

return new ModelAndView("xxx/xxx/detail", map)

4.頁面中FreeMarker語法數據回顯示(官方教程)

<#list provinces as p>
    <option value="${p!}">${p.english()!}</option>
</#list>

<#list sequence>
    Part executed once if we have more than 0 items
<#items as item>
    Part repeated for each item
</#items>
    Part executed once if we have more than 0 items
<#else>
    art executed when there are 0 items
 </#list>   
                                            
<#if condition>
     ...
<#elseif condition2>
    ...
<#elseif condition3>
    ...
    ...
<#else>
     ...
</#if>  

註:使用模板常用的就是數據回顯和共用。可以使用<#include>標簽和${widget()}函數加載共用的ftl頁面和css,js。

FreeMarker是一個用Java語言編寫的模板引擎,它基於模板來生成文本輸出。FreeMarker與Web容器無關,即在Web運行時,它並不知道Servlet或HTTP。它不僅可以用作表現層的實現技術,而且還可以用於生成XML,JSP或Java 等,在spring4.0中推薦使用thymeleaf來做前端模版引擎。

1.配置bean,容器初始化加載xml文件

<bean name="menuManager" class="com.jiayu.takeex.common.authority.MenuManager" init-method="init">
        <property name="domainMenus">
            <map>
                <entry key="*" value="menu/admin-menu.xml"/>
            </map>
        </property>
    </bean>

2.書寫XML文件,將公共的header寫入文件中

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <menu id=‘1‘ title=‘首頁‘ name=‘home.*‘ url=‘home.home‘ cls="home.*" permissions=‘1-‘>
        <menu id=‘1-1‘ title=‘導航‘ name=‘home‘ url=‘home.nav‘ cls="home.nav" permissions=‘1-1‘/>
        <menu id=‘1-2‘ title=‘幫助‘ name=‘home‘ url=‘home.help‘ cls="home.help" permissions=‘1-2‘/>
    </menu>
</root>

  

3.返回數據model

public class MenuWidget implements TemplateWidget {

    private MenuManager menuManager;

    @Autowired
    public void setMenuManager(MenuManager menuManager) {
        this.menuManager = menuManager;
    }

    @Override
    public void referenceData(HttpServletRequest request, Map<String, Object> model) {
        SecurityContext.Subject subject = SecurityContext.current();
        model.put("root", menuManager.getMenuTree(subject.getPermits()));
    }

}

4.頁面回顯數據(常用th:標簽 thymeleaf教程)

<div class="left-btn-holder ng-hide" th:attr="ng-show=‘$state.includes(\‘‘+${menu.name}+‘\‘)‘" th:each="menu : ${root.menus}">
        <div class="btn-holder" ng-class="{‘btn-holder-select‘:click}" ng-click="click=true">
            <ul>
                <li class="btn-title" th:attr="ng-class=‘{\‘active\‘:$state.includes(\‘‘+${m.cls} +‘\‘)}‘" th:each="m : ${menu.menus}">
                    <a th:ui-sref="${m.url}" th:text="${m.title}">menu-x</a>
                    <div style="height: 1px;background: #D5D5D5;" th:if="${m.url}==‘data.health_white‘"/>
                </li>
            </ul>
        </div>
    </div>

  

 查看Freemarker與Thymeleaf的區別和優缺點 

  

FreeMarker與Thymeleaf