模板引擎思想
templates目录
引入Thymeleaf
一些配置
源码阅读
第一个Thymeleaf
Thymeleaf语法
- 先添加约束
- 取元素表达式
国际化消息
- 字面量
- 运算符
指令汇总及用法
- 转义
- 遍历
完整汇总及用法

SpringBoot默认是不支持jsp的，SpringBoot项目首先是以jar存在的，而不是war。

如果不使用jsp，则模板引擎用于弥补静态页面的不足。
模板引擎有很多，实际上jsp就是一个模板引擎。除此以外还有用的比较多的freemarker，springboot推荐使用的Thymeleaf…
模板引擎思想
不管是什么模板引擎，思想都是一样的

简：模板引擎对静态的页面进行渲染，将动态的数据填充
完整：我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎，模板引擎按照我们这个数据帮你把这表达
式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去

模板引擎很大程度被前后端分离替代了，模板引擎实际上是个很古老的东西了

templates目录

该目录是存放模板的(模板引擎)
**

在templates中的HTML页面需要被访问到，需要模板引擎的支持。在创建项目时添加相关依赖即可

引入Thymeleaf

对于springbopot来说，无论什么都是一个starter的事。我们去找到Thymeleaf的依赖即可
Thymeleaf必须导入3.?的版本，2.?的现在用不了了
有如下网址可以找到

Thymeleaf 官网：https://www.thymeleaf.org/
Thymeleaf 在Github 的主页：https://github.com/thymeleaf/thymeleaf

Spring官方文档：找到我们对应的版本官方文档

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

一些配置

spring.thymeleaf.cache=false  #禁用模板引擎的缓存功能

源码阅读

