thymeleaf初学笔记
跟着这个视频学的：【模板引擎Thymeleaf快速入门】 https://www.bilibili.com/video/BV1qy4y117qi/?p=2
在HTML的html标签中加入引用xmlns:th=“http://www.thymeleaf.org”
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> </html>
渲染数据的方式：
<head> <meta charset="UTF-8"> <title th:text="|lookroot-${title}|">默认的title</title> <meta th:content="${description}" name="description" content="默认的description"/> <meta th:content="${keywords}" name="keywords" content="默认的keywords"/> </head>
@Controller public class IndexController { @GetMapping("/index") public String index(Model model){ model.addAttribute("title", "传递的title"); model.addAttribute("description", "传递的description"); model.addAttribute("keywords", "传递的keywords"); return "index"; } }
使用th来绑定数据，数据名称要用${}来包裹，如果想拼接字符串，可以用+来连接，也可以用||包裹住字符串
如果要问第二段代码中的Model是什么，这是spring框架提供的类，用来保存数据，从而跟随return传递给页面
常用方法：
<div> <h2 th:text="${user.username}"></h2> <h2 th:text="${user.age}"></h2> <div th:object="${user}"> <h2 th:text="*{username}"></h2> <h2 th:text="*{age}"></h2> </div> <!-- th:if--> <p th:if="${user.isVip}">会员</p> <ul> <li th:each="tag:${user.tags}" th:text="${tag}"></li> </ul> <!-- switch--> <div th:switch="${user.sex}"> <p th:case="1">男</p> <p th:case="0">女</p> <p th:case="*">默认</p> </div> </div>
@GetMapping("/basicTrain")
public String basic(Model model) {
UserVO user = new UserVO();
user.setUsername("老铁");
user.setAge(666);
user.setIsVip(true);
user.setSex(1);
user.setCreateTime(new Date());
user.setTags(Arrays.asList("PHP", "Node", "Java"));
model.addAttribute("user", user);
return "basic";
}
在Java程序中，定义一个UserVO类，创建basic方法实例化UserVO类并赋值，然后把UserVO添加到model中并命名为user，然后就可以在html页面中调用这些数据了
在html页面中，有两个方法可以调用user中的数据，一个是user.getUsername()，另一个是user.username。
在这里，还展示了一种特殊的数据绑定方式，就是在父标签中定义th:object=“${user}”,在子标签中定义th:text="*{username}"，值得注意的是：子标签中用*而不是$。要说为啥这样写？显而易见，这样写可以避免重复的打$
还有俩重点，一个是th:if，另外一个是th:switch，在th:if=“${user.isVip}”中，如果引号${user.isVip}是true，才会显示“会员”这两个字，否则不显示。在th:switch=“${user.sex}”下面必须要有子标签，然后在子标签中写th:case="你要写的值"，这样才可以实现th:switch的功能，比如上面这个例子，如果值是1就显示男，值是0显示女。
最后一个呢，就是th:each，这个标签一看就是遍历数组的，th:each="tag:${user.tags}"这里是起个叫tag的名字来指代${user.tags}，然后在后面写上th:text="${tag}"，这样user.tags这是数组中的数据就一个一个展示出来了
JavaScript、css的使用：
关于怎么引用css，确实和普通的引用方式不一样，要把css文件方入static文件夹，引用的时候要加个@符号
<link rel="stylesheet" th:href="@{app.css}">
下面是引入JavaScript，中间还加入了一个特别的写法，{}的作用是如果没有传值，则显示默认值，如果/*[[${user}]]*/传值了就显示${}中的值
<script th:inline="javascript"> const user = /*[[${user}]]*/{}; console.log(user) </script>
这里还有个类似三元运算符的玩意，在下面的例子中，这个玩意加在了th:each上，th:each="tag,stat:${user.tags}" th:classappend="${stat.last}?'active'"给这个数组中的最后一个元素加上了active中所定义的样式
<style> .active{ color: skyblue; } </style>
<li th:each="tag,stat:${user.tags}" th:text="${tag}" th:classappend="${stat.last}?active" ></li>
片段引入方式：
定义一个component.html文件
<div th:fragment="com1"> com1 </div> <div th:fragment="com2"> com2 </div> <div id="com3"> com3 </div>
在另一个文件中引入这三个片段。分别有两种引入方式，一种是th:replace/insert="~{component::com1}"格式是~{文件名::片段名},另一种是th:replace/insert=“#id名”。其中replace的作用是替换原有的div标签，比如说，如果我在component文件的com1片段中定义的是<footer>标签，则使用了th:replace="~{component::com1}"的标签将被替换为<footer>。当然，如果用的是insert，就向原有标签内再插入一层<footer>
<div th:replace="~{component::com1}"></div> <div th:insert="~{component::com2}"></div> <div th:insert="component::#com3"></div>
数据双向传递：
在thymeleaf中，数据是可以双向传递的。比如下面的代码，('传递的数据')传递给了片段com4，同时th:insert="~{component::com4('传递的数据')}"又引入com4，所以，此时，显示的结果是“传递的数据”
th:insert="~{component::com5(~{::#message})}"同理
<div th:fragment="com4(message)"> <p th:text="${message}"> </p> </div> <div th:fragment="com5(message)"> <div th:replace="${message}"></div> </div>
<div th:insert="~{component::com4('传递的数据')}"></div> <div th:insert="~{component::com5(~{::#message})}"> <p id="message">替换的模板</p> </div>
