Earlier, I briefly cleaned up springBoot in order to demonstrate the Linux configuration submission project execution environment, but in the actual development process, SpringBoot needs to use more than just a little traversal. The Thymeleaf template engine is recommended for SpringBoot. The simple point is that this template has a simpler syntax and is more powerful. Although this technology has stopped being updated and seems a bit out of place in this era of front and back end separation, it is still quite useful in some real production scenarios
So today we’ll take a look at just how powerful this powerful template engine really is
Public id: Java Architect Association, will open git repository address later
Add the Thymeleaf template
There are two ways to create it
1. Create a springBoot project
Simply add Thymeleaf when you create the SpringBoot project
To introduce Thymeleaf, all you need to do is add the following dependencies to the pom.xml file, but there is one cavtake, which I explain in the code comments
<! -- Commit to Tomcat execution, need to add the following dependencies --> <! If you want to use Tomcat for SpringBoot itself, be sure to comment it out. > <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> <scope>provided</scope> </dependency> <! Add Thymeleaf template > <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>Copy the codeProject to write
Define the jump page in controller
Code architecture:
As I mentioned earlier, entry classes automatically find subpackages or parallel classes, so be aware of the following points for beginners
I’m just going to use the code I wrote earlier, and I’m going to create a Thymeleaf to show you today
package com.example.demo.thymeleaf; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import java.util.Map; /** * @author: biws * @date: Created in 2020/12/18 19:43 * @description: */ @controller public class HelloController {@requestMapping ("hello") @responseBody public String Hello () {return "This is the second way to build springBoot "; } @requestMapping ("testThymeleaf") public String testThymeleaf(Map Map) {Map. return "index"; }}Copy the codeThat’s the first advantage: it automatically goes to the Templates folder and looks for index.html
4. Run, then access the project
Enter http://localhost:8080/testThymeleaf can access index. HTML
Oh yes, I forgot to add the index code
<! DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title> Test Thymeleaf template </title> </head> <body> <p> Welcome to test Thymeleaf interface </p> <! --/*@thymesVar id="info" type=""*/--> <p th:text="${info}"></p> </body> </html>Copy the codeYou might have noticed
I simulated the front-end return data in this code, and stored it directly in the map, because it was a bit hard to write an interface, after all, I’m a lazy cancer patient, haha
In index, the data is retrieved by the ID info
And that’s what I showed you
Thymeleaf has its own tag syntax, which is different from the traditional way to get data.
Thymeleaf tag syntax
Common Labels
Below I sort out several commonly used knowledge points
Several common use methods
1. Assignment and string concatenation
<p th:text="${collect.description}">description</p> <span th:text="'Welcome to our application, ' + ${user.name} + '! '" >Copy the codeThere is another succinct way to write string concatenation
<span th:text="|Welcome to our application, ${user.name}! | ">Copy the code2. If/Unless
Thymeleaf uses the th:if and th:unless attributes for conditional judgment. In the following example, the tag is displayed only if the condition is true in th:if:
<a th:if="${myself=='yes'}" > </i> </a> <a th:unless=${session.user ! = null} th:href="@{/login}" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Login</a>Copy the codeTh :unless, as opposed to th:if, displays the content of an expression only if the condition is not true.
You can also use (if)? (then) : (else) This syntax determines what is displayed
3. For loop
<tr th:each="collect,iterStat : ${collects}">
<th scope="row" th:text="${collect.id}">1</th>
<td >
<img th:src="${collect.webLogo}"/>
</td>
<td th:text="${collect.url}">Mark</td>
<td th:text="${collect.title}">Otto</td>
<td th:text="${collect.description}">@mdo</td>
<td th:text="${terStat.index}">index</td>
</tr>
Copy the codeIterStat is called a state variable and has the following attributes:
Index: the index of the current iteration (counting from 0)
Count: Index of the current iteration (counting from 1)
Size: indicates the size of the iterated object
Current: indicates the current iteration variable
Even /odd: Boolean if the current loop is even/odd (counting from 0)
First: Boolean value for whether the current loop is the first
Last: Boolean value, whether the current loop is the last
4, URL
URL plays an important role in Web application templates. It should be noted that Thymeleaf uses the @{… }. If you need Thymeleaf to render the URL, be sure to use th:href, th: SRC, etc. Here is an example
<! -- Will produce 'http://localhost:8080/standard/unread' (plus rewriting) --> <a th:href="@{/standard/{type}(type=${type})}" rel="external nofollow" >view</a> <! -- Will produce '/gtvg/order/3/details' (plus rewriting) --> <a href="details.html" rel="external nofollow" th:href="@{/order/{orderId}/details(orderId=${o.id})}" rel="external nofollow" >view</a>Copy the code5. Use thymeleaf layout
Using thymeleaf layout is very convenient
<! <footer th:fragment="copy"> © 2016 </footer> <! Introduce <! Anywhere on the page. <body> <div th:include="footer :: copy"></div> <div th:replace="footer :: copy"></div> </body> <! <body> <div> © 2016 </div> <footer>© 2016 </footer> </body>Copy the codeHere is a common background page layout, the entire page is divided into header, tail, menu bar, hidden bar, click the menu to change only the content area of the page
<body class="layout-fixed">
<div th:fragment="navbar" class="wrapper" role="navigation">
<div th:replace="fragments/header :: header">Header</div>
<div th:replace="fragments/left :: left">left</div>
<div th:replace="fragments/sidebar :: sidebar">sidebar</div>
<div layout:fragment="content" id="content" ></div>
<div th:replace="fragments/footer :: footer">footer</div>
</div>
</body>
Copy the codeAny page that wants to use this layout value simply replaces the content module in the middle
<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
<body>
<section layout:fragment="content">
...
Copy the codeYou can also pass in a reference to a template
<head th:include="layout :: htmlhead" th:with="title='Hello'"></head> <! FileName /layout:htmlhead <! --htmlhead is defined as a code fragment --> th:fragment="copy"]Copy the codeOk, some basic applications are basically covered here, be sure to practice ah