还是跟之前一样，不知道怎么使用就去找对应的自动配置类(ThymeleafProperties）

@ConfigurationProperties(
 prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
 private static final Charset DEFAULT_ENCODING;
 public static final String DEFAULT_PREFIX = "classpath:/templates/";
 public static final String DEFAULT_SUFFIX = ".html";
 private boolean checkTemplate = true;
 private boolean checkTemplateLocation = true;
 private String prefix = "classpath:/templates/";
 private String suffix = ".html";
 private String mode = "HTML";
 private Charset encoding;
}

6行表示前缀，表示静态资源的路径：template
7行为后缀，表示只支持HTML格式的静态资源
我们只需要把我们的html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染了。
使用thymeleaf什么都不需要配置，只需要将他放在指定的文件夹下即可

第一个Thymeleaf

@Controller
public class TestController {
    @RequestMapping("/t1")
    public String test1(Model model){
        //存入数据
        model.addAttribute("msg","Hello,Thymeleaf");
        //classpath:/templates/test.html
        return "test";
    }
}

Model还不清楚是什么回事。应该跟SpringMVC或者MVC有关。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>狂神说</title>
</head>
<body>
<h1>测试页面</h1>

<!--th:text就是将div中的内容设置为它指定的值，和之前学习的Vue一样-->
<div th:text="${msg}"></div>
</body>
</html>

结果

元素值不一定需要使用addattirbute来存数据，还不清楚如下代码为什么


@RequestMapping("/t2")
public String test2(Map<String,Object> map){
    //存入数据
    map.put("msg","<h1>Hello</h1>");
    map.put("users", Arrays.asList("qinjiang","kuangshen"));
    //classpath:/templates/test.html
    return "test";
}


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>狂神说</title>
</head>
<body>
<h1>测试页面</h1>

<div th:text="${msg}"></div>
<!--不转义-->
<div th:utext="${msg}"></div>

<!--遍历数据-->
<!--th:each每次遍历都会生成当前这个标签：官网#9-->
<h4 th:each="user :${users}" th:text="${user}"></h4>

<h4>
    <!--行内写法：官网#12-->
    <span th:each="user:${users}">[[${user}]]</span>
</h4>

</body>
</html>

Thymeleaf语法

先添加约束

语法详见Thymeleaf官方文档，不过也没多少

要使用Thymeleaf，要在HTML中添加命名空间的约束。之前只是导入依赖只是让项目能识别templates目录。并未使用到Thymeleaf语法，所以未引入约束
```
xmlns:th="http://www.thymeleaf.org"
约束一般写在<html>标签这里，如:<html lang="en" xmlns:th="http://www.thymeleaf.org">
```
取元素表达式
取数据(元素) 在HTML标签加上指令与取元素表达式即可 th:即Thymeleaf指令
指令+取元素表达式如th:text=${msg} th:text是指令 ${？}是取元素表达式有些类似Vue
有的htm l标签不支持Thymeleaf指令如div支持，h1不支持
$变量 ${?}
选择变量 {?}
@链接
国际化消息
~片段

字面量
文本使用单引号包含 ‘jiang’
数字直接写 2
布尔值直接写 true false
空值直接写null

运算符
- 文本连接
数学运算: + - * / %
布尔运算 and or not
比较运算 > < >= <= == !=
条件运算
- if-then (if)?(then)
- if-then-else (if)?(then):(else)
  指令汇总及用法

Web开发3-模板引擎(Thymeleaf) - 图4
1：片段包含即引入其他页面文件或者代码块文件类似jsp的include

转义

如model.addAttribute(msg,"<h1>hello world"</h1>);
使用th:text囧会输出加大加粗的hello world 使用utext就会输出

遍历是使用最多的一种
首先创建一个集合**model.addAttribute(Array.asList())**
asList作用是将数组转化为一个集合。可能也可以根据基本类型的参数创建集合
**<h3>th:each="user:${users}" th:text="${user}"</h3>**th：each作用是遍历元素。users集合的元素一个一个输出到user，再通过th:text输出每一个元素
另外一种写法:<h3 th:each="user:${users}">[[${user}]]</h3> 这种是利用了转义
th:each实际上就是for-each

完整汇总及用法


Simple expressions:（表达式语法）
Variable Expressions: ${...}：获取变量值；OGNL；
    1）、获取对象的属性、调用方法
    2）、使用内置的基本对象：#18
         #ctx : the context object.
         #vars: the context variables.
         #locale : the context locale.
         #request : (only in Web Contexts) the HttpServletRequest object.
         #response : (only in Web Contexts) the HttpServletResponse object.
         #session : (only in Web Contexts) the HttpSession object.
         #servletContext : (only in Web Contexts) the ServletContext object.

    3）、内置的一些工具对象：
　　　　　　#execInfo : information about the template being processed.
　　　　　　#uris : methods for escaping parts of URLs/URIs
　　　　　　#conversions : methods for executing the configured conversion service (if any).
　　　　　　#dates : methods for java.util.Date objects: formatting, component extraction, etc.
　　　　　　#calendars : analogous to #dates , but for java.util.Calendar objects.
　　　　　　#numbers : methods for formatting numeric objects.
　　　　　　#strings : methods for String objects: contains, startsWith, prepending/appending, etc.
　　　　　　#objects : methods for objects in general.
　　　　　　#bools : methods for boolean evaluation.
　　　　　　#arrays : methods for arrays.
　　　　　　#lists : methods for lists.
　　　　　　#sets : methods for sets.
　　　　　　#maps : methods for maps.
　　　　　　#aggregates : methods for creating aggregates on arrays or collections.
==================================================================================

  Selection Variable Expressions: *{...}：选择表达式：和${}在功能上是一样；
  Message Expressions: #{...}：获取国际化内容
  Link URL Expressions: @{...}：定义URL；
  Fragment Expressions: ~{...}：片段引用表达式

Literals（字面量）
      Text literals: 'one text' , 'Another one!' ,…
      Number literals: 0 , 34 , 3.0 , 12.3 ,…
      Boolean literals: true , false
      Null literal: null
      Literal tokens: one , sometext , main ,…

Text operations:（文本操作）
    String concatenation: +
    Literal substitutions: |The name is ${name}|

Arithmetic operations:（数学运算）
    Binary operators: + , - , * , / , %
    Minus sign (unary operator): -

Boolean operations:（布尔运算）
    Binary operators: and , or
    Boolean negation (unary operator): ! , not

Comparisons and equality:（比较运算）
    Comparators: > , < , >= , <= ( gt , lt , ge , le )
    Equality operators: == , != ( eq , ne )

Conditional operators:条件运算（三元运算符）
    If-then: (if) ? (then)
    If-then-else: (if) ? (then) : (else)
    Default: (value) ?: (defaultvalue)

Special tokens:
    No-Operation: _

Web开发3-模板引擎(Thymeleaf)

模板引擎思想