Thymeleaf

认识Thymeleaf

Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎，能够处
理HTML，XML，JavaScript，CSS甚至纯文本。是springboot推荐的模板引擎。

额外说明，虽然主旨是为了讲thymeleaf，但是我也会涉及到很对mvc的内容，请谅解

小陷阱（细节）

在spring引入thymeleaf后，你的转发就要注意了，转发的页面一定要放在template下面，这样才会被模板解析，换言之，转发的页面必须在模板引擎下，而本服务器的重定向只能在静态文件下。

@ResponseBody

看清楚这个注释，就是把后台数据转化为json给前端。
@RestController==@Controller+@ResponseBody
不得不提到得是，如果使用了引擎模板的页面，就不可能用restcontroller了，因为，引擎模板的页面需要一些容器，如model，modelmap，modelandview，session等，而不是简单的json格式

容器

在新手的印象中，容器好像就只能是request、session、application，事实上并非如此，Spring mvc提供了不少容器，而这些容器也能被解析模板解析在html上渲染
Map：毫无疑问，他是模板们的爹，原生的键值对，它可以用（map本身也只是一个接口）
Model：他也只是一个接口，仅有寥寥几个方法，只适合数据存储
ModelMap 继承了 LinkedMap ，除了实现了自身的一些方法，同样的继承 LinkedHashMap的方法和特性
ModelAndView 可以在储存数据的同时，可以进行设置返回的逻辑视图，进行控制展示层的跳转。

ModelAndView

它确实要稍微特殊一点，因为他不仅有模型，还可以直接给出视图，其他容器返回值为String（主要是方便转发），而他必须返回为ModelAndView，如果有转发的路径，写法为：
ModelAndView view = new ModelAndView(“index”); （转发到index页面，转发不会给后缀）

重中之重，如何用thymeleaf

讲了这么多，主要是想告诉大家如何将数据放入容器给模板解析，即准备材料，以及模板和静态文件夹的区别，spring boot就是这样一个严谨的框架，至少从内容布局上来讲，它做的很好了。

开始了，这里是thymeleaf的showtime

<h1 th:text="${message}">我是原文</h1>
<!--    这个message就是key，这里可以取得他的value，并且覆盖掉这里的文本内容-->
<h3 th:text="${user.name}">看不见我</h3>
<!--  javabean的取值方法  -->
<h3 th:text="${list[1].name}"></h3>
<!--  数组的取值方法  -->

<div th:object="${user}">
    <p th:text="*{name}"></p>
    <p th:text="*{age}"></p>
    <p th:text="*{sex}"></p>
</div>
<!-- $是变量表达式，而*是选择表达式 -->

<!-- @是超链接表达式，可以href的跳转，也可以src的导入文件，图片等 -->
<a href="#" th:href="@{${url}}">跳转</a>
<img src="#" th:src="@{images/1.jpg}" style="width:100px">
<!-- 动态的总是会覆盖静态的内容，除非没有被解析，就会显示静态的内容了 -->

<a th:href="@{/order/add(id=12)}">单参</a>
<!-- <a href="/order/add?id=12">单参</a>上面这个就等价于这个 -->
<a th:href="@{/order/add(name=xs,pwd=123456)}">多参</a>
<!-- url跳转加参数 -->

<h3>if/unless判断</h3>
<a th:if="${flag=='true'}" th:href="success.html">如果返回的是true</a>
<a th:if="${flag=='false'}" th:href="fail">如果返回的是false</a>

<table border="1">
     <tr>
         <td>姓名</td>
         <td>年龄</td>
         <td>性别</td>
     </tr>
     <tr th:each="user:${list}">
         <td th:text="${user.name}"></td>
         <td th:text="${user.age}"></td>
         <td th:text="${user.sex}"></td>
     </tr>
</table>
<!-- 数据遍历显示 -->

<input type="text" th:value="${list[2].name}">
<!-- 在value中显示解析内容 -->

<h2>hello,[[${user.name}]]</h2>
<!-- 这是内联 -->

引用到js的细节

上面说过了，thymeleaf能够处理那么多格式，但这儿只写到html，是不是骗人哦，其实没有骗你，只不过html的处理情况更多一些，这里再补充一下在js中怎么写入数据

		<script th:inline="javascript">
		/*<![CDATA[*/
		 ...
		 var username = /*[[${session.user.name}]]*/ 'Sebastian';
		 ...
		/*]]>*/
		</script>

我们要用inline来指定这个script标签;

我们需要注释<![CDATA[,]]>对，否则就会无法在js中使用比较符号;

我们要用[[${value}]]来引用模板变量;

我们要在变量外面也套上注释**\，并在后面添加上默认的值，这是为了前端开发人员能在没有后台的情况下正常渲染。