Thymeleaf 使用

在pom.xml中加入如下依赖

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

在新建的html页面的 加入

xmlns:th="http://www.thymeleaf.org"

后端用model返回数据

常用标签

咱们上面知道Thymeleaf通过特殊的标签来寻找属于Thymeleaf的部分，并渲染该部分内容，而除了上面展示过的th:text之外还有很多常用标签，并且Thymeleaf也主要通过标签来识别替换对应位置内容，Thymeleaf标签有很多很多，功能也很丰富，这里列举一些比较常用的标签如下：

标签	作用	示例
th:id	替换id	<input th:id="${user.id}"/>
th:text	文本替换	<p text:="${user.name}">bigsai</p>
th:utext	支持html的文本替换	<p utext:="${htmlcontent}">content</p>
th:object	替换对象	<div th:object="${user}"></div>
th:value	替换值	<input th:value="${user.name}" >
th:each	迭代	<tr th:each="student:${user}" >
th:href	替换超链接	<a th:href="@{index.html}">超链接</a>
th:src	替换资源	<script type="text/javascript" th:src="@{index.js}"></script>

引入css

 <link rel="stylesheet" th:href="@{index.css}">

引入JavaScript：

 <script type="text/javascript" th:src="@{index.js}"></script>

超链接：

<a th:href="@{index.html}">超链接</a>

@GetMapping("index")//页面的url地址
 public String getindex(Model model)//对应函数
  {
     user user1=new user("bigsai",22,"一个幽默且热爱java的社会青年");
     List<String>userList=new ArrayList<>();
     userList.add("zhang san 66");
     userList.add("li si 66");
     userList.add("wang wu 66");
     Map<String ,String>map=new HashMap<>();
     map.put("place","博学谷");
     map.put("feeling","very well");
     //数据添加到model中
     model.addAttribute("name","bigsai");//普通字符串
     model.addAttribute("user",user1);//储存javabean
     model.addAttribute("userlist",userList);//储存List
     model.addAttribute("map",map);//储存Map
     return "index";//与templates中index.html对应
  }

取List集合(each):
因为List集合是个有序列表，里面内容可能不止一个，你需要遍历List对其中对象取值，而遍历需要用到标签：th:each,具体使用为<tr th:each="item:${userlist}">,其中item就相当于遍历每一次的对象名，在下面的作用域可以直接使用，而userlist就是你在Model中储存的List的名称。完整的代码为：

<h2>List取值</h2>
<table bgcolor="#ffe4c4" border="1">
    <tr th:each="item:${userlist}">
        <td th:text="${item}"></td>
    </tr>
</table>

直接取Map:
很多时候我们不存JavaBean而是将一些值放入Map中，再将Map存在Model中，我们就需要对Map取值，对于Map取值你可以${Map名['key']}来进行取值。也可以通过${Map名.key}取值，当然你也可以使用${map.get('key')}(java语法)来取值，完整代码如下：

<h2>Map取值</h2>
<table bgcolor="#8fbc8f" border="1">
    <tr>
        <td>place:</td>
        <td th:text="${map.get('place')}"></td>
    </tr>
    <tr>
        <td>feeling:</td>
        <td th:text="${map['feeling']}"></td>
    </tr>
</table>

遍历Map：
如果说你想遍历Map获取它的key和value那也是可以的，这里就要使用和List相似的遍历方法，使用th:each="item:${Map名}"进行遍历，在下面只需使用item.key和item.value即可获得值。完整代码如下：

<h2>Map遍历</h2>
<table bgcolor="#ffe4c4" border="1">
    <tr th:each="item:${map}">
        <td th:text="${item.key}"></td>
        <td th:text="${item.value}"></td>
    </tr>
</table>

选择变量表达式: *{…}

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

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

什么是选定对象？使用th:object属性的表达式的结果。就可以选定对象，具体实例如下：

<div th:object="${user}">
    <p>Name: <span th:text="*{name}">赛</span>.</p>
    <p>Age: <span th:text="*{age}">18</span>.</p>
    <p>Detail: <span th:text="*{detail}">好好学习</span>.</p>
</div>

当然*{…}也可和${…}混用。上面的代码如果不使用选定对象，完全等价于：

<div >
    <p>Name: <span th:text="*{user.name}">赛</span>.</p>
    <p>Age: <span th:text="${user.age}">18</span>.</p>
    <p>Detail: <span th:text="${user.detail}">好好学习</span>.</p>
</div>