Thymeleaf(Java模板引擎)

摘要:
1、 概念1。Thymelaf是一个用于Web和独立环境的开源Java模板引擎,可以处理HTML、XML、JavaScript、CSS甚至纯文本;2.Thimleaf可以在Web和非Web环境中工作。它更适合在基于MVC的Web应用程序的视图层中提供XHTML/HTML5,但它甚至可以在脱机环境中处理任何XML文件。

一、概念

1、Thymeleaf是Web和独立环境的开源的Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本;
2、Thymeleaf可以在Web(基于Servlet)和非Web环境中工作,它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5 ,但它甚至可以在脱机环境中处理任何XML文件。它提供完整的Spring Framework集成
3、在Web应用程序中,Thymeleaf旨在成为JSP的完全替代品,并实现自然模板的概念:模板文件,可以直接在浏览器中打开,仍然可以正确显示为网页;

二、环境配置

1、如果用maven需要下载thymeleaf-2.1.4.RELEASE.jar(http://www.thymeleaf.org/download.html ),然后在pom里添加依赖
2、整合spring的需要下载thymeleaf-spring4-2.1.4.RELEASE.jar(http://www.thymeleaf.org/download.html ),然后添加依赖
3、servlet配置

Thymeleaf(Java模板引擎)第1张Thymeleaf(Java模板引擎)第2张
<!-- Scans the classpath of this application for @Components to deploy as beans -->
       <context:component-scan base-package="com.test.thymeleaf.controller" />

       <!-- Configures the @Controller programming model -->
       <mvc:annotation-driven />

        <!--Resolves view names to protected .jsp resources within the /WEB-INF/views directory -->
        <!--springMVC+jsp的跳转页面配置-->
       <!--<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">-->
              <!--<property name="prefix" value="/WEB-INF/views/" />-->
              <!--<property name="suffix" value=".jsp" />-->
       <!--</bean>-->

       <!--springMVC+thymeleaf的跳转页面配置-->
       <bean id="templateResolver"
          class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
         <property name="prefix" value="/WEB-INF/views/" />
         <property name="suffix" value=".html" />
         <property name="templateMode" value="HTML5" />
       </bean>

       <bean id="templateEngine"
           class="org.thymeleaf.spring4.SpringTemplateEngine">
          <property name="templateResolver" ref="templateResolver" />
       </bean>

       <bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
         <property name="templateEngine" ref="templateEngine" />
       </bean>
View Code

4、html
引用命名空间: <html xmlns:th="http://www.thymeleaf.org">
可避免编辑器出现html验证错误,但是不加对Thymeleaf的功能也没有影响;

三、语法

1、表达式

    ${name}        可用值表达式,变量取值(变量名name又后台传入);
    *{name}        所有可用值表达式,从可用值中查找name,如果有上下文,比如上层(即父标签)是object,则查object中的name属性(th:object="")。
    #{nmae}        消息表达式,国际化时使用,也可以使用内置的对象,比如date格式化数据;(消息通常指:外部文本抽取模板代码片段到模板文件外面, 使外部文本可以存在另一个文件中)
    @{name}        链接表达式,用来配合link,src,href使用的
    ~{name}        片段表达式,用来引入公共部分代码片段,并进行传值操作使用;

示例:
    服务器变量 map.put("msgutext","<b>1111</b>");
    html内容:

    <div th:utext="${msgutext}"></div>        显示结果为粗体的1111
    <div th:text="${msgutext}"></div>         显示结果为:<b>1111</b>

2、运算符

    数学:+,-,*,/,%
    比较:gt,lt,ge,le,eq,ne
    逻辑:and,or,not,!
    条件:? :  ,?: (默认值,例:    value ?: defaultvalue,条件语句也可以不只要?号,相当于没有else)
    其他:+(字符串连接),_(禁止转义),||(替换,内容可包含非参数内容,如:<a href="http://t.zoukankan.com/aland-1415-p-9383740.html" th:href="http://t.zoukankan.com/@{|xx${value}|}"
   

3、支持的html5操作

(基本所有属性都支持了,只是在前边加了一个th:)
常用th标签

th:id          替换id
th:text        替换标签内文本
th:utext       html文本替换,可使文本内的标签生效
th:object      替换对象
th:value       属性赋值
th:with        变量赋值运算,例<div th:with="isEven=${prodStat.count}%2==0"></div>
th:style       替换样式
th:onclick     点击事件
th:each        属性赋值
th:if          条件判断,例:<a th:if="${userId == collect.userId}" > 
th:unless      条件判断
th:href        链接地址
th:switch      switch选择,和th:case一起使用
th:fragmetn    布局标签
th:include    
th:replace
th:selected
th:src
th:inline
th:action
th:remove
th:attr        设置任意标签属性,一般较少用到,因为所有的属性都有对应的th:

一个标签内多个th属性生效的优先顺序:
include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove

4、内嵌数据类型

(内置于Contex中,可通过#直接访问)

dates            java.util.Date的功能方法,${#dates.createNow()}
calendars        java.util.Calendar
numbers          数字
strings          字符串
objects          objects功能类
bools            布尔值
arrays           数组功能类
lists            list功能类
sets             集合功能类            
maps             字典功能类

内置基本对象(可通过#访问)
ctx,vars,locale,request,response,session,servletContext

5、遍历

<tr th:each="data:${getdata}">
    <td th:text="${data.id}"></td>
    <td th:text="${data.name}"></td>
    ...
</tr>

大部分java集合类型都可以用此来遍历

同时th:each还提供了一个变量可以保存迭代状态
状态包含以下属性:

    index      索引,从0开始
    count      计数,从1开始
    size      集合内元素总数
    current    当前迭代对象
    even/odd   奇偶数个,bool类型
    first      是否是第一个,bool类型
    last       是否是最后一个,bool类型

示例:

 <li th:each="emp, status: ${employees}" th:class="${status.odd} ? 'odd': 'even'"> 
    <span class="list" th:text="${emp.name}"></span>
    <span class="list" th:text="${emp.gender == 1} ? '男': '女'"></span> 
    <span class="list" th:text="${{emp.birthday}}"></span> 
    <span class="list status" th:text="|index: ${status.index}; count: ${status.count}; size: ${status.size}; first: ${status.first}|"></span> </li>
</li>
<!--如果没有指定第二个参数的名字,有默认的以参数名+Stat为名字,如上没有指定status则可以使用empStat提取上边参数-->

6、条件(if,switch)

示例:

1)if
<tr th:each="test:${test}">
    <td th:if="${test.Score} gt 0 and ${test.Score} lt 60"></td>
    <td th:if="${test.Score} ge 60 and ${test.Score} le 70"></td>
    ...
</tr>

2)if unless

<tr th:each="test:${test}">
    <td th:if="${test.Score} gt 0 and ${test.Score} lt 60">不及格</td>
    <td th:unless="${test.Score} gt 0 and ${test.Score} lt 60">及格</td>
</tr>

3)switch

    <tr th:each="test:${test}">
        <td th:switch="${test.male}">
            <span th:case="1"></span>
            <span th:case="2"></span>
            <span th:case="*">未知</span>
        </td>
    </tr>

7、其他

1)外围包裹th:block标签:主要用于在代码外部加一层条件,而不用多写一个div

2)日期格式化:

<td th:text="${#dates.format(content.createDate,'yyyy-MM-dd HH:mm:ss')}"></td>

3)字符串长度截取:

