As the saying goes, back-end engineers will not front-end is not a qualified programmer. Because the front-end engineers often have to deal with and in the project, and occasionally involve a simple front-end development, so in her spare time to learn a little knowledge of front-end, and today is first summarized what Thymeleaf template engine.
A, Thymeleaf Profile
- Thymeleaf Web and is independent of the environment of modern server-side Java template engine that can handle HTML, XML, JavaScript, CSS or even plain text. Similar to JSP, Freemarker
- It is a natural template, the prototype that is consistent with the principles of the page.
- Compliance with Web standards support for HTML5
Second, the identification criteria dialect
Thymeleaf in two forms, a certain difference in two ways:
- <Span th: text = "..."> This requires the introduction of a namespace.
- <Span data-th-text = "..."> the need to introduce this namespace.
Third, grammar
Each language has its fixed syntax, Thymeleaf no exception. The syntax can be summarized into the following categories:
- Standard expression
a) variable expression: e.g. $ {...} <span th: text = "$ {book.name}">
b) message expression: {...} # key message based on the value taken mapping, also referred to international text externalized. Variable expression with different properties such as java variable expressions in the object taken, and a message like Redis expression whose value acquired according to the value of key.
c) selecting expression: {...} * with variable expression difference: it is not the selected objects in the current context mapping performed on the whole. E.g
<div th:object=”${book}”> ... <span th:text=”*{title}”> ...</span> ... </div>
d) link expressions: @ {...} where links may be relative, or absolute links, may be of different protocols. For example: <a th:href="@{ https://www.cnblogs.com/Demrystv/ }"> ... </a>
e) of the expression: th: insert or th: replace
For example in a div
<div th:fragment=”copy”> © 2019 <a th:href=”@{https://www.cnblogs.com/Demrystv/}”>Demrystv</a> </div>
You can refer to this in the div in another div
<div th:insert=”~{footer :: copy}”></div>
f) Text: can be divided into text, numbers, Boolean, Null, etc.
Text: <span th: text = " 'I am Demrystv'">
Number: <span th: text = "2019 + 2019"> [Note: the internal mathematical operation may be performed]
Boolean: <div th: if = "$ {user.isAdmin ()} == true"> ... </ div>
null： <div th:if=”${user.isAdmin()} == null”>...</div>
g) calculating the like: for example, addition, subtraction, modulo comparison operation, three head operation, etc.
2. iterator
a) th: each <li th:each= “book : ${books}” th:text=”${book.title}”>The Red and the Black</div>
b) which may include state variables, e.g. index count size current even odd first last
3. conditional statement: th: if th: unless switch, etc.
4. Template Layout
a) defining a reference and fragments, using th: fragment
For example in a div
<div th:fragment=”copy”> © 2019 <a th:href=”@{https://www.cnblogs.com/Demrystv/}”>Demrystv</a> </div>
You can refer to this in the div in another div
<div th:insert=”~{footer :: copy}”></div>
b) may not be used of course th: fragment, use id
<div id=”copy-section”> © 2019 <a th:href=”@{https://www.cnblogs.com/Demrystv/}”>Demrystv</a> </div>
You can refer to this in the div in another div
<div th:insert=”~{footer :: #{copy-section}}”></div>
c difference between insert / replace / include three)
. I th: insert which is simply inserted fragment designated as the main body of the label
. Ii th: replace the primary label designated to replace the actual fragment
. Iii th: include similar insert, but is not inserted into the insert but this is only a fragment of content Note: not recommended]
Fourth, the priority of each attribute
Five, Thymeleaf and Springboot Integration
Integration: Modify build.gradle file
- The first add-dependent Thymeleaf
- Secondly, custom Thymeleaf and Thymeleaf Layout Dialect version
