Download notes and information on the project, please click on this sentence itself acquired.
day01-springboot (theory papers) ; day01-springboot (practice papers) ; day01-springboot (Thymeleaf Quick Start)
5.Thymeleaf Quick Start
SpringBoot not recommended JSP , but supports some template engine technology:
5.1. Why is Thymeleaf?
Simply put, Thymeleaf is a template engine, it can completely replace the JSP . Compared to other template engines, it has the following four very attractive feature:
- Combining static and dynamic: Thymeleaf Jieke run under the environment of network and non-network that it allows artists to see the effect of static page in a browser, but also allows the programmer to see the effect of dynamic pages with data on the server. This is because it supports html prototype, and then add additional attributes to achieve in the html tag template + display of the data. The browser will ignore the interpretation of undefined html tag attributes, so thymeleaf templates can be statically run; when there is data to return to the page, Thymeleaf label dynamically replace static content, dynamic display the page.
- Out of the box: it offers standard and spring standard two kinds of dialects , you can directly apply a template to achieve JSTL, OGNL expressions effect, to avoid trouble sets per day template, change jstl, change the label. At the same time developers can extend and create custom dialect.
- Support multi-dialect: Thymeleaf provide spring standard dialect and a perfect integration with SpringMVC optional module, you can quickly achieve a form of binding, property editor, international and other functions.
- Seamless integration with SpringBoot, SpringBoot provides a default configuration Thymeleaf, and set the view resolver to Thymeleaf, we can be like the previous operating jsp to operate Thymeleaf. Code is almost no difference, that is, there are differences in the template syntax.
Next, we come to appreciate the charm Thymeleaf entry by case:
5.2 to provide data.
Writing a controller method that returns the number of user data into the model, the future rendering of the page
@GetMapping ( "/ All" ) public String All (a ModelMap Model) { // Query User List <the User> Users = the this .userService.queryAll (); // put Model model.addAttribute ( "Users" , Users); // returns the name of the template (that is, classpath: / templates / html directory under the file name) return "the Users" ; }
5.3 The introduction of starter
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
SpringBoot will automatically register a view resolver as Thymeleaf:
And analysis similar to the JSP InternalViewResolver, Thymeleaf will be determined based on the location of the template file prefix and suffix:
- Default prefix:
classpath:/templates/
- Default suffix:
.html
So if we return View: users
, will point to classpath:/templates/users.html
Generally, we do not need to modify the default.
5.4. Static page
According to the above description, the default template on the classpath of the templates folder, we create a new html file in which:
Html template writing data, rendering the model:
Note that the html namespace, change: xmlns:th="http://www.thymeleaf.org"
there will be grammar tips.
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>首页</title> <style type="text/css"> table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto} table, th,for example {border: 1px solid darkslategray;padding: 10px} </style> </head> <body> <div style="text-align: center"> <span style="color: darkslategray; font-size: 30px">欢迎光临!</span> <hr/> <table class="list"> <tr> <th>id</th> <TH > Name </ TH > < TH > username </ TH > < TH > Age </ TH > < TH > gender </ TH > < TH > birthday </ TH > </ TR > < TR TH: the each = "User: Users $ {}" > < TD TH: text = "$ {} the user.id" > . 1 </ TD > <td th:text="${user.name}">张三</td> <td th:text="${user.userName}">zhangsan</td> <td th:text="${user.age}">20</td> <td th:text="${user.sex}">男</td> <td th:text="${user.birthday}">1980-02-30</td> </tr> </table> </div> </body> </html>
We see here uses the following syntax:
${}
: This is similar to el expression, but in fact is ognl grammar, and more powerful than el expressionth-
Instructions:th-
using the custom properties in Html5 achieved. If not H5, can be useddata-th-
insteadth:each
: Similar toc:foreach
traverse the collection , but the syntax is more conciseth:text
: Statement label text- For example
<td th-text='${user.id}'>1</td>
, if user.id has a value, it overrides the default of 1 - If no value, td default of 1 is displayed. The reason for this is the thymeleaf capable of combining static and dynamic, template parsing failure does not affect the display of the page, because it will show the default value.
- For example
5.5. Test
Next, we open the test page:
5.6. Stencil buffer
Thymeleaf the first time after the template will be resolved in the cache, which greatly improves the concurrent processing capabilities. But this gives us develop the inconvenience, modified pages and will not see the results immediately, the development phase we can use to turn off caching:
# Development phase closed thymeleaf template cache
spring.thymeleaf.cache = false
In Idea, we need to modify the page after the shortcut keys: `Ctrl + Shift + F9` the project before they can rebuild.
========================
end