thymeleaf使用、运行、简单语法

拼搏现实的明天。 2023-02-28 11:26 6阅读 0赞

主要目标是将优雅的自然模板带到开发工作流程中，并将**HTML在浏览器中**正确显示，并且可以作为**静态原型，**让开发团队能更容易协作。Thymeleaf能够处理HTML,xml,Js,css甚至纯文本。

Thymeleaf是**原生的，不依赖于标签库**。它能够在接受**原始HTML的地方进行编辑和渲染。因为它没有与Servlet规范耦合**，因此Thymeleaf模板能进入jsp所无法涉及的领域。

文档支持和页面原型支持；没法把jsp改成html，所以有了thymeleaf；所以产品经理所制定的页面后端程序员很难进行复用；画好的原型页面thymeleaf能够直接使用；所以有了模板引擎，thymeleaf>freemarker；【这是单体项目特点】

【分布式的，前后端分离的】thymeleaf就没有特点了；

××××××××××××××××××××××××基本使用thymeleaf

它的html页面不允许直接访问，需要浏览器进行渲染；

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

在运行时，springboot的自动配置会发现在Thymeleaf在类路径中，因为会为SpringMVC创建支撑Thymeleaf视图的bean。

像Thymeleaf这样的视图库在设计时与特定的web框架解耦的。这样的话它们就无法感知Spring的模型对象，因此无法与控制器放到Model中的数据协同工作。但是它可以与Servlet的request属性进行协作。所以，在Spring将请求转换到视图之前，它会把模型数据复制到request属性中，Thymeleaf和其他的视图模板就能够访问到它们了。

文本显示

<p th:text="${message}" > placeholder message  </p>

循环

<div th:each="ingredient : ${wrap}">
        <input name="gredients" type="checkbox" th:value="${ingredient.id}"/>
        <span th:text="{ingredient.name}">Ingredient</span><br/>
    </div>

链接

