zoukankan      html  css  js  c++  java
  • Thymeleaf(Java模板引擎)

    一、概念

    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配置

    <!-- 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="" th:href="@{|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>
  • 相关阅读:
    .net core 支付宝,微信支付 一
    .net core AES加密解密及RSA 签名验签
    .net core 使用webservice
    .net core 使用X509 私钥加密请求
    .net core mysql entity映射时字符串被截断
    VS 2017 RC .net core ef+ MySql 出现错误
    IdentityServer4 简单使用,包括api访问控制,openid的授权登录,js访问
    iOS面试题之内存管理
    iOS之tableView性能优化/tableView滑动卡顿?
    iOS面试题之runloop
  • 原文地址:https://www.cnblogs.com/aland-1415/p/9383740.html
Copyright © 2011-2022 走看看