<td th:if="${#strings.length(content.title) gt 5 } "  th:text="${#strings.substring(content.title,0,5) + '…'}"></td>

4)下拉选择:

 <select name="subId" id="subId" lay-verify="" >
    <option value="">请选择</option>
    <option th:each="channelsub:${subchannels}" th:selected="${channelsub.id == subId}"   th:value="${channelsub.id}" th:text="${channelsub.name}"></option>
 </select>

5)传值到js

 <script th:inline="javascript">
        var size= [[${test.size()}]];
</script>

6)传值到css

<style th:inline="css">
.[[${classname}]] {
text-align: [[${align}]];
}
</style>

免责声明:文章转载自《Thymeleaf(Java模板引擎)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇win10下安装redis 服务JS案例之8——从一个数组中随机取数下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

SpringBoot怎么访问html文件

pom.xml    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId&...

Spring Boot集成thymeleaf异步刷新页面

 现在比较流行前后端分离开发,但在有些业务场景下模板引擎也用的不少。本文介绍thymeleaf页面的局部更新,Spring Boot采用的是2.0.4,先来看代码。 IndexController.java: package com.example.demo.thymeleaf; import org.springframework.stereoty...

Spring与后端模板引擎的故事

更多内容,欢迎关注微信公众号:全菜工程师小辉。公众号回复关键词,领取免费学习资料。 现在很多开发,都采用了前后端完全分离的模式,随着近几年前端工程化工具和MVC框架的完善,使得这种模式的维护成本逐渐降低。但是这种模式目前并不利于SEO(前后端分离的SEO问题会慢慢改善),而且某些场景使用模板引擎会更方便,比如说邮件模板以及数据变化不频繁的后台系统。 Spr...

SpringBoot+Thyemleaf开发环境正常,打包jar发到服务器就报错Template might not exist or might not be accessible

网上查看了各种解决的思路,总结如下: 1. 在controller层请求处理完了返回时,没有使用@RestController或@ResponseBody而返回了非json格式 这种情况下返回的数据thymeleaf模板无法解析,直接报错,本人正式因为这个原因才报错。 解决方案:可以将@Controller换成@RestController,不过需要注意...

(七) SpringBoot起飞之路-整合SpringSecurity(Mybatis、JDBC、内存)

兴趣的朋友可以去了解一下前五篇,你的赞就是对我最大的支持,感谢大家! (一) SpringBoot起飞之路-HelloWorld (二) SpringBoot起飞之路-入门原理分析 (三) SpringBoot起飞之路-YAML配置小结(入门必知必会) (四) SpringBoot起飞之路-静态资源处理 (五) SpringBoot起飞之路-Thymel...

Thymeleaf【快速入门】

前言:突然发现自己给自己埋了一个大坑,毕设好难..每一个小点拎出来都能当一个小题目(手动摆手..),没办法自己选的含着泪也要把坑填完..先一点一点把需要补充的知识学完吧.. Thymeleaf介绍 稍微摘一摘【官网】上面的介绍吧(翻译是找到,有些增加的内容): 1.Thymeleaf is a modern server-side Java templ...