表单

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">&lt;span th:text=”pshd”&gt;hx&lt;/span&gt;</p> <p style="margin-left:0pt;">&lt;span th:”${msg}”&gt; 从controller来</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">输出：pshd，标签中的内容会被替换</p> <p style="margin-left:0pt;">输出了变量的值；</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">Th:value</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">可将一个值放入到<strong><strong>input</strong></strong>的标签的value中</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">内置对象：可以在模板中直接使用，用#</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">${#strings.isEmpth(key)}</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">判断字符串是否为空ture/false</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">${#strings.contains(msg,’T’)}</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">判断字符串是够包含指定字符串</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">${strings.strtsWith(msg,’a’)}</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">判断当前串是否以子串开头</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">${#strings.length(msg)}</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">返回字符串长度</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">${#strings.indexOf(msg,’h’)}</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">查找子串的位置，返回其下标/-1</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">${#strings.substring(msg,2)}</p> <p style="margin-left:0pt;">${#strings.substring(msg,2,5)}</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">${#dates.format(key)}</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">格式化日期为浏览器默认格式标准</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">${#dates.format(key,’yyyy/MM/dd’)}</p> <p style="margin-left:0pt;">${#dates.year(key)}</p> <p style="margin-left:0pt;">${#dates.month(key)}</p> <p style="margin-left:0pt;">${#dates.day(key)}</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">th:if</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">条件判断</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">th:switch/th:case</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">多个匹配，显示第一条配置；没有default，但是th:case=”*”等同</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">Th:each</p> <p style="margin-left:0pt;">状态变量：</p> <p style="margin-left:0pt;">Index:当前迭代器的索引从0开始</p> <p style="margin-left:0pt;">Count:当前迭代对象的计数从1开始</p> <p style="margin-left:0pt;">Size:被迭代对象的长度</p> <p style="margin-left:0pt;">Odd/even：布尔值，当前循环是否是偶数/奇数 从0开始</p> <p style="margin-left:0pt;">First:布尔值，当前循环的是否是第一条</p> <p style="margin-left:0pt;">Last：布尔值，当前逊汗的是否是最后一条</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">迭代器，用户循环迭代集合</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td style="vertical-align:top;width:213.05pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

<span th:text=”${#strings.isEmpty(msg)}”></span>
    Model.addAttribute(“sex”,”男”);
    <div>
    <span th:if=”${sex}==’男’”>
    性别：男
    </span>
    <span th:if=”${sex}==’女’”>
    性别：女
    </span>
    </div>
    
    <div th:switch=”${id}”>
    <span th:case=”1”>
    ID为1的内容
    </span>
    </div>
    
    
    <table border=”1” >
    <tr>
    <th>ID</th>
    <th>Name</th>
    <th>age</th>
    </tr>
    <tr th:each=”u : ${lisst}”>
    <td th:text=”${u.id}”></td>
    <td th:text=”${u.Name}”></td>
    <td th:text=”${u.age}”></td>
    </tr>
    </table>
    Th:each 迭代Map
    <table>
    <tr>
    <th>Value</th>
    </tr>
    <tr th:each=”m : ${map}”>
    <td th:text=”${m}”></td>     输出的是对象的地址是entry类型
    </tr>
    <tr th:each=”m :${map}”>
    <td th:text=”${m.value.id}”></td>
    <td th:text=”${m.value.name}”></td>
    <td th:text=”${m.value.age}”></td> 
    </tr>
    </table>
    
    
    ×××××××××××××××××××操作域对象
    Request.setAttribute(“req”,”HttpServletRequest”);
    Request.getSesson().setAttribute(“ses”,”httpSession”);
    Request.getSession().getServletContext().setAttribute(“app”,”application”)
    
    
    HttpServletRequest
    Request.setAttribute(“req”,”HttpServletRequest”);
    <span th:text=”${#httpServletRequest.getAttribute(‘req’)}”></span>
    <span th:text=”${#request.getAttribute(‘req’)}”></span>
    
    HttpSession
    Request.getSession.setAttribute(“ses”,”HttpSession”);
    <span th:text=”${#session.sess}”></span><br/>
    <span th:text=”${#session.getAttribute(‘ses’)}”></span>

springboot支持模板的方案

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>模板</td> 
   <td>springboot的starter的依赖</td> 
  </tr> 
  <tr> 
   <td>FreeMarker</td> 
   <td>spring-boot-starter-freemarker</td> 
  </tr> 
  <tr> 
   <td>Groovy Templates</td> 
   <td>spring-boot-starter-groovy-templates</td> 
  </tr> 
  <tr> 
   <td>java server page</td> 
   <td>由tomcat和jetty提供</td> 
  </tr> 
  <tr> 
   <td>Mustache</td> 
   <td>spring-boot-starter-mustache</td> 
  </tr> 
  <tr> 
   <td>Thymeleaf</td> 
   <td>spring-boot-starter-thymeleaf</td> 
  </tr> 
 </tbody> 
</table>

### 缓存模板 ###

默认情况下，模板只有在第一次使用的时候解析一次，解析的结果会被后续的请求所使用。对于生产环境来说，这是一个很棒的特性，它能防止每次请求时多余的模板解析过程，因此有助于提升性能。但是，在开发期就太不好了，无法看到页面的修改效果。因此有一种方法可以禁用缓存。我们只需在application.properties中添加spring.thymeleaf.cache=false。唯一需要注意的是，在将应用部署到生产环境之前，这一行代码一定要删除。另一种更简单的方式是单独配置一个测试环境的profile，打包时改成正式环境的配置文件即可。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>模板</td> 
   <td>启用缓存的属性</td> 
  </tr> 
  <tr> 
   <td>FreeMarker</td> 
   <td>spring.freemarker.cache</td> 
  </tr> 
  <tr> 
   <td>Groovy Templates</td> 
   <td>spring.groovu.template.chche</td> 
  </tr> 
  <tr> 
   <td>Mustache</td> 
   <td>spring.mustache.cache</td> 
  </tr> 
  <tr> 
   <td>Thymeleaf</td> 
   <td>spring.thymeleaf.chche</td> 
  </tr> 
 </tbody> 
</table>