模板引擎

什么是模板引擎？

开发一个单体应用时，后端人员一般是拿到前端开发好的html页面，传统的是转为jsp来嵌入java代码，来实现功能。

页面与数据相结合，再渲染成页面，这个过程就是模板引擎负责的功能。

直到SpringBoot中的Jetty或Tomcat是以jar包的方式运行，不是war包，由于jsp的某些限制导致无法写jsp页面。

所以SpringBoot默认且推荐使用新的模板引擎Thymelaef。
为什么推荐Thymelaef？

我认为Thymelaef嵌入的语法不会破坏页面原有的结构，并且默认支持html的格式，页面拿来就可以直接开始！
知名的模板引擎：JSP、Freemarker、Thymelaef

模板引擎工作原理

模板引擎工作原理图

Thymeleaf官方

官网:https://www.thymeleaf.org/documentation.html
github:https://github.com/thymeleaf/thymeleaf

Thymeleaf Starter GA坐标

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

SpringBoot集成Thymelaef

引入starter依赖，开箱即用！（如果是starter依赖而不是原生依赖，则在application.yml中调整配置即可）
- 对应Properties：ThymeleafProperties
- spring:
  thymeleaf:
  cache: false #可以在开发时设为false，改了html代码不用重启服务，刷新页面即可生效

Controller

@Controller // 可以被视图解析器解析 
public class IndexController {
    @GetMapping("index")
    public String hello(Model model) {
        model.addAttribute("msg", "hello,Thymeleaf!My name is HTH!");
        return "index";
    }
}

Html

classpath:/templates/index.html

<!DOCTYPE html>
<!-- xmlns:xml namespace 命名空间，加上了才可以支持 thymeleaf 语法 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <head>
<meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>测试页面</h1>
<p th:text="${msg}"></p>
</body>
</html>

测试：访问index OK

Thymelaef语法

前言

语法这个东西不必要一次性全部记住，也很难记得住，先了解个大概，用到的时候翻翻官方文档，自然就记住了！

th: 标签属性

Thymelaef 所管理的标签属性都是以th来修饰

语法分类

text

填充标签内容
根据表达式，输出内容:
<p th:text="${msg}"></p>

utext

不行进转义输出html标签
有时候我们要在富文本编辑器里面带上一些格式信息，展示的时候带上这些格式信息，就可以用到utext:
//controller
model.addAttribute("htmlTag", "<h2>html标签转义</h2");
<p th:utext="${htmlTag}"></p>

if

条件评估
有时候可能在一个文章中，判断有评论则显示评论列表，否则不显示，则可以用到th:if：
<h1 th:if="false">测试页面</h1>
<p th:text="${msg}"></p>

switch

开关语句
可以使用Java 中的switch结构的等效条件来显示内容：th:switch/ th:case。

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
</div>

each

遍历

遍历对象列表，选中对象继续操作:

@Autowired
private ArticleMapper articleMapper;

@GetMapping("index")
public String hello(Model model) {
    model.addAttribute("msg", "hello,Thymeleaf!My name is HTH!");
    //从数据库拿到数据列表
    model.addAttribute("articles", articleMapper.list());
    return "index";
}

<table th:each="article : ${articles}">
    <tr>
        <td th:text="${article.id}"></td>
        <td th:text="${article.getName()}"></td>
    </tr>
</table>
<!--也可以这么写-->
<h3 th:each="article : ${articles}" th:text="${article}"></h3>

##表达式

${} 变量表达式

${...}表达式实际上是在上下文中包含的变量映射上执行的OGNL（对象图导航语言）表达式。
有关OGNL语法和功能的详细信息，请阅读OGNL语言指南。

在启用Spring MVC的应用程序中，OGNL将替换为SpringEL，但是其语法与OGNL的语法非常相似（实际上，在大多数情况下完全相同）。
上文已经出现多次的：
<p th:text="${msg}"></p>
除了我们自己定义的对象，Thymelaef还提供了基础内置对象与工具对象：

基础内置对象

在上下文变量上评估OGNL表达式时，某些对象可用于表达式，以提高灵活性。这些对象（根据OGNL标准）将以#符号开头进行引用（摘抄自官方文档）：

#ctx：上下文对象。
#vars: 上下文变量。
#locale：上下文语言环境。
#request：（仅在Web上下文中）HttpServletRequest对象。
#response：（仅在Web上下文中）HttpServletResponse对象。
#session：（仅在Web上下文中）HttpSession对象。
#servletContext：（仅在Web上下文中）ServletContext对象。

<p th:text="${#ctx}"></p>
<p th:text="${#vars}"></p>
<p th:text="${#locale}"></p>
<p th:text="${#response}"></p>
<p th:text="${#session}"></p>
<p th:text="${#servletContext}"></p>

工具对象

除了这些基本对象之外，Thymeleaf将为我们提供一组实用程序对象，这些对象将帮助我们在表达式中执行常见任务，各个对象的具体用法请参考官方文档附录

#execInfo：有关正在处理的模板的信息。
#messages：用于获取变量表达式内的外部化消息的方法，与使用＃{…}语法获得消息的方法相同。
#uris：用于转义部分URL / URI的方法
#conversions：用于执行已配置的转换服务（如果有）的方法。
#dates：java.util.Date对象的方法：格式化，组件提取等。
#calendars：类似于#dates，但用于java.util.Calendar对象。
#numbers：格式化数字对象的方法。
#strings：String对象的方法：包含，startsWith，前置/追加等。
#objects：一般对象的方法。
#bools：布尔值评估的方法。
#arrays：数组方法。
#lists：列表方法。
#sets：Set方法。
#maps：地图方法。
#aggregates：用于在数组或集合上创建聚合的方法。
#ids：用于处理可能重复的id属性的方法（例如，由于迭代的结果）。

#{} 消息表达式

用于获取静态资源的文本，可用于国际化的业务场景
1. 我们新建/messages/home.properties，按需要可添加home_zh_CN.properties、home_en_US.properties等..
  home.welcome=来自properties的消息
2. 
  <p th:text="#{home.welcome}"></p>
3. application.yml 配置消息路径，{路径}+{国际化properties前缀}
  spring:
  messages:
  basename: messages/home
4. 测试:

*{} 选择变量表达式

变量表达式不仅可以写成${...}，而且还可以写成*{...}。

但是，有一个重要的区别：星号语法对选定对象而不是整个上下文评估表达式。也就是说，只要没有选定的对象，美元和星号语法就完全一样。

什么是选定对象？使用th:object属性的表达式的结果：

<!-- 在外层选定某个对象 内部可直接获取其属性 当然，$与*完全可以混合使用-->
<div th:object="${session.user}">
  <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

完全等同于：

<div>
  <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>

@{} URL表达式

URL有不同类型：

绝对网址： http://www.thymeleaf.org
相对URL，可以是：
- 相对页面： user/login.html
- 上下文相关：/itemdetails?id=3`服务器中的上下文名称将自动添加
- 相对于服务器：~/billing/processInvoice允许在同一服务器中的另一个上下文应用程序中调用URL。
- 相对静态资源： //code.jquery.com/jquery-2.0.3.min.js

甚至可以使用变量，举几个🌰：

<link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
<a th:href="@{${url}(orderId=${o.id})}">view</a>
<a th:href="@{'/details/'+${user.login}(orderId=${o.id})}">view</a>
<!-- 不破坏原始html的情况下 加入th语法!-->
<li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li>