1. Introduction to thymeleaf
Thymeleaf official website: www.thymeleaf.org, you can download the operation manual.
Thymeleaf can run in both network and non-network environments, that is, it can allow artists to view static effects in the browser, or allow programmers to view the data on the server Dynamic page effect
html template engine, which can completely replace JSP, provides spring standard dialect and an optional module that is perfectly integrated with SpringMVC, and can quickly implement form binding, attribute editor, internationalization and other functions
2. In application.properties, configure as follows
The thymeleaf packaged by springboot is version 2.x by default. If you want to use the latest 3.x version, you can configure the version in <properties>
3.
Here are some common usages:
Please create the css and js folders in the project resources directory in advance, create index.css, common.js files respectively, and put jquery.min.js in the js folder, the html and templates need to be used later
| Numbering | Attributes | description | Example |
| 1 | th:text | Calculate its value expression and set the result as the label body of the label | <p th:text="${userName}">China</p>, when the value is null or empty, the entire label does not display any content. |
| 2 | th: utext | th:text will escape special characters in the result, th:utext will not escape, suitable for the backend to directly output the content of the html tag to the frontend | <p th:utext="${userInfo}">China</p>, userInfo can be html content. |
| 3 | th:attr | Set any attribute in the label, you can set multiple attributes at once | <a href="" th:attr="title='Go to Baidu',href='http://baidu.com'">Go to Baidu</a> |
| 4 | th:* | Set values for attributes specified by html, one at a time | <a href="" th:title='Go to Baidu' th:href="'http://baidu.com'">Go to Baidu</a> |
| 5 | th:alt-title | Assign values to the alt and title attributes at the same time | <a href="#" th:alt-title="'th:A-B'">th:A-B</a> |
| 6 | th: lang-xmllang | Assign values to lang and xmllang attributes at the same time | <head lang="en" th:lang-xmllang="en"> |
| 7 | th:fragment | Define template fragment | <div th:fragment="copy"> |
| 8 | th:insert | Insert the referenced template fragment into your own tag body | <div th:insert="~{footer :: copy}"></div> |
| 9 | th:replace | Replace yourself with referenced template fragments | <div th:replace="footer :: copy"></div> |
| 10 | th:include | Similar to th:insert, instead of inserting a section, it only inserts the content of this section | <div th:include="footer :: copy"></div> |
| 11 | th:remove | Delete some code snippets in the template | <tr th:remove="all">... |
| 12 | th:each | Iterate data, such as array, List, Map, etc. | <tr th:each="user : ${userList}">... |
| 13 | th:if | When the condition is true, the template section is displayed, otherwise it is not displayed | <p th:if="${isMarry}">已婚1</p> |
| 14 | When the condition is false, the template section is displayed, otherwise it is not displayed | <p th:unless="!${isMarry}">已婚2</p> |
|
| 15 | Equivalent to the switch statement in Java, conditionally display the matched content | <div th:switch="1"> | |
| 16 | th:case | Use with th:switch | <div th:switch="1"> <p th:case="0">Administrator</p> <p th:case="1">Operator</p> <p th:case="* ">Unknown user</p> </div> |
| 17 | th:with | Define local variables | <div th:with="userFirst=${userList[0]}"> |
| 18 | Disable inline expressions, inline js, inline css | <script type="text/javascript" th:inline="javascript"> | |
(1）使用模版：定义公用头部css和尾部js引用，在其他页面中引用模版，更换样式时，只需更换模版中的引用即可
操作步骤：在resources—templates目录下创建一个template的文件夹，里面创建common.html文件，文件内容如下，以下有两种用法：
在需要引用头部、尾部的html文件中，使用 th:replace=“template/common :: header” 模版路径 :: 模版名称
（2）变量表达式: Spring EL表达式(在Spring术语中也叫model attributes)。如下所示
直接 . 出后台返回对象属性 <span th:text="${user.name}">
直接循环出后台返回数组-list属性 <ul><li th:each="user: ${users}" th:text="${user.name}"></li></ul>
可以写th:if 判断， <div th:if="${user.age} > 20">我大于20啦</div>
th:unless与 if 相反 <div th:unless="${user.age} > 20">我还年轻</div>
5.贴下我的代码和运行效果，项目中常用的就这些
效果如下:
