JSP,Velocity,Freemarker,Thymeleaf...
The template engine recommended by Spring Boot: Thymeleaf .
2. Introduce Thymeleaf dependencies
<!-- Modify the default version of Spring Boot --> <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version> <!-- A support program for the layout function thymeleaf3 corresponds to layout2 version thymeleaf2 corresponds to layout1 version --> <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version> <!-- thymeleaf template engine--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
3. The use & syntax of Thymeleaf
@ConfigurationProperties(prefix = "spring.thymeleaf") public class ThymeleafProperties { //default encoding private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8"); //document type private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html"); // template location public static final String DEFAULT_PREFIX = "classpath:/templates/"; // template suffix public static final String DEFAULT_SUFFIX = ".html"; private boolean checkTemplate = true; private boolean checkTemplateLocation = true; private String prefix = DEFAULT_PREFIX; private String suffix = DEFAULT_SUFFIX; private String mode = "HTML5"; private Charset encoding = DEFAULT_ENCODING; private MimeType contentType = DEFAULT_CONTENT_TYPE; //cache private boolean cache = true; private Integer templateResolverOrder; private String[] viewNames; private String[] excludedViewNames; private boolean enabled = true; //other code... }
As long as the template html is placed in the classpath:/templates/ directory, thymeleaf will automatically render it.
4. Use Thymeleaf:
(1), import the namespace of thymeleaf:
<html lang="en" xmlns:th="http://www.thymeleaf.org"></html>
(2), thymeleaf syntax:
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div th:text="${hello}">Here is the original text! </div> </body> </html>
th : any html attribute : used to replace the value of the native html attribute, for example, id is replaced by th:id, class is replaced by th:class, etc.
Simple expressions: (expression syntax) Variable Expressions: ${...}: Get variable value, OGNL expression 1), get the properties of the object, call the method 2), use the built-in basic objects #ctx : the context object. #vars: the context variables. #locale : the context locale. #request : (only in Web Contexts) the HttpServletRequest object. #response : (only in Web Contexts) the HttpServletResponse object. #session : (only in Web Contexts) the HttpSession object. #servletContext : (only in Web Contexts) the ServletContext object. 3), built-in tool objects #execInfo : information about the template being processed. #messages : methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{…} syntax. #uris : methods for escaping parts of URLs/URIs #conversions : methods for executing the configured conversion service (if any). #dates : methods for java.util.Date objects: formatting, component extraction, etc. #calendars : analogous to #dates , but for java.util.Calendar objects. #numbers : methods for formatting numeric objects. #strings : methods for String objects: contains, startsWith, prepending/appending, etc. #objects : methods for objects in general. #bools : methods for boolean evaluation. #arrays : methods for arrays. #lists : methods for lists. #sets : methods for sets. #maps : methods for maps. #aggregates : methods for creating aggregates on arrays or collections. #ids : methods for dealing with id attributes that might be repeated (for example, as a result of an iteration) Selection Variable Expressions: *{...}: Selection expressions, similar to ${} Supplementary function: use with th:object <div th:object="${session.user}"> <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p> <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p> <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p> </div> Message Expressions: #{...}: Get internationalized content Link URL Expressions: @{...}: defines the URL link 例子:@{/order/process(execId=${execId},execType='FAST')} Fragment Expressions: ~{...}: Fragment reference expressions Literals: Text literals: 'one text' , 'Another one!' ,… Number literals: 0 , 34 , 3.0 , 12.3 ,… Boolean literals: true , false Null literal: null Literal tokens: one , sometext , main ,… Text operations: String concatenation: + Literal substitutions: |The name is ${name}| Arithmetic operations: Binary operators: + , - , * , / , % Minus sign (unary operator): - Boolean operations: Binary operators: and , or Boolean negation (unary operator): ! , not Comparisons and equality: Comparators: > , < , >= , <= ( gt , lt , ge , le ) Equality operators: == , != ( eq , ne ) Conditional operators: If-then: (if) ? (then) If-then-else: (if) ? (then) : (else) Default: (value) ?: (defaultvalue) Special tokens: No-Operation: _
iii ), thymeleaf public page element extraction:
<div th:fragment="copy"> © All rights reserved </div>
2), the introduction of public fragments
<div th:insert="~{footer :: copy}"></div>~{templatename::#selectorId} means: templatename::#selectorid
code segment <div id="copy-section"> © 2011 The Good Thymes Virtual Grocery </div> insert <div th:insert="~{footer :: #copy-section}"></div>
~{templatename::fragmentname} means: templatename::fragmentname
code segment <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> insert <div th:insert="~{footer :: copy}"></div>
3), the default effect: the insert function fragment will be inserted into the div tag.
If you use attributes such as th:insert to import, you can write templatename::#selectorId/fragmentname directly without writing ~{}.
But if it is written inline, you must add ~{}, such as [[~{}]].
th :insert : inserts the entire public fragment into the element introduced by the declaration
th :replace : replace the element introduced by the declaration with a common fragment
th :include : include the content of the imported fragment into the imported element
code segment <footer th:fragment="copy"> © All rights reserved </footer> introduction method <div th:insert="~{footer::copy}"></div> <div th:replace="~{footer::copy}"></div> <div th:include="~{footer::copy}"></div> actual effect: th:insert effect <div> <footer> © All rights reserved </footer> </div> th:replace effect <footer> © All rights reserved </footer> th:include effect <div> © All rights reserved </div>
(4) When introducing a code fragment, you can use the method of passing parameters, so that the passed parameters can be used in the code fragment.
<div th:fragment="frag"> ... </div> <div th:replace="::frag (onevar=${value1},twovar=${value2})">
or
<div th:fragment="frag (onevar,twovar)"> <p th:text="${onevar} + ' - ' + ${twovar}">...</p> </div> <div th:replace="::frag (${value1},${value2})">...</div> Order doesn't matter when using named parameters <div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div> <div th:replace="::frag (twovar=${value2},onevar=${value1})">...</div>
For example, the following code snippet is defined in templates/commons/bar.html
<nav id="sidebar"> <a class="nav-link" th:class="${activeUrl == 'main' ? 'nav-link active' : 'nav-link'}" ...> ... </a> </nav>
When introducing this code fragment, you can use the method of passing parameters.
<div th:replace="commons/bar::#sidebar(activeUrl='main')">...</div> or <div th:replace="commons/bar::#sidebar(activeUrl='emps')">...</div>
As for other Thymeleaf grammars, please refer to the Thymeleaf official website : http://www.thymeleaf.org.
=====================Make an advertisement, welcome to pay attention =====================
QQ: |
412425870 |
WeChat public account: Cay Classroom |
|
csdn blog: |
http://blog.csdn.net/caychen |
Code cloud: |
https://gitee.com/caychen/ |
github: |
https://github.com/caychen |
Click on the group number or scan the QR code to join the QQ group: |
|
Click on the group number or scan the QR code to join the QQ group: |