14 micro electric service providers [Mall] excellent dark horse music: day01-springboot (Thymeleaf Quick Start)

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 expression
  • th-Instructions: th-using the custom properties in Html5 achieved. If not H5, can be used data-th-instead
    • th:each: Similar to c:foreach traverse the collection , but the syntax is more concise
    • th: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.

 

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

Guess you like

Origin www.cnblogs.com/MarlonKang/p/11619704.html