FreeMarker与Thymeleaf
Posted 前端攻城弱鸡
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FreeMarker与Thymeleaf相关的知识,希望对你有一定的参考价值。
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文件
1 <bean name="menuManager" class="xxxxxx.authority.MenuManager" init-method="init"> 2 <property name="domainMenus"> 3 <map> 4 <entry key="*" value="menu/xxxx.xml"/> 5 </map> 6 </property> 7 </bean>
<?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的主要内容,如果未能解决你的问题,请参考以下文章
为啥要使用 Velocity/Freemarker/Thymeleaf 等模板引擎进行数据编织
通过 Thymeleaf 实现字段验证(从 Freemarker 迁移到 Thymeleaf)
SpringBoot笔记(五)模板引擎thymeleaf和freemarker