zoukankan      html  css  js  c++  java
  • SpringBoot_集成Thymeleaf模板

    认识Thymeleaf【读音同 thyme leaf英 [taim li:f] 美 [taɪm lif]】

    Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发;

    模板引擎是一个技术名词,是跨领域跨平台的概念,在Java语言体系下有模板引擎,在C#、PHP语言体系下也有模板引擎,甚至在JavaScript中也会用到模板引擎技术;

    Java生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl(国产) 等;

    Thymeleaf模板既能用于web环境下,也能用于非web环境下,在非web环境下,它能直接显示模板上的静态数据,在web环境下,它能像JSP一样从后台接收数据并替换掉模板上的静态数据;

    Thymeleaf 它是基于HTML的,以HTML标签为载体,Thymeleaf 要寄托在HTML的标签下实现对数据的展示;

    Thymeleaf的官方网站:http://www.thymeleaf.org

    Spring boot 集成了thymeleaf模板技术,并且spring boot官方也推荐使用thymeleaf来替代JSP技术;

    thymeleaf是另外的一种模板技术,它本身并不属于springboot,springboot只是很好地集成这种模板技术,作为前端页面的数据展示;

    Spring boot 集成 Thymeleaf

    Spring boot 集成 Thymeleaf

    1、第一步:在Maven中引入Thymeleaf的依赖,加入以下依赖配置即可:

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

    2、第二步:在Spring boot的核心配置文件application.properties中对Thymeleaf进行配置:

     #开发阶段,建议关闭thymeleaf的缓存

    spring.thymeleaf.cache=false

    #使用遗留的html5以去掉对html标签的校验

    spring.thymeleaf.mode=LEGACYHTML5

    在使用springboot的过程中,如果使用thymeleaf作为模板文件,则要求HTML格式必须为严格的html5格式,必须有结束标签,否则会报错;

    如果不想对标签进行严格的验证,使用spring.thymeleaf.mode=LEGACYHTML5去掉验证,去掉该验证,则需要引入如下依赖,否则会报错:

            

     <dependency>
    
                 <groupId>net.sourceforge.nekohtml</groupId>
    
                 <artifactId>nekohtml</artifactId>
    
    </dependency>
    
    <dependency>
    
                 <groupId>org.unbescape</groupId>
    
                 <artifactId>unbescape</artifactId>
    
                 <version>1.1.5.RELEASE</version>
    
    </dependency>

    NekoHTML是一个Java语言的 HTML扫描器和标签补全器 ,这个解析器能够扫描HTML文件并“修正”HTML文档中的常见错误。

    NekoHTML能增补缺失的父元素、自动用结束标签关闭相应的元素,修复不匹配的内嵌元素标签等;

    3、第三步:写一个Controller去映射到模板页面(和SpringMVC基本一致),比如:

    @RequestMapping("/index")
    
    public String index (Model model) {
    
        model.addAttribute("data", "恭喜,Spring boot集成 Thymeleaf成功!");
    
        //return 中就是你页面的名字(不带.html后缀)
    
        return "index";
    
    }

    4、第四步:在src/main/resources的templates下新建一个index.html页面用于展示数据:

    HTML页面的<html>元素中加入以下属性:<html xmlns:th="http://www.thymeleaf.org">

         

    <!DOCTYPE html>
    
    <html xmlns:th="http://www.thymeleaf.org">
    
    <head>
    
    <meta charset="UTF-8"/>
    
    <title>Spring boot集成 Thymeleaf</title>
    
    </head>
    
    <body>
    
    <p th:text="${data}">Spring boot集成 Thymeleaf</p>
    
    </body>
    
    </html>

    Springboot使用thymeleaf作为视图展示,约定将模板文件放置在src/main/resource/templates目录下,静态资源放置在src/main/resource/static目录下

    Thymeleaf 的标准表达式

    Thymeleaf 的标准表达式主要有如下几类:

    1、标准变量表达式

             语法:${...}

             变量表达式用于访问容器(tomcat)上下文环境中的变量,功能和 JSTL 中的 ${} 相同;

             Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取其中的数据

             比如在Spring mvc 的 Controllar中使用model.addAttribute向前端传输数据,代码如下:

    @RequestMapping(value="/userinfo")
    
    public String userinfo (Model model) {
    
        User user = new User();
    
        user.setId(1);
    
        user.setNick("昵称");
    
        user.setPhone("13700020000");
    
        user.setAddress("北京大兴");
    
        model.addAttribute("user", user);
    
        model.addAttribute("hello", "helloworld");
    
        return "user";
    
    }

             前端接收代码:

    <span th:text="${user.nick}">x</span>
    
    <span th:text="${user.phone}">137xxxxxxxx</span>
    
    <span th:text="${user.email}">xxx@xx.com</span>
    
    <span th:text="${user.address}">北京.xxx</span>
    
    <span th:text="${hello}">你好</span>

             其中,th:text="" 是Thymeleaf的一个属性,用于文本的显示;

    2、选择变量表达式

             语法:*{...}

             选择变量表达式,也叫星号变量表达式,使用 th:object 属性来绑定对象,比如:

    @RequestMapping(value="/userinfo")
    
    public String userinfo (Model model) {
    
        User user = new User();
    
        user.setId(1);
    
        user.setNick("昵称");
    
        user.setPhone("13700020000");
    
        user.setAddress("北京大兴");
    
        model.addAttribute("user", user);
    
        model.addAttribute("hello", "helloworld");
    
        return "user";
    
    }

             前端接收代码

           

      <div th:object="${user}" >
    
        <p>nick: <span th:text="*{nick}">张</span></p>
    
        <p>phone: <span th:text="*{phone}" >三</span></p>
    
        <p>email: <span th:text="*{email}" >北京</span></p>
    
        <p>address: <span th:text="*{address}" >北京</span></p>
    
    </div>

    选择表达式首先使用th:object来邦定后台传来的User对象,然后使用 * 来代表这个对象,后面 {} 中的值是此对象中的属性;

             选择变量表达式 *{...} 是另一种类似于变量表达式 ${...} 表示变量的方法;

             选择变量表达式在执行时是在选择的对象上求解,而${...}是在上下文的变量Model上求解;

             通过 th:object 属性指明选择变量表达式的求解对象;

             上述代码等价于:

            

     <div>
    
        <p>nick: <span th:text="${user.nick}">张</span></p>
    
        <p>phone: <span th:text="${user.phone}" >三</span></p>
    
        <p>email: <span th:text="${user.email}" >北京</span></p>
    
        <p>address: <span th:text="${user.address}" >北京</span></p>
    
    </div>

             标准变量表达式和选择变量表达式可以混合一起使用,比如:

           

      <div th:object="${user}" >
    
        <p>nick: <span th:text="*{nick}">张</span></p>
    
        <p>phone: <span th:text="${user.phone}" >三</span></p>
    
        <p>email: <span th:text="${user.email}" >北京</span></p>
    
        <p>address: <span th:text="*{address}" >北京</span></p>
    
    </div>

             也可以不使用 th:object 进行对象的选择,而直接使用 *{...} 获取数据,比如:

         

    <div>
    
        <p>nick: <span th:text="*{user.nick}">张</span></p>
    
        <p>phone: <span th:text="*{user.phone}" >三</span></p>
    
        <p>email: <span th:text="*{user.email}" >北京</span></p>
    
        <p>address: <span th:text="*{user.address}" >北京</span></p>
    
    </div>

    3、URL表达式

             语法:@{...}

             URL表达式可用于 <script src="...">、<link href="...">、<a href="...">等

             1、绝对URL,比如:

             <a href="info.html" th:href="@{'http://localhost:8080/boot/user/info?id='+${user.id}}">查看</a>

             2、相对URL,相对于页面,比如:

             <a href="info.html" th:href="@{'user/info?id='+${user.id}}">查看</a>

             3、相对URL,相对于项目上下文,比如:

             <a href="info.html" th:href="@{'/user/info?id='+${user.id}}">查看</a> (项目的上下文名会被自动添加)

    Thymeleaf 的常见属性

    Thymeleaf 的常见属性

             如下为thymeleaf的常见属性:

             th:action

                      定义后台控制器的路径,类似<form>标签的action属性,比如:

                      <form id="login" th:action="@{/login}">......</form>

             th:each

                    这个属性非常常用,比如从后台传来一个对象集合那么就可以使用此属性遍历输出,它与JSTL中的<c: forEach>类似,此属性既可以循环遍历集合,也可以循环遍历数组及Map,比如:

    <tr th:each="user, interStat : ${userlist}">
    
        <td th:text="${interStat.index}"></td>
        
        <td th:text="${user.id}"></td>
    
        <td th:text="${user.nick}"></td>
    
        <td th:text="${user.phone}"></td>
    
        <td th:text="${user.email}"></td>
    
        <td th:text="${user.address}"></td>
    
    </tr>

    以上代码解读如下:

     th:each="user, iterStat : ${userlist}" 中的 ${userList} 是后台传来的Key,

    user是${userList} 中的一个数据,

    iterStat 是 ${userList} 循环体的信息,

    其中user及iterStat自己可以随便写;

    interStat是循环体的信息,通过该变量可以获取如下信息:

    index、size、count、even、odd、first、last,其含义如下:

      index: 当前迭代对象的index(从0开始计算)

      count: 当前迭代对象的个数(从1开始计算)

      size: 被迭代对象的大小

      current: 当前迭代变量

      even/odd: 布尔值,当前循环是否是偶数/奇数(从0开始计算)

      first: 布尔值,当前循环是否是第一个

      last: 布尔值,当前循环是否是最后一个

                      注意:循环体信息interStat也可以不定义,则默认采用迭代变量加上Stat后缀,即userStat

                      Map类型的循环: 

    <div th:each="myMapVal : ${myMap}">
    
         <span th:text="${myMapVal.key}"></span>
    
         <span th:text="${myMapVal.value}"></span>
    
    </div>

    ${myMapVal.key} 是获取map中的key,${myMapVal.value} 是获取map中的value;

    数组类型的循环: 

    <div th:each="myArrayVal : ${myArray}">
    
         <div th:text="${myArrayVal}"></div>
    
    </div>

                      th:href

                       定义超链接,比如:

                      <a  class="login" th:href="@{/login}">登录</a>

                      th:id

                      类似html标签中的id属性,比如:

                      <span th:id="${hello}">aaa</span>

                      th:if

                      条件判断,比如后台传来一个变量,判断该变量的值,1为男,2为女:

    <span th:if="${sex} == 1" >
    
              男:<input type="radio" name="se"  th:value="男" />
    
    </span>
    
    <span th:if="${sex} == 2">
    
              女:<input type="radio" name="se" th:value="女"  />
    
    </span>

                      th:unless

                      th:unless是th:if的一个相反操作,上面的例子可以改写为:

    <span th:unless="${sex} == 1" >
    
             女:<input type="radio" name="se"  th:value="女" />
    
    </span>
    
    <span th:unless="${sex} == 2">
    
             男:<input type="radio" name="se" th:value="男"  />
    
    </span>

                      th:switch/th:case

                      switch,case判断语句,比如:

    <div th:switch="${sex}">
    
          <p th:case="1">性别:男</p>
    
          <p th:case="2">性别:女</p>
    
          <p th:case="*">性别:未知</p>
    
    </div>

                      一旦某个case判断值为true,剩余的case则都当做false,“*”表示默认的case,前面的case都不匹配时候,执行默认的case;

             th:object

                      用于数据对象绑定

                      通常用于选择变量表达式(星号表达式)

             th:src

                      用于外部资源引入,比如<script>标签的src属性,<img>标签的src属性,常与@{}表达式结合使用;

                      <script th:src="@{/static/js/jquery-2.4.min.js}"></script>

                      <img th:src="@{/static/image/logo.png}"/>

             th:text

                      用于文本的显示,比如:

                      <input type="text" id="realName" name="reaName" th:text="${realName}">

             th:value

                      类似html标签中的value属性,能对某元素的value属性进行赋值,比如:

                      <input type="hidden" id="userId" name="userId" th:value="${userId}">

             th:attr

                      该属性也是用于给HTML中某元素的某属性赋值,但该方式写法不够优雅,比如上面的例子可以写成如下形式:

                      <input type="hidden" id="userId" name="userId" th:attr="value=${userId}" >

    Thymeleaf 字面量

    Thymeleaf 字面量

             文本字面量

                      用单引号'...'包围的字符串为文本字面量,比如:

                      <a th:href="@{'api/getUser?id=' + ${user.id}}">修改</a>

             数字字面量

                      <p>今年是<span th:text="2017">1949</span>年</p>
    
                      <p>20年后, 将是<span th:text="2017 + 20">1969</span>年</p>

             boolean字面量

                      true和false
    
                      <p th:if="${isFlag} == false">

    false在花括号外面,解析识别由Thymleaf自身完成

                      <p th:if="${isFlag == true}">

    false写在花括号里面,解析识别由SpringEL完成

      null字面量

                     

     <p th:if="${userlist == null}">

    userlist为空

    </p>
    
    <p th:if="${userlist != null}">
    
    userlist不为空
    
    </p>

    Thymeleaf 字符串拼接

    Thymeleaf 字符串拼接

             一种是字面量拼接:

             <a href="#" th:text="'第'+${sex}+'页 ,共'+${sex}+'页'"></a>

             另一种更优雅的方式,使用“|”减少了字符串的拼接:

             <a href="#" th:text="|第${sex}页,共${sex}页|"></a>

    Thymeleaf 三元运算判断

    Thymeleaf 三元运算判断

             <span th:text="${sex eq '1'} ? '男' : '女'">未知</span>

    Thymeleaf 运算和关系判断

    Thymeleaf 运算和关系判断

             算术运算:+ , - , * , / , %

             关系比较: > , < , >= , <= ( gt , lt , ge , le )

             相等判断:== , != ( eq , ne )

    Thymaleaf 表达式基本对象

    Thymaleaf 表达式基本对象

             1、模板引擎提供了一组内置的对象,这些内置的对象可以直接在模板中使用,这些对象由#号开始引用:

             2、官方手册:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

             #ctx:上下文对象

             #vars:上下文变量

             #locale: 上下文语言环境.

             #httpServletRequest: (仅在web上下文)相当于HttpServletRequest 对象,这是2.x版本,若是3.x版本使用 #request;

             用法:

             ${#request.getContentextPath()}

    ${#request.getAttribute(“name”)}

             控制器中:

                     

             页面中:

                   

                      也可以这样显示:

             #httpSession: (仅在web上下文)相当于HttpSession 对象,这是2.x版本,若是3.x版本使用#session; 需要在后台controller中设置了session

            

    Thymaleaf 表达式功能对象

    Thymaleaf 表达式功能对象

             1、模板引擎提供的一组功能性内置对象,可以在模板中直接使用这些对象提供的功能方法:

             2、工作中常使用的数据类型,如集合,时间,数值,可以使用thymeleaf的提供的功能性对象来解析他们;

             3、内置功能对象前都需要加#号,内置对象一般都以s结尾;

             4、官方手册:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

             #dates: java.util.Date对象的实用方法,<span th:text="${#dates.format(curDate, 'yyyy-MM-dd HH:mm:ss')}"></span>
    
             #calendars: 和dates类似, 但是 java.util.Calendar 对象;
    
             #numbers: 格式化数字对象的实用方法;
    
             #strings: 字符串对象的实用方法: contains, startsWith, prepending/appending等;
    
             #objects: 对objects操作的实用方法;
    
             #bools: 对布尔值求值的实用方法;
    
             #arrays: 数组的实用方法;
    
             #lists: list的实用方法,比如<span th:text="${#lists.size(datas)}"></span>
    
             #sets: set的实用方法;
    
             #maps: map的实用方法;
    
             #aggregates: 对数组或集合创建聚合的实用方法;

    Thymeleaf 在 SpringBoot 中的配置大全:

    Thymeleaf 在 SpringBoot 中的配置大全:

             Thymeleaf的配置文件说明:

             #spring.thymeleaf.cache = true #启用模板缓存。
    
             #spring.thymeleaf.check-template = true #在呈现模板之前检查模板是否存在。
    
             #spring.thymeleaf.check-template-location = true #检查模板位置是否存在。
    
             #spring.thymeleaf.content-type = text/html #Content-Type值。
    
             #spring.thymeleaf.enabled = true #启用MVC Thymeleaf视图解析。
    
             #spring.thymeleaf.encoding = UTF-8 #模板编码。
    
             #spring.thymeleaf.excluded-view-names = #应该从解决方案中排除的视图名称的逗号分隔列表。
    
             #spring.thymeleaf.mode = HTML5 #应用于模板的模板模式。另请参见StandardTemplateModeHandlers。
    
             #spring.thymeleaf.prefix = classpath:/templates/ #在构建URL时预先查看名称的前缀。
    
             #spring.thymeleaf.suffix = .html #构建URL时附加到查看名称的后缀。
    
             #spring.thymeleaf.template-resolver-order = #链中模板解析器的顺序。
    
             #spring.thymeleaf.view-names = #可以解析的视图名称的逗号分隔列表。
    学习中,博客都是自己学习用的笔记,持续更新改正。。。
  • 相关阅读:
    redis数据结构详解之Hash(四)
    Redis数据结构详解之Set(三)
    Redis数据结构详解之List(二)
    Redis数据结构详解(一)
    memcached安装及.NET中的Memcached.ClientLibrary使用详解
    Quartz.net开源作业调度框架使用详解
    quartz.net 时间表达式----- Cron表达式详解
    MongoDB高级查询详细
    MongoDB下载安装与简单增删改查
    MSSQLSERVER添加c# clr程序集的使用方法
  • 原文地址:https://www.cnblogs.com/Tunan-Ki/p/11774279.html
Copyright © 2011-2022 